Why doesn't this JavaScript call break the “same origin policy”

Question

I'm displaying an external JavaScript file using jQuery. Is the reason "same origin policy" is not being broken because it is not an AJAX request?

http://jsfiddle.net/m7q3H/52/

Fiddle code :

HTML

<body>
  <div id="toupdate">
     <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script>
  </div>      
</body>

jQuery

$(document).ready(function() {
   console.log('HTML is '+$('#toupdate').html());
});

This is the very reason JSON-P works and exists at all. This is the circumvention that the model uses. — TheZ

Darin Dimitrov Darin Dimitrov · Accepted Answer · 2012-08-16T16:50:28

Oh absolutely no problem here. You could reference javascript files from wherever you want. For example Google CDN provides common js files such as jQuery that you could use:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

By the way that's exactly how jQuery's implementation of JSONP works. It uses javascript to inject a <script> tag dynamically to the DOM pointing to some remote server side script:

<script src="//remotedomain.com/script?callback=abc"></script>

this remote script responds with a Content-Type: 'application/x-javascript' response header and the following body:

abc({"foo":"bar"})

and on your domain you simply define the abc function:

<script type="text/javascript">
    function abc(data) {
        alert(data.foo);
    }
</script>

and there you go: a simulation of a cross domain AJAX (I say simulation because it is not using the native XHR object but it achieves the same effect).

Now you can understand why jQuery's JSONP implementation is limited to GET requests only => because when you inject a script tag, the browser sends only a GET request to its src attribute.

Why doesn't this JavaScript call break the “same origin policy”

3 Answers