Failed to execute ‘send’ on ‘XMLHttpRequest’ – Chrome iFrame ajax issue
Once again I came across a strange issue on one of our client’s websites. Their website is being placed in the iFrame on different other websites – because they provide special content and forms that are being filled by users.
The iFrame itself is sandboxed, with the parameters as follows:
sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"
This seems to be rather a wide spectrum of possibilities, forms are allowed, scripts are allowed… Yet the Ajax requests from the form are working on Firefox but not working in Chrome. Chrome is returning such an error:
"NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://destination.server.com/receiver/'."
This Ajax request is made by the jQuery engine (yes, yes, this is an old website) and there were no signs of the source of such a problem. By trial end error, I found that the reason for this behavior was that the Ajax call was configured to be made synchronously. In the code it looked like this:
$.ajax({ url: "/receiver/URL", data: data, type: "post", dataType: "json", cache: false, async: false, success: function(data) { // do something on success } });
As you can see, there is an “async: false” declared in the call. The only change I had to do was to write “async: true” instead. It looks like Chrome doesn’t like synchronous requests in the sandboxes iframe…