同源策略形象解读

定义

同源

两个URL的协议、域名、端口都相同，就是同源URL

同源策略

一个重要的浏览器安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。

目的

为了保证用户信息的安全，防止恶意的网站窃取数据、

具体表现形式

DOM层面

同源策略限制了来自不同源的JavaScript脚本对当前DOM对象的读和写操作

数据层面

同源策略限制了来自不同源的站点读取当前站点的Cookie、IndexDB、LocalStorage等数据

网络层面

同源策略限制了通过XMLHttpRequest等方式将站点的数据发送给不同源的站点

若没有同源策略的后果

DOM层面

1. 黑客发给你一个钓鱼网站，里面内嵌了QQ官网的<iframe>，并把长宽都拉满了。也就是说这个网站除了域名和QQ官网一模一样
2. 你看了看傻乎乎的点了进去，输入用户名和密码
3. 由于主网站的js可以直接访问<iframe>里另一个源的DOM节点，也就是说QQ官网的表单能被js获取
4. js拿到你的表单数据（账号密码），发送到后台
5. 你号没了

数据层面

1. 你找回密码后，黑客又发你一个钓鱼网站，里面又内嵌了QQ的官网的<iframe>，同样除了域名一模一样
2. 你打开这个页面，由于你之前在浏览器登陆过QQ，cookie还保存着，不用输密码就能登录
3. 你暗自得意自己没有输密码，很安全
4. js获取<iframe>里的不同源的cookie，发送到后台
5. 你号又没了

网络层面

1. 你再次找回密码，黑客三顾茅庐又发来一个钓鱼网站。
2. 黑客发誓没有QQ官网，只是个自己搭建的博客
3. 善良的你又打开了，确实是个普通博客，还以为黑客改邪归正
4. js发送Ajax请求到不同源的QQ官网，请求会默认把本地cookie带上可以成功登录，返回的响应数据发送回后台
5. 你号还是没了