Locked. This question and its answers are
locked,因为该问题是题外话,但具有历史意义。它目前不接受新的答案或互动。
同一原产地政策
我想制作一个有关HTML / JS同源策略的社区Wiki,以希望能帮助搜索此主题的任何人。这是关于SO的最热门搜索主题之一,并且没有统一的Wiki,所以我在这里:)
相同的来源政策可防止
从一个文件或脚本加载
源于获取或设置
来自另一个文档的属性
起源。这项政策一路走来
回到Netscape Navigator 2.0。
您采用哪些最喜欢的方式处理同源政策?
请保持详细示例,并最好也链接您的资源。
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
更改为完全陌生的域。
资料来源:
https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript
跨域资源共享方法
方法类型:AJAX。
Cross-Origin Resource Sharing(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信息。
Mozilla团队在
their post about CORS中建议您应该检查
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方法起作用,您需要有权访问任何类型的服务器头机制,并且不能简单地访问任何第三方资源。
资料来源:
http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
window.postMessage
方法
方法类型:iframe。
window.postMessage
在被调用时会导致在必须执行的任何待处理脚本完成时(例如,如果从事件处理程序中调用了
MessageEvent
的剩余事件处理程序,先前设置的待处理超时,等等。)。
window.postMessage
具有类型消息,一个
MessageEvent
属性设置为提供给
data
的第一个参数的字符串值,一个
window.postMessage
属性对应于调用
在调用
origin
时,以及
window.postMessage
属性,该属性是从中调用
window.postMessage
的窗口。
要使用
source
,必须附加事件侦听器:
// Internet Explorer
window.attachEvent('onmessage',receiveMessage);
// Opera/Mozilla/Webkit
window.addEventListener("message", receiveMessage, false);
并且必须声明
window.postMessage
函数:
function receiveMessage(event)
{
// do something with event.data;
}
异地iframe还必须通过
window.postMessage
正确发送事件:
<script>window.parent.postMessage('foo','*')</script>
无论文档在窗口中的位置如何,任何窗口都可以随时在任何其他窗口上访问此方法,以向其发送消息。因此,用于接收消息的任何事件侦听器都必须首先使用原始属性和可能的源属性检查消息发送者的身份。这一点不能低估:无法检查
receiveMessage
和可能的
postMessage
属性会启用跨站点脚本攻击。
资料来源:
https://developer.mozilla.org/en/DOM/window.postMessage
我是一名优秀的程序员,十分优秀!