Question

We are providing a snippit of HTML that our client can embed on their website to make a callback to our API. This HTML is a simple form and a Javascript file hosted on our server.

This is what the client hosts on their website (clientsite.com):

<script type="text/javascript" src="http://mysite.com/webcallback/callback_script.js"></script> 
<form onsubmit="makeCallback();return false;">
<input id="myInput" type="text" />
<input type="submit" value="Go" />
</form>

When makeCallback is called, the script hosted on mysite.com does the following:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://mysite.com/api/callback.php");
xhr.send();

Notice that the domain of the script and the domain of the XHR request are the same, but the HTML which hosts the form and the script tag is on clientsite.com.

This works fine in FF and Chrome, but in IE I am getting an access denied error. I imagine it has something to do with the same-origin-policy but I am trying to understand why this works in FF and Chrome but not IE. Is there any way to get it to work in IE?

Thanks

Answer 1

The included script is executed in the scope of the page that is including it, not in a scope of it’s own. Therefore your code is requesting from a different domain.

The browsers that allow this request have a more relaxed version of the cross-domain restrictions.