Cross domain content usage from client script (security issues)

Question

Hi guys,

I'm trying to load some external content using jQuery load function to div on my page. load method works ok, with local content, but if you want something out of your domain, it won't work.

$("#result").load("http://extrnal.com/page.htm #data);

(it actually works in IE with security warning, but refuses to work in Chrome at all). jQuery documentation says that it is right, because cross-domain content is restricted because of security reasons. Same warning I get if use .getJSON method.

OK, after a googling a bit I found very interesting approach of using YQL for loading content, I've tried some examples, like this:

        var request = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fq%3Fs%3Dyhoo%22&format=json&diagnostics=true&callback=?";
        $.getJSON(request, function (json) {
            alert(json);
        }
       );

And it really works!

What I dont understand now is that http://query.yahooapis.com is also cross-domain resouce but browser (both IE and Chrome) works OK with that?

Whats the difference? What am I missing?

Thank you

Answer 1

The results you are getting back from YQL are in JSON format which is permitted for cross site AJAX calls like this. Its the same mechanism that allows you to communicate with web services for external sites via JSON (Ie. the twitter API).

Details here - http://www.wait-till-i.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/

Answer 2

you can make on external site JSON like this:

callback({key:value,etc:1})

and define

function callback(json) {
   ..here is processing..
}

Answer 3

Thanks for your answers, but unfortunately both of them do not answer my orginal question..

I've checked out related questions on stackoverflow (i know i need to do that first) and found the reason of such behavior.

First code snipset uses AJAX/JSON to retrive the data and it is permitted because of Same Origin Policy. But request to YQL uses JSONP instead, that is OK.

The JSONP was something that I don't know about, that's why I didn't undrestand the behaviour.

Introduction info on JSONP could be found here: http://ajaxian.com/archives/jsonp-json-with-padding