浏览器的同源策略

date
May 23, 2022
slug
same-site
status
Published
tags
浏览器
summary
同源策略
type
Post

什么是同源

  • 协议相同
  • 域名相同
  • 端口相同
浏览器默认了同源的两个页面可以互相操作DOM、访问资源。

同源策略

体现在DOM、Web数据和网络三个层面

DOM层面

限制了来自不同源的JS脚本对当前DOM对象进行读写操作
  • 在同源情况下，可以通过opener对象来操作另一个打开的同源页面
opener.document.body.style.display = 'none';
对此，Chrome对安全策略进行了更新，默认a标签的rel为noopener，在高版本的Chrome，通过a标签跳转的页面，获取到opener的值为null。但如果使用window.open进行同源跳转，一样可以进行操作。
notion image

数据层面

限制了来自不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。由于同源策略，我们依然无法通过第二个页面的 opener 来访问第一个页面中的 Cookie、IndexDB 或者 LocalStorage 等内容。

网络层面

限制了通过XMLHttpRequest等方式将数据请求到不同源的站点。

安全性与便利性的取舍

页面中可以嵌入第三方资源和CSP

同源策略限制了页面中的所有资源（HTML、CSS、JS、媒体资源等）都需要来自同一个源，也就是所有资源都得部署在同一个服务器上，这带来了很多限制，也违背了Web的初衷。
最初浏览器都支持引入外部资源文件的，但这容易造成请求资源时被恶意劫持，如劫持HTML，往里插入script，这样当客户端收到文件，就无法分辨出该文件是恶意还是正常的。此外，也容易受到XSS攻击。
为了解决 XSS 攻击，浏览器中引入了内容安全策略，称为 CSP。CSP 的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码。通过这些手段就可以大大减少 XSS 攻击。

跨资源共享和跨文档消息机制

浏览器中默认无法请求非同源站点的资源，造成了极大的不便。为解决这个问题，浏览器引入了跨域资源共享（CORS），使用该机制可以进行跨域访问控制。
如果两个页面不是同源的，则无法相互操纵 DOM。不过在实际应用中，经常需要两个不同源的 DOM 之间进行通信，于是浏览器中又引入了跨文档消息机制，可以通过 window.postMessage 的 JavaScript 接口来和不同源的 DOM 进行通信。

© kaba 2019 - 2023