以同源策略为引子

525 阅读3分钟

提示:本文仅作为个人平时记录总结使用,笔法粗糙,逻辑思路还不是很清晰,如能帮到您是荣幸之至;如能指正其中错误和不合理,则万分感谢!

同源策略:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。老生常谈了,所谓同源就是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