阅读 3443

新的跨域策略:使用COOP、COEP为浏览器创建更安全的环境

Web 资源

可组合性是 Web 的非常强大的一项能力,你可以轻而易举的加载来自不同来源的资源来增强网页的功能,例如:font、image、video 等等。

这些服务非常强大,也很方便,但是这样的策略同样会加大信息泄漏的风险,攻击者可以利用某些手段泄漏你的用户信息。

浏览器在阻止这些攻击上做的也很好。同源策略我们已经很熟悉了,它用于限制不同源的站点的资源访问。详细可以戳浏览器的同源策略,这里不再过多介绍。

但是同源策略也有一些例外,任何网站都可以不受限制的加载下面的资源:

  • 嵌入跨域 iframe
  • image、script 等资源
  • 使用 DOM 打开跨域弹出窗口

对于这些资源,浏览器可以将各个站点的跨域资源分隔在不同的 Context Group 下,不同的 Context Group 下资源无法相互访问。

浏览器 Context Group 是一组共享相同上下文的 tab、window或iframe。例如,如果网站(https://a.example)打开弹出窗口(https://b.example),则打开器窗口和弹出窗口共享相同的浏览上下文,并且它们可以通过 DOM API相互访问,例如 window.opener

Spectre 漏洞

长久以来,这些安全策略一直保护着网站的隐私数据,直到 Spectre 漏洞出现。

Spectre 是一个在 CPU 中被发现的漏洞,利用 Spectre ,攻击者可以读取到在统一浏览器下任意 Context Group 下的资源。

特别是在使用一些需要和计算机硬件进行交互的 API 时:

  • SharedArrayBuffer (required for WebAssembly Threads)
  • performance.measureMemory()
  • JS Self-Profiling API

为此,浏览器一度禁用了 SharedArrayBuffer 等高风险的 API

跨域隔离

为了能够使用这些强大的功能,并且保证我们的网站资源更加安全,我们需要为浏览器创建一个跨域隔离环境。

下文会提到很多专有术语,我们先把所有跨域相关的名词列出来,以防后面搞混:

  • COEP: Cross Origin Embedder Policy:跨源嵌入程序策略
  • COOP: Cross Origin Opener Policy:跨源开放者政策
  • CORP: Cross Origin Resource Policy:跨源资源策略
  • CORS: Cross Origin Resource Sharing:跨源资源共享
  • CORB: Cross Origin Read Blocking:跨源读取阻止

我们可以通过 COOP、COEP 来创建隔离环境。

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
复制代码

下面我们来看一下,这两个 Hedaer 的意义,以及如何进行配置。

COOP:Cross Origin Resource Policy

COOP:跨源开放者政策,对应的 HTTP HeaderCross-Origin-Opener-Policy

通过将 COOP 设置为 Cross-Origin-Opener-Policy: same-origin,将把从该网站打开的其他不同源的窗口隔离在不同的浏览器 Context Group,这样就创建的资源的隔离环境。

例如,如果带有 COOP 的网站打开一个新的跨域弹出页面,则其 window.opener 属性将为 null

除了 same-originCOOP 还有另外两个不同的值:

Cross-Origin-Opener-Policy: same-origin-allow-popups
复制代码

带有 same-origin-allow-popups 的顶级页面会保留一些弹出窗口的引用,这些弹出窗口要么没有设置 COOP ,要么通过将 COOP 设置为 unsafe-none 来选择脱离隔离。

Cross-Origin-Opener-Policy: unsafe-none
复制代码

unsafe-none 是默认设置,允许当前页面和弹出页面共享 Context Group

CORP、CORS

要启用跨域隔离,你还首先需要明确所有跨域资源明确被允许加载。这有两种实现方式,一种是CORP,另一种是 CORS

CORS(跨域资源共享)在我么日常解决跨域问题时经常会使用,这个我们已经非常熟悉了,我们再来看看 CORP

Cross-Origin-Resource-Policy: same-site
复制代码

标记 same-site 的资源只能从同一站点加载。

Cross-Origin-Resource-Policy: same-origin
复制代码

标记 same-origin 的资源只能从相同的来源加载。

Cross-Origin-Resource-Policy: cross-origin
复制代码

标记 cross-origin 的资源可以由任何网站加载。

注意,如果是一些通用的 CDN 资源,例如 image、font、video、等,一定要设置成 cross-origin ,否则可能会导致资源无法被正常加载。

对于你无法控制的跨域资源,可以手动在 html 标签中添加 crossorigin 属性。

COEP:Cross Origin Embedder Policy

COOP:跨源嵌入程序政策,对应的 HTTP HeaderCross-Origin-Embedder -Policy

启用 Cross-Origin-Embedder-Policy: require-corp,你可以让你的站点仅加载明确标记为可共享的跨域资源,也就是我们上面刚刚提到的配置,或者是同域资源。

例如,上面的图片资源如果没有设置 Cross-Origin-Resource-Policy 将会被阻止加载。

在完全启用 COEP 之前,可以通过使用 Cross-Origin-Embedder-Policy-Report-Only 检查策略是否能够正常运行。如果有不符合规范的资源,将不会被禁止加载,而是上报到你的服务器日志中。

测试跨域隔离是否正常

当你的 COOP、COEP 都配置完成之后,现在你的站点应该处于跨域隔离状态了,你可以通过使用 self.crossOriginIsolated 来判断隔离状态是否正常。

if(self.crossOriginIsolated){
  // 跨域隔离成功
}
复制代码

好了,你现在可以愉快的使用 haredArrayBuffer, performance.measureMemory 或者 JS Self-Profiling API 这些强大的 API 了~

参考

  • https://web.dev/why-coop-coep/
  • https://web.dev/coop-coep/

文中如有错误,欢迎在评论区指正,如果这篇文章帮助到了你,欢迎点赞和关注。

想阅读更多优质文章、可关注我的github博客,你的star✨、点赞和关注是我持续创作的动力!

推荐关注我的微信公众号【code秘密花园】,每天推送高质量文章,我们一起交流成长。