一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。
前情提要
问题：浏览器为什么要有同源策略？
答：保障用户的基本上网安全。
问题：既然有了同源策略是不是百分百安全了？
答：不是。
什么是同源策略
- 同源策略是浏览器最基本的也是最核心的安全功能
- 同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互
- 同源策略是浏览器的行为，拦截的是客户端发出去的请求成功后返回的数据。也就是说纵使你发送请求成功了，服务端也响应了，但是浏览器拒绝接受该数据。
什么是同源
一般我们输入浏览器的的网址包含：协议，域名，端口号 + 具体的目标文件的路径
- 所以同源指的是
协议相同，域名相同，端口号相同。 - 其中http协议默认的是80端口。https协议默认的是443端口。有的网址可能没有写端口，那就是使用了默认的端口。
- 比如：对比网址：juejin.cn | URL | 是否同源 | 原因 | | --- | --- | --- | | juejin.cn/user/298153… | 否 | 协议不同，端口不同 | | juejin.cn:90/user/298153… 否 | 端口号不同 | | test.juejin.cn/user/298153… | 否 | 域名不同 | | juejin.cn/post/708414… | 是 |
细分同源策略
- DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制相互访问的。
- XMLHttpRequest同源策略：限制使用XHR对象向不同源的服务器地址发起HTTP请求。
如果没有同源策略会是怎样的？
- DOM没有同源策略的情况：如果你经过黑客的误导进入了表象是某银行的网站，而实际上是黑客写了一个假网站，而看到的银行网站页面是通过iframe内嵌进来的。那么此时如果你在里面输入账号密码，主网站就可以通过跨域访问到银行网站的dom节点，以至于拿到用户输入的关键机密信息。
- XMLHttpRequest没有同源策略,经典的攻击方式就是：CSRF(跨站请求伪造)攻击：用户登录某网站，然后登录成功后网站向用户的cookie中添加用户标识。之后用户登录恶意网址，某些操作执行了某些恶意Ajax请求：向上面的网站发起请求，请求再把对应的cookie发送过去。之后某网站提取用户标识，标识无误，返回数据。好家伙，此时，该用户的账号就不再只属于该用户的了，也属于全世界懂web攻击的人的。重点是ajax请求是后台运行的，用户毫无感知。
- 还有很多种情况，太多了。所以同源策略让我们可以更加安全的上网。但也仅限于更加安全，而不是百分百安全。这就需要讲到web安全，web攻防。
