I'm making a RESTful web service call in my JavaScript page and get the following warning:
"This page is accessing information that is not under its control. This poses a security risk. Do you want to continue?"
Now I've read up on this and am aware of the cross-domain, same origin policy. However, I don't get such warnings when I consume other APIs like Google's Maps API. Clearly the domain is not the same as my local domain. What is the difference?
My initial guess is that Google is 'imported' into the page using the <script>
tag while my REST consumption is using XMLHttpRequest. IF that is the case, what is the difference between these two approaches that one would merit a warning and the other not?
Solution Summary:
I would like to summarize what the solution was to this problem. You can find a helpful URL here.
Essentially, you inject code through the pages <script>
tag when importing JavaScript. Anything imported through this tag is executed immediately in the global context. So instead of passing in a JavaScript file, pass in a URL to a website that returns a page not of HTML tags but instead a page that returns JavaScript code text that calls a callback in your code.
You use URL parameters to tell the page what 'callback' to return and any parameters that need to go into the callback. For instance:
<script type="text/javascript" src="http://crossdomainhost/CrossDomainConsumerSite/Default.aspx?callback=myCallback&param1=myParam"></script>
When this is evaluated, the page returned by the 'src' parameter is:
myCallback( myParam );
On the server side, you will create a site at that URL that overrides the OnLoad equivalent (with whatever server-side language you are using). Instead of page HTML, the OnLoad will take the URL parameters and re-swizzle them to match the callback call above.
When the substitution is made, the callback is immediately called when the client loads the page. The benefit of this is that the 'src' URL doesn't have to match the domain of the hosted page.
Here is what the client HTML page will look like at the end:
<script type="text/javascript">
var myCallback = function( myParam ) {
alert( "this was called across domains!" );
};
</script>
<script type="text/javascript" src="http://crossdomainhost/CrossDomainConsumerSite/Default.aspx?callback=myCallback&param=myParam></script>