浏览器的同源策略
同源策略
同源策略是一个重要的安全策略，它用于限制同一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互，它能帮助阻隔恶意文档，减少可能被攻击的媒介
Origin 源
源的组合
- 协议（http、https）
- 域（myapp.com、localhost、localhost.tiangolo.com）
- 端口（80、443、8080）
https://www.cnblogs.com
不同的源的写法
- http://localhost
- https://localhost
- http://localhost:8080
即使它们都是 localhost，但它们使用不同的协议或端口，因此它们是不同的 Origin 源
再来一个栗子
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例
| URL | 结果 | 原因 |
|---|---|---|
http://store.company.com/dir2/other.html |
同源 | 只有路径不同 |
http://store.company.com/dir/inner/another.html |
同源 | 只有路径不同 |
https://store.company.com/secure.html |
失败 | 协议不同 |
http://store.company.com:81/dir/etc.html |
失败 | 端口不同 ( http:// 默认端口是80) |
http://news.company.com/dir/other.html |
失败 | 主机不同 |
重点
http://127.0.0.1:8080 和 http://localhost:8080 是不同源的哦！！虽然 localhost 就是 127.0.0.1
源的修改
- 满足某些限制条件的情况下，页面是可以修改它的源
- 可以通过 document.domain 的值设置为其当前域或其当前域的父域
- 如果将其设置为其当前域的父域，则父域将用于后续同源检查
比如我的博客地址 https://www.cnblogs.com/poloyy/
在 F12 Console 中敲
document.domain
会得到
'www.cnblogs.com'
改变源
document.domain = "cnblogs.com"
改成当前域的父域
这个页面将会成功通过与 http://cnblogs.com/dir/page.html 的同源检查
但是不能将 cnblogs.com 改成 cnblogscool.com ，因为它不是 cnblogs.com 的父域
两种同源策略
- DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的
- XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求
为什么要有同源策略（跨域限制）
如果没有 DOM 同源策略
不同域的 iframe 之间可以相互访问，那么黑客可以这样进行攻击：
-
做一个假网站，里面用 iframe 嵌套一个银行网站 http://mybank.com
-
把 iframe 覆盖到整个页面，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
-
这时如果用户输入账号密码，我们的主网站可以跨域访问到 http://mybank.com 的 dom 节点，就可以拿到用户的账户密码了
如果没有 XMLHttpRequest 同源策略
那么黑客可以进行 CSRF（跨站请求伪造） 攻击：
-
用户登录了自己的银行页面 http://mybank.com，http://mybank.com 向用户的 cookie 中添加用户标识
-
用户浏览了恶意页面 http://evil.com，执行了页面中的恶意 AJAX 请求代码
-
http://evil.com 向 http://mybank.com 发起 AJAX HTTP 请求，请求会默认把 http://mybank.com 对应 cookie 也同时发送过去
-
银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据，此时数据就泄露了
-
而且由于 Ajax 在后台执行，用户无法感知这一过程
总结
- 同源策略确实能规避一些危险，不是说有了同源策略就安全，只是说同源策略是一种浏览器最基本的安全机制
- 能提高一点攻击的成本
