关于浏览器同源策略

文章最后更新时间为：2018年08月14日 10:54:52

游览器作为网页的入口，是我们直接与服务器进行交互的地方，听说过的浏览器安全事件也不在少数，因此浏览器安全也是浏览器竞争市场的重要因素。

1. 同源策略定义

同源策略是浏览器最可信也最基础的安全功能，可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。浏览器的同源策略限制了来自不同源的document或者脚本对当前的document读取或设置某些属性。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

那么我们首先需要知道什么叫做同源。

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

可见影响到是否同源的因素有host（域名或ip，如果是ip则看作一个根域名）、子域名、端口、协议。

示例：

更多参见URI的同源策略

当涉及到同源策略时，IE有两个主要的不同点:

• 授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），不遵守同源策略的限制。
• 端口：IE 未将端口号加入到同源策略的组成部分之中，因此 http://company.com:81/index.html 和http://company.com/index.html 属于同源并且不受任何限制。

2. 为什么需要同源策略

了解这个问题首先需要了解同源策略限制了什么？

• 跨源网络访问：AJAX请求。
• 跨源 DOM 访问：DOM。
• 跨源脚本API访问：Javascript的APIs，如 iframe.contentWindow, window.parent, window.open 和 window.opener 。
• 跨源数据存储访问：Cookie、LocalStorage 和 IndexDB。

在浏览器中，对于标签 < script >、< img >、< iframe >、< link >等标签都可以跨域加载资源，而不受同源策略的限制。这些带有“src”属性的标签每次加载的时候，实际上是由浏览器发起一个get请求。

不同于XMLHttpRequest的是，通过src属性加载的资源，浏览器是限制了javascript的权限，使其不能够读写返回的内容。对于XMLHttpRequest来说，它可以访问来自同源对象的内容。但是不能够访问跨域访问资源。

如果没有同源策略，不同源的数据和资源（如HTTP头、Cookie、DOM、localStorage等）就能相互随意访问，根本没有隐私和安全可言。今天你在网上同时打开了淘宝和黄网两个页面，阿里就知道你看了成人内容，明天可能就给你推荐充气娃娃了。其他人更有可能盗窃了你的黄网cookie，那么你充值的黄网vip别人就可以用了！

以上可看出如果XMLHttpRequest能够跨域访问资源，则可能导致一些敏感数据泄露，比如CSRF的token，从而导致发生安全问题

但是互联网是开放的，随着业务的发展，跨域请求在很多场合都是需要的，因此W3C委员会制定了XMLHttpRequest跨域访问标准。它需要通过目标域返回的HTTP头来授权是否进行跨域访问，因为HTTP头对于Js来说一般是无法控制的，所以认为这个方案可以实施。注意：这个跨域访问的方案的安全基础是信任“js无法控制HTTP头”，如果此信任基础被打破，则此方案也不再安全。

参考资料

1.白帽子讲web安全
2.浏览器的同源策略
3.浏览器同源策略，跨域（跨源)