JavaScriptWays to circumvent the same-origin policy

Question

The same origin policy

我想制作一个有关HTML / JS 同源策略
的社区Wiki，以希望能帮助搜索此主题的任何人。这是关于SO的最热门搜索主题之一，并且没有统一的Wiki，所以我在这里:)

相同的来源策略可防止从一个来源加载的文档或脚本从另一个来源获取或设置文档的属性。该策略可追溯到Netscape Navigator 2.0。

您采用哪些最喜欢的方式处理same-origin policies?？

请保持详细示例，并最好也链接您的资源。

Answer 1

该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标头，以回显与发送的原始源相同的消息，或者*它是公共资源。例如：

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

如果缺少此标头，或者起源不匹配，则浏览器将拒绝该请求。如果一切顺利，则浏览器将处理请求。请注意，请求和响应均不包含Cookie信息。

建议您应检查该withCredentials
属性是否存在，以确定浏览器是否通过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从事件处理程序调用了剩余的事件处理程序，先前设置的待处理超时等），在目标窗口处调度a
。的MessageEvent具有类型消息，data其被设置为提供到所述第一参数的字符串值属性window.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;
}

异地iframe还必须通过postMessage以下方式正确发送事件：

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

无论文档在窗口中的位置如何，任何窗口都可以随时在任何其他窗口上访问此方法，以向其发送消息。因此，用于接收消息的任何事件侦听器都必须首先使用原始属性和可能的​​源属性检查消息发送者的身份。这不能低估：
无法检查origin和可能的source属性将启用跨站点脚本攻击。