跨站 XMLHttpRequest

问题描述

我想提供一段 Javascript 代码，它可以在包含它的任何网站上运行，但它总是需要在托管 Javascript 的服务器上获取更多数据(甚至修改数据).我知道出于显而易见的原因存在安全限制.

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.

考虑在 xyz.com 上托管的 index.html，其中包含以下内容:

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

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

some.js 能否使用 XMLHttpRequest 将数据发布到 abc.com?换句话说，abc.com 是否因为我们从那里加载了 Javascript 而被隐式信任?

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?

推荐答案

some.js 能否使用 XMLHttpRequest 将数据发布到 abc.com?换句话说，abc.com 是否因为我们从那里加载了 Javascript 而被隐式信任?

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...

如果您信任数据源，那么 JSONP 可能是更好的选择.JSONP 涉及将新的 SCRIPT 元素动态添加到页面，并将 SRC 设置为另一个域，并将回调设置为查询字符串中的参数.例如:

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');
    }
});

因此，您需要托管自己的脚本，该脚本可以使用 PHP/CURL 发布到 abc.com 域，然后以 JSONP 格式输出响应:

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:

我不太擅长 PHP，但可能是这样的:

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 . '})";

?>

因此，您可以控制的服务器将充当客户端和 abc.com 之间的媒介，您将以 JSON 格式将响应发送回客户端，以便 JavaScript 可以理解和使用它...

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...

这篇关于跨站 XMLHttpRequest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！