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

我不是女神ヾ 2023-03-06 03:39 9阅读 0赞

## Web 资源 ##

![format_png][]

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

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

![format_png 1][]

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

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

*  嵌入跨域 `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` 漏洞出现。

![format_png 2][]

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

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

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

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

## 跨域隔离 ##

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

![format_png 3][]

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

*  `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 Header` 是 `Cross-Origin-Opener-Policy`。

![format_png 4][]

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

![format_png 5][]

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

除了 `same-origin` 、 `COOP` 还有另外两个不同的值：

Cross-Origin-Opener-Policy: same-origin-allow-popups

![format_png 6][]

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

Cross-Origin-Opener-Policy: unsafe-none

![format_png 7][]

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

## CORP、CORS ##

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

![format_png 8][]

`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` 的资源可以由任何网站加载。

![format_png 9][]

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

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

## COEP：Cross Origin Embedder Policy ##

COOP：跨源嵌入程序政策，对应的 `HTTP Header` 是 `Cross-Origin-Embedder -Policy`。

![format_png 10][]

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

![format_png 11][]

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

![format_png 12][]

在完全启用 `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/

点赞，在看，转发 支持作者 ❤️

[format_png]: /images/20230208/6bdb7f24377e4735a6bd9a9e23f4fd07.png
[format_png 1]: /images/20230208/f33ff5dcf71547d595d23a0ff8248be6.png
[format_png 2]: /images/20230208/faa1f3e0f77148a4b58ca7a0da67efbf.png
[format_png 3]: /images/20230208/114cd50092434015b02bd741b7e0803d.png
[format_png 4]: /images/20230208/8cae4785796a436eabfe01a3f263fe44.png
[format_png 5]: /images/20230208/06c49a770e3d452fa3d1500d33c62709.png
[format_png 6]: /images/20230208/cebebab2850f4af5a3317bcd2fa8f034.png
[format_png 7]: /images/20230208/6edef9099afd44cba19042c61fc402a3.png
[format_png 8]: /images/20230208/cfd8f4c23a544394b69393091a540f60.png
[format_png 9]: /images/20230208/1fc908066d374c1aa0f478d696f47105.png
[format_png 10]: /images/20230208/b067fb449a054461974ad6eedd006e69.png
[format_png 11]: /images/20230208/2ec67284ab574cc6ad428096378ded83.png
[format_png 12]: /images/20230208/01fccafa1da749228deae27c67614d92.png