以同源策略为引子

提示：本文仅做为我的平时记录总结使用，笔法粗糙，逻辑思路还不是很清晰，如能帮到您是荣幸之至；如能指正其中错误和不合理，则万分感谢！

同源策略：同源策略限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。老生常谈了，所谓同源就是origin、protocol、port都相同，是web安全的基础。本文主要记录以前不注意的点。

分类

我理解分为DOM同源策略和存储同源策略

DOM同源策略

分为三类

1. 容许跨域写操做。如连接、重定向、提交订单（非ajax）
2. 容许跨域资源嵌入。如script、img、video、css样式表引入、iframe等等。
3. 不容许跨域读操做。如ajax或者Fetch api。

或者能够总结说是：

同源策略容许HTML tag产生的跨域读取、写入、嵌入；可是不支持JavaScript脚本中产生的跨域读取、写入或嵌入

咱们平时说到的跨域问题大可能是指在第三种。说下跨域的解决方案

ajax跨域解决方案

1. jsonp（古老）。利用同源策略支持跨域嵌入的特性（question为啥不用img），如今脚本中定义callback而后在远程服务端返回callback(数据）;
2. CORS（最经常使用）.跨域资源共享属于官方提供的用来跨域的方法，详见下次CORS。
3. node中转。将外域接口在node层作中转。
4. Nginx反向代理。理解不深 TODO

存储同源策略

存储包括localstorage（or sessionStorage）、indexDB、cookie等。其中localstorage和indexDB都严格执行同源策略，非同源不能读写。但cookie有不一样的策略。

对于cookie是子域名 读写 父域名下的cookie的，可是父域名不能读子域名cookie，子域名之间也不能相互读取cookie。

后续

这样看来其实同源策略对于并非对全部请求都有作限制，主要仍是限制在XMLHttpRequest、Fetch Api以及web字体的引用（是的你没看错，@font-face使用字体时要考虑跨域问题)、canvas中drawImage还有WebGL贴图上。其余的都没什么限制，可是当获取的脚本或者其余资源是恶意的也是会带来很大问题的，好比script脚本引入了一个未知域名下的恶意脚本，可是同源策略对script资源的请求时不限制的，因此恶意脚本能够轻松加载，通常这种状况涉及到web安全问题了（XSS、CSRF等），针对这种状况的对策是CSP即内容安全策略，相似一种加白名单的形式来完成这些事。

TODO

1. CORS详细
2. Nginx反向代理实现跨域
3. csp内容安全策略
4. 安全（XSS、CSRF)

参考文献

同源政策-一切安全的基础

mdn w3