Javascript 规避同一原产地政策的方法 同一原产地政策

我想制作一个关于HTML/JS同源策略的社区wiki，希望能帮助搜索此主题的任何人。这是SO上搜索最多的主题之一，并且没有统一的wiki，因此我决定：）

同一原产地政策可防止 从一个数据库加载的文档或脚本 起源于获得或设置 来自另一个文档的文档属性 起源。这项政策一直沿用至今 回到Netscape Navigator 2.0

您最喜欢采用哪些方法来执行相同的原产地政策？

---

请保持示例的详细性，最好同时链接您的源代码。

个人而言，

窗口。postMessage

是我为现代浏览器找到的最可靠的方式。您确实需要做更多的工作来确保自己不会受到XSS攻击，但这是一个合理的权衡

还有一些流行的Javascript工具包插件，它们包装了window.postMessage，使用上面讨论的其他方法为旧浏览器提供了类似的功能。

反向代理方法

• 方法类型：Ajax

在服务器上设置一个简单的代理，将允许浏览器使用Ajax请求的相对路径，而服务器将充当任何远程位置的代理

如果在Apache中使用，设置反向代理的基本配置指令是

ProxyPass

。它通常使用如下：

ProxyPass     /ajax/     http://other-domain.com/ajax/

在这种情况下，浏览器将能够请求

/ajax/web_service.xml

作为相对URL，但服务器将充当

http://other-domain.com/ajax/web_service.xml

这种方法的一个有趣的特性是，反向代理可以很容易地将请求分发到多个后端，从而充当一个代理

我使用JSONP

基本上，你加上

<script src="http://..../someData.js?callback=some_func"/>

在你的页面上

应该调用some_func（），以便通知您数据在

document.domain

方法中

• 方法类型：iframe

请注意，这是一个iframe方法，它将document.domain的值设置为当前域的后缀。如果这样做，则较短的域将用于后续原点检查。例如，假设文档中的脚本位于

http://store.company.com/dir/other.html

执行以下语句：

document.domain = "company.com";

执行该语句后，页面将通过

http://company.com/dir/page.html

。然而，根据同样的推理，company.com无法将

document.domain

设置为

othercompany.com

使用此方法，您可以从源于主域的页面上的子域上的iframe执行javascript。此方法不适用于跨域资源，因为Firefox等浏览器不允许您将

document.domain

更改为完全陌生的域

资料来源：

跨源资源共享方法

• 方法类型：AJAX

（CORS）是一个W3C工作草案，定义了浏览器和服务器在跨源访问源时必须如何通信。CORS背后的基本思想是使用自定义HTTP头，使浏览器和服务器都能够充分了解彼此，以确定请求或响应是成功还是失败

对于一个简单的请求，使用

GET

或

POST

且没有自定义标题且其正文为

text/plain

，请求将与一个名为

Origin

的额外标题一起发送。Origin标头包含请求页面的来源（协议、域名和端口），以便服务器可以轻松确定是否应提供响应。示例

Origin

标题可能如下所示：

Origin: http://www.stackoverflow.com

如果服务器决定应该允许该请求，它将发送一个

访问控制允许源

头，回显已发送的相同源或

*

（如果是公共资源）。例如：

Access-Control-Allow-Origin: http://www.stackoverflow.com

如果缺少此标头，或者来源不匹配，则浏览器不允许该请求。如果一切正常，浏览器将处理该请求。请注意，请求和响应都不包含cookie信息

Mozilla团队建议您检查

with credentials

属性是否存在，以确定浏览器是否通过XHR支持CORS。然后，您可以与

XDomainRequest

对象结合使用，以覆盖所有浏览器：

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var request = createCORSRequest("get", "http://www.stackoverflow.com/");
if (request){
    request.onload = function() {
        // ...
    };
    request.onreadystatechange = handler;
    request.send();
}

请注意，要使CORS方法工作，您需要访问任何类型的服务器头机制，并且不能简单地访问任何第三方资源

资料来源：

window.postMessage

方法

• 方法类型：iframe

window.postMessage

调用时，当任何必须执行的挂起脚本完成时，导致在目标窗口调度

MessageEvent

（例如，如果

window.postMessage

是从事件处理程序调用的，以前设置的挂起超时等，则剩余的事件处理程序）。

MessageEvent

具有message类型，这是一个

data

属性，设置为提供给

窗口的第一个参数的字符串值。postMessage

，一个

origin

属性，对应于调用

window.postMessage

时调用

window.postMessage

窗口中主文档的来源，以及一个

source

属性，该属性是调用

window.postMessage

的窗口

要使用

window.postMessage

，必须附加事件侦听器：

    // Internet Explorer
    window.attachEvent('onmessage',receiveMessage);

    // Opera/Mozilla/Webkit
    window.addEventListener("message", receiveMessage, false);

并且必须声明

receiveMessage

函数：

function receiveMessage(event)
{
    // do something with event.data;
}

<script>window.parent.postMessage('foo','*')</script>

<?php

$curl = curl_init();
$timeout = 30;
$ret = "";
$url="http://localhost:82/put_val?val=".$_GET["val"];
curl_setopt ($curl, CURLOPT_URL, $url);
curl_setopt ($curl, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt ($curl, CURLOPT_MAXREDIRS, 20);
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5");
curl_setopt ($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
$text = curl_exec($curl);
echo $text;

?>

function getdata(obj1, obj2) {

    var xmlhttp;

    if (window.XMLHttpRequest)
            xmlhttp=new XMLHttpRequest();
    else
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","phpURLFile.php?eqp="+obj1+"&val="+obj2,true);
    xmlhttp.send();
}

$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
    $('#output').html(data.contents);
});