浏览器同源策略及一些跨源通信方法

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

同源策略（same-origin policy）在 Web 安全领域是一个很重要的概念，它是现代浏览器安全的基石。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

  • 同源策略允许一个源下的不同页面互相获取彼此的资源（eg：文档、脚本文件等）。

  • 同源策略限制一个源与另一个源的资源进行交互。

    • Cookie、LocalStorage 和 IndexDB 无法读取
    • DOM 无法获得
    • AJAX 请求不能发送

何为同一个源

  • 获取当前页面的源：location.origin

所谓同源，指的是三个相同：

  • 协议相同（可通过 location.protocol 获取）
  • 主机相同（可通过 location.hostname 获取）
  • 端口相同（可通过 location.port 获取）
http://blog.percymong.com/page/2/

协议：HTTP 协议
主机：blog.percymong.com
端口：这里没有设置，HTTP 协议默认端口为 80

https://en.wikipedia.org/wiki/Same-origin_policy

协议：HTTPS 协议
主机：en.wikipedia.org
端口：这里没有设置，HTTPS 协议默认端口为 443
当前页面 http://www.percymong.com/page/2/

http://www.percymong.com/page/3/   // 同源
http://percymong.com/page/2/       // 不同源（主机不同）
http://blog.percymong.com/page/2/  // 不同源（主机不同）
http://www.percymong.com:888       // 不同源（端口不同）
https://www.percymong.com/page/2/  // 不同源（协议不同）

实现跨源访问的一些方法

需求：要求下面两个不同源的页面可以共享一些 cookie
页面一：http://www.percymong.com/
页面二：http://blog.percymong.com/

针对上面的需求，网上有这样的一种解决办法：为两个页面设置相同的 document.domain = 'percymong.com'，然后就可共享 cookie。（但是我自己在上面的两个页面上试了一下，结果不起作用~）

我的解决方法：每次添加 cookie 时，为 cookie 添加 ;domain=.percymong.com 属性，即可实现共享 cookie。

注意：这个局限于拥有相同超级域名的不同页面。

同窗口跨源通信 window.name

浏览器窗口有 window.name 属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

HTML5 跨文档消息传递（另起文章）

JSONP 跨源通信（另起文章）

  • 原理：本地页面通过动态添加 script 标签来调用服务器提供的 JavaScript 脚本，从而实现跨源通信。

跨源资源共享 CORS（另起文章）

  • 原理： CORS 是基于 Ajax 原理并通过设置客户端和服务端的 HTTP Header 来实现跨源通信。

Fetch API（另起文章）

这是一个全新的 API，它可以以另一种方式实现 CROS 跨源通信。

Web Sockets（另起文章）

同源策略不适用于 Web Sockets，因此通过 Web Sockets 可以打开到任何站点的连接，至于是否会与某个域中的页面通信，则完全取决于服务器。

暂时就这些了，以后遇到再补~

参考资料