Cross-site XMLHttpRequest

Question

I want to provide a piece of Javascript code that will work on any website where it is included, but it always needs to get more data (or even modify data) on the server where the Javascript is hosted. I know that there are security restrictions in place for obvious reasons.

Consider index.html hosted on xyz.com containing the following:

<script type="text/javascript" src="http://abc.com/some.js"></script>

Will some.js be able to use XMLHttpRequest to post data to abc.com? In other words, is abc.com implicitly trusted because we loaded Javascript from there?

Solution 1

Will some.js be able to use XMLHttpRequest to post data to abc.com? In other words, is abc.com implicitly trusted because we loaded Javascript from there?

No, because the script is loaded on to a seperate domain it will not have access...

If you trust the data source then maybe JSONP would be the better option. JSONP involves dynamically adding new SCRIPT elements to the page with the SRC set to another domain, with a callback set as a parameter in the query string. For example:

function getJSON(URL,success){
    var ud = 'json'+(Math.random()*100).toString().replace(/\./g,'');
    window[ud]= function(o){
        success&&success(o);
    };
    document.getElementsByTagName('body')[0].appendChild((function(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = URL.replace('callback=?','callback='+ud);
        return s;
    })());
}

getJSON('http://YOUR-DOMAIN.com/script.php?dataName=john&dataAge=99&callback=?',function(data){
    var success = data.flag === 'successful';
    if(success) {
        alert('The POST to abc.com WORKED SUCCESSFULLY');
    }
});

So, you'll need to host your own script which could use PHP/CURL to post to the abc.com domain and then will output the response in JSONP format:

I'm not too great with PHP, but maybe something like this:

<?php
    /* Grab the variables */
    $postURL = $_GET['posturl'];
    $postData['name'] = $_GET['dataName'];
    $postData['age'] = $_GET['dataAge'];

    /* Here, POST to abc.com */
    /* MORE INFO: http://uk3.php.net/curl & http://www.askapache.com/htaccess/sending-post-form-data-with-php-curl.html */

    /* Fake data (just for this example:) */
    $postResponse = 'blahblahblah';
    $postSuccess = TRUE;

    /* Once you've done that, you can output a JSONP response */
    /* Remember JSON format == 'JavaScript Object Notation' - e.g. {'foo':{'bar':'foo'}} */
    echo $_GET['callback'] . '({';
    echo "'flag':' . $postSuccess . ',";
    echo "'response':' . $postResponse . '})";

?>

So, your server, which you have control over, will act as a medium between the client and abc.com, you'll send the response back to the client in JSON format so it can be understood and used by the JavaScript...

Solution 2

The easiest option for you would be to proxy the call through the server loading the javascript. So some.js would make a call to the hosting server, and that server would forward the request to abc.com.

of course, if that's not an option because you don't control the hoster, there are some options, but it seems mired in cross browser difficulties: http://ajaxian.com/archives/how-to-make-xmlhttprequest-calls-to-another-server-in-your-domain