浏览器的同源策略

同源策略

同源策略是一个重要的安全策略，它用于限制同一个 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 的父域

两种同源策略

1. DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的
2. XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求

为什么要有同源策略（跨域限制）

如果没有 DOM 同源策略

不同域的 iframe 之间可以相互访问，那么黑客可以这样进行攻击：

1. 做一个假网站，里面用 iframe 嵌套一个银行网站 http://mybank.com

2. 把 iframe 覆盖到整个页面，这样用户进来除了域名，别的部分和银行的网站没有任何差别。

3. 这时如果用户输入账号密码，我们的主网站可以跨域访问到 http://mybank.com 的 dom 节点，就可以拿到用户的账户密码了

如果没有 XMLHttpRequest 同源策略

那么黑客可以进行 CSRF（跨站请求伪造） 攻击：

1. 用户登录了自己的银行页面 http://mybank.com，http://mybank.com 向用户的 cookie 中添加用户标识

2. 用户浏览了恶意页面 http://evil.com，执行了页面中的恶意 AJAX 请求代码

3. http://evil.com 向 http://mybank.com 发起 AJAX HTTP 请求，请求会默认把 http://mybank.com 对应 cookie 也同时发送过去

4. 银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据，此时数据就泄露了

5. 而且由于 Ajax 在后台执行，用户无法感知这一过程

总结

• 同源策略确实能规避一些危险，不是说有了同源策略就安全，只是说同源策略是一种浏览器最基本的安全机制
• 能提高一点攻击的成本

CORS

https://i.cnblogs.com/posts/edit-done;postId=15345871