用户工具

站点工具


同源策略 SOP

同源

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

限制

你之所以会遇到 跨域问题,正是因为 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.name 进行信息交流
  • 使用 postMessage

来源:usubenifantasy 前端网络安全必修 1

/opt/bitnami/dokuwiki/data/pages/技术/sop.txt · 最后更改: 2019/12/25 07:39 由 superuser