同源策略（same origin policy）-骥服盐车网

同源策略（same origin policy）

浏览器的同源同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的策略文档或它加载的脚本如何能与另一个源的资源进行交互。能够减少恶意文档，同源减少可能被攻击媒介。策略 如果两个URL的同源协议、域名、策略端口号都相同，同源就称这两个URL同源。策略

浏览器默认两个不同的同源源之间是可以互相访问资源和操作DOM的。两个不同的策略源之间若是想要访问资源或者操作DOM，那么会有一套基础的同源安全策略的制约，我们把这称为同源策略。策略它的同源存在可以保护用户隐私信息，防止身份伪造。策略

Origin

Web内容的同源源用于访问它的URL的协议（方案）、主机（域名）、和端口号。只有当协议、主机、域名都匹配时，两个对象才具有相同的起源，即Origin相同。

（如果把html看做是一个文档，那么端口号是其存放位置的根目录，主机是其上级目录，协议是其上上级目录，同源策略就可以理解为同一根目录下的文件才可以访问、操作）

在浏览器中,

document.domain+iframe方案优点：

实现逻辑简单，无需额外中转页面

document.domain+iframe方案缺点：

仅适用于主域相同，子域不同的前端通信跨域场景

location.hash+iframe

当两个不符合同源策略且主域不同的页面需要进行跨域通信时，可以利用url的hash值改变但不刷新页面的特性，实现简单的前端跨域通信。

通常情况下http://a.qq.com/a.html内嵌不同域的http://b.qq1.com/b.html时，受浏览器安全机制限制，a.html 可以修改b.html的hash值，但b.html不被允许修改不同域的父窗体a.html的hash值。因此，此方案需要一个与a.html同源的http://a.qq.com/c.html来进行中转，此方案实现流程如下图所示：

location.hash+iframe方案代码示例：

location.hash+iframe方案优点：

可以解决主域不同的前端通信跨域问题。
hash改变，页面不会刷新。

location.hash+iframe方案缺点：

受部分浏览器安全机制限制，需要额外的同源中转页面，且中转页面需要js逻辑来修改hash值。
通信数据类型及长度均受限，且数据外显在url上，存在一定安全风险。

补充：window.parent - Web API 接口参考 | MDN (mozilla.org)

window.name+iframe

window.name属性的独特之处在于，name值在不同页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的name值（2MB）。

如下图所示，http://a.qq.com/a.html内嵌不同域的http://b.qq1.com/b.html。b.html有数据要传递时，把数据附加到window.name上，然后跳转到一个和a.html同域的http://a.qq.com/c.html。由于a.html和c.html满足同源策略，a.html可以获取c.html的window.name，从而实现了跨域通信。

window.name+iframe代码示例：

window.name+iframe方案优点：

可以解决主域不同的前端通信跨域问题。
通信数据类型不受限，且长度可达2MB。

window.name+iframe方案缺点：

需要额外的同源中转页面，但中转页可以为空白页。

postMessage

postMessage是HTML5 XMLHttpRequest Level2中的API，且是为数不多可以跨域操作的window属性之一，它通常用于解决以下方面的问题：

页面和其打开的新窗口的数据传递。
多窗口之间消息传递。
页面与嵌套iframe消息传递。

postMessage是一种安全的跨域通信方法。当a.html获得对b.html的window对象后，a.html调用postMessage方法分发一个MessageEvent消息。b.html通过监听message事件即可获取a.html传递的数据，从而实现跨域通信。postMessage实现流程如下图所示：

postMessage方法的语法如下：

otherWindow.postMessage(message、targetOrigin、[transfer])