浏览器的同源策略

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标签的relnoopener,在高版本的Chrome,通过a标签跳转的页面,获取到opener的值为null。但如果使用window.open进行同源跳转,一样可以进行操作。
notion image

数据层面

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

网络层面

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

安全性与便利性的取舍

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

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

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

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

© kaba 2019 - 2022