問題描述

我想提供一段 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模板網！