前端网络安全必修 1 同源策略和CSRF

本文主要涉及三个关键词：

• 同源策略（Same-origin policy，简称 SOP）
• 跨站请求伪造（Cross-site request forgery，简称 CSRF）
• 跨域资源共享（Cross-Origin Resource Sharing，简称 CORS）

同源策略 SOP

同源

先解释何为同源：协议、域名、端口都一样，就是同源。

url	同源
niconico.com	基准
niconico.com/spirit	o
sub.niconico.com/spirit	x
niconico.com/spirit	x
niconico.com:8080/spirit	x

限制

你之所以会遇到 跨域问题，正是因为 SOP 的各种限制。但是具体来说限制了什么呢？

如果你说 SOP 就是“限制非同源资源的获取”，这不对，最简单的例子是引用图片、css、js 文件等资源的时候就允许跨域。

如果你说 SOP 就是“禁止跨域请求”，这也不对，本质上 SOP 并不是禁止跨域请求，而是在请求后拦截了请求的回应。这就就会引起后面说到的 CSRF

其实 SOP 不是单一的定义，而是在不同情况下有不同的解释：

• 限制 cookies、DOM 和 Javascript 的命名区域
• 限制 iframe、图片等各种资源的内容操作
• 限制 ajax 请求，准确来说是限制操作 ajax 响应结果，本质上跟上一条是一样的

下面是 3 个在实际应用中会遇到的例子：

• 使用 ajax 请求其他跨域 API，最常见的情况，前端新手噩梦
• iframe 与父页面交流，出现率比较低，而且解决方法也好懂
• 对跨域图片（例如来源于 <img> ）进行操作，在 canvas 操作图片的时候会遇到这个问题

如果没有了 SOP：

• 一个浏览器打开几个 tab，数据就泄露了
• 你用 iframe 打开一个银行网站，你可以肆意读取网站的内容，就能获取用户输入的内容
• 更加肆意地进行 CSRF

绕过跨域

SOP 带来安全，同时也会带来一定程度的麻烦，因为有时候就是有跨域的需求。绕过跨域的方案由于篇幅所限，并且网上也很多相关文章，所以不在这里展开解决跨域的方案，只给出几个关键词：

对于 ajax

• 使用 JSONP
• 后端进行 CORS 配置
• 后端反向代理

对于 iframe

• 使用 location.hash 或 window