JS `Cross-Origin-Opener-Policy (COOP)` 与 `Cross-Origin-Embedder-Policy (COEP)` 隔离页面内存

同学们，早上好！今天咱们来聊聊一对好基友，不对，是好搭档：Cross-Origin-Opener-Policy (COOP) 和 Cross-Origin-Embedder-Policy (COEP)。这俩家伙听起来像是某种神秘组织的名字，但实际上，它们是浏览器安全领域的两员大将，专门负责隔离你的页面内存，防止一些不怀好意的家伙来偷窥你的隐私。

第一幕：什么是内存隔离？

想象一下，你的浏览器就是一个大房子，里面住着很多个“房间”，每个房间就是一个网页。默认情况下，这些房间之间是可以互相串门的，也就是说，一个网页可以访问另一个网页的一些信息。这听起来挺方便的，但问题来了，如果其中一个房间里住着一个坏人（恶意网页），它就可以通过串门来偷看其他房间的隐私，比如你的银行账号、信用卡信息等等。

内存隔离就像是在这些房间之间加了一道防火墙，让它们无法随意串门，从而保护你的隐私。 COOP 和 COEP 就是用来构建这道防火墙的关键技术。

第二幕：COOP – 阻断窗口间的联系

COOP 的全称是 Cross-Origin-Opener-Policy，它的主要作用是控制当前页面是否能与另一个页面共享浏览上下文组(browsing context group)。简单来说，就是控制当前页面是否可以访问打开它的页面，以及当前页面打开的页面是否可以访问它。

为什么要阻断联系？

默认情况下，如果 A 页面通过 window.open() 打开了 B 页面，那么 A 页面可以通过 window.opener 访问 B 页面的一些信息，反之亦然。这种相互访问的能力被称为 "opener access"。但是，如果 A 页面是一个恶意页面，它就可以利用 opener access 来控制 B 页面，比如修改 B 页面的内容、重定向 B 页面到钓鱼网站等等。 COOP 就是为了解决这个问题而生的。
COOP 的取值

COOP 有三个主要的取值：
- unsafe-none: 这是默认值，表示不进行任何隔离。页面可以与任何来源的页面进行交互，包括同源和跨域的页面。相当于房间之间的大门敞开，随便串门。
- same-origin: 表示只允许与同源的页面进行交互。如果 A 页面设置了 COOP: same-origin，那么只有与 A 页面同源的页面才能访问 A 页面，其他来源的页面都无法访问。相当于房间之间只允许住着同一家人的串门。
- same-origin-allow-popups: 这个值比较特殊，它允许从当前页面打开的弹出窗口 (popups) 访问当前页面，但阻止其他页面访问当前页面。也就是说，只允许自己的孩子来串门，其他人一概不许进。

如何设置 COOP？

可以通过 HTTP 响应头来设置 COOP：

Cross-Origin-Opener-Policy: same-origin

或者通过 HTML meta 标签来设置：

<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">

COOP 的效果

如果 A 页面设置了 COOP: same-origin，并且 B 页面尝试通过 window.opener 访问 A 页面，那么 window.opener 将会返回 null。这就阻止了 B 页面对 A 页面的控制。

COOP 的代码示例

假设我们有两个页面：index.html 和 popup.html。

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Index Page</title>
    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
</head>
<body>
    <h1>Index Page</h1>
    <button id="openPopup">Open Popup</button>
    <script>
        const openPopupButton = document.getElementById('openPopup');
        openPopupButton.addEventListener('click', () => {
            const popup = window.open('popup.html');
            // 尝试访问 popup.html 的 window.opener
            setTimeout(() => {
                try {
                    console.log('opener from index:', popup.opener); // 输出 null
                } catch (e) {
                    console.error('Error accessing opener:', e);
                }
            }, 1000);
        });
    </script>
</body>
</html>

popup.html:

<!DOCTYPE html>
<html>
<head>
    <title>Popup Page</title>
</head>
<body>
    <h1>Popup Page</h1>
    <script>
        // 尝试访问 opener (index.html)
        setTimeout(() => {
            try {
                console.log('opener from popup:', window.opener); // 输出 null
                // 尝试修改 opener 的 location
                // window.opener.location.href = 'https://www.example.com'; // 会报错
            } catch (e) {
                console.error('Error accessing opener:', e);
            }
        }, 1000);
    </script>
</body>
</html>

在这个例子中，index.html 设置了 COOP: same-origin。当 popup.html 尝试访问 index.html 的 window.opener 时，会发现它变成了 null。这就阻止了 popup.html 对 index.html 的控制。并且如果尝试修改 opener 的 location，会抛出一个错误，进一步阻止了恶意行为。

第三幕：COEP – 隔离跨域资源

COEP 的全称是 Cross-Origin-Embedder-Policy，它的作用是控制当前页面可以加载哪些跨域资源。简单来说，就是控制你的网页可以引用哪些外部的图片、脚本、样式表等等。

为什么要隔离跨域资源？

Spectre 和 Meltdown 这两个 CPU 漏洞的出现，让大家意识到，即使是只读的跨域资源，也可能被恶意网页利用来窃取敏感信息。这些漏洞允许恶意网页通过 side-channel attacks 来推断出其他网页的内存内容。 COEP 就是为了防御这些攻击而生的。
COEP 的取值

COEP 有两个主要的取值：
- unsafe-none: 这是默认值，表示不进行任何隔离。页面可以加载任何来源的资源，包括同源和跨域的资源。相当于房间里什么东西都可以随便放。
- require-corp: 表示只允许加载同源的资源，或者通过 CORS 明确授权的跨域资源。如果 A 页面设置了 COEP: require-corp，那么只有与 A 页面同源的资源，或者明确设置了 Access-Control-Allow-Origin 响应头的跨域资源才能被加载。相当于房间里只允许放自己家的东西，或者经过许可的邻居的东西。

如何设置 COEP？

可以通过 HTTP 响应头来设置 COEP：

Cross-Origin-Embedder-Policy: require-corp

或者通过 HTML meta 标签来设置：

<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">

COEP 的效果

如果 A 页面设置了 COEP: require-corp，并且 B 页面（跨域资源）没有设置 Access-Control-Allow-Origin 响应头，那么 B 页面将无法被 A 页面加载。浏览器会阻止加载，并在控制台中显示错误信息。
COEP 的代码示例

假设我们有两个页面：index.html 和 cross-origin.js (位于不同的域名下)。

index.html:
```
<!DOCTYPE html>
<html>
<head>
    <title>Index Page</title>
    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
</head>
<body>
    <h1>Index Page</h1>
    <script src="cross-origin.js"></script>
</body>
</html>
```
cross-origin.js (没有设置 CORS):
```
console.log('This is a cross-origin script.');
```
在这个例子中，index.html 设置了 COEP: require-corp。由于 cross-origin.js 没有设置 Access-Control-Allow-Origin 响应头，浏览器会阻止加载 cross-origin.js，并在控制台中显示错误信息。

如果我们要允许 index.html 加载 cross-origin.js，我们需要在 cross-origin.js 所在的服务器上设置 Access-Control-Allow-Origin 响应头：
```
Access-Control-Allow-Origin: *
```
或者
```
Access-Control-Allow-Origin: https://index.example.com // 替换为 index.html 所在的域名
```
设置了正确的 CORS 之后，index.html 就可以成功加载 cross-origin.js 了。
corp：Cross-Origin Resource Policy

和 COEP 经常一起出现的还有一个名为 corp 的 HTTP 响应头，全称是 Cross-Origin Resource Policy。它用来声明跨域资源（比如图片，脚本等）应该如何被其他域名的页面加载。corp 主要有以下几个取值：
- same-site：只允许同站点（scheme + domain）的页面加载该资源。
- same-origin：只允许同源的页面加载该资源。
- cross-origin：允许任何页面的加载该资源，但需要配置正确的 CORS 响应头。
corp 通常和 COEP: require-corp 结合使用，能够更细粒度的控制跨域资源的加载策略，增强安全性。例如，你的图片服务器只允许同站点使用图片资源，那么可以设置 corp: same-site，阻止其他站点盗链。

第四幕：COOP + COEP = 隔离的完整方案

COOP 和 COEP 可以一起使用，构建一个更完整的内存隔离方案。这种方案被称为 "Cross-Origin Isolation"。

如何实现 Cross-Origin Isolation？

要实现 Cross-Origin Isolation，需要同时满足以下两个条件：
1. 设置 COEP: require-corp。
2. 设置 COOP: same-origin。
一旦满足这两个条件，浏览器就会认为你的页面是 "Cross-Origin Isolated"，并启用一些额外的安全特性，比如：
- 可以安全地使用 SharedArrayBuffer。
- 可以安全地使用 performance.measureUserAgentSpecificMemory()。
- 可以使用更精确的计时器。
为什么要实现 Cross-Origin Isolation？
- 增强安全性： Cross-Origin Isolation 可以有效地防御 Spectre 和 Meltdown 等 CPU 漏洞，保护你的隐私。
- 启用新特性： 一些新的 Web API，比如 SharedArrayBuffer，只有在 Cross-Origin Isolated 的环境下才能使用。

Cross-Origin Isolation 的代码示例

<!DOCTYPE html>
<html>
<head>
    <title>Isolated Page</title>
    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
</head>
<body>
    <h1>Isolated Page</h1>
    <script>
        // 检查是否是 Cross-Origin Isolated
        if (crossOriginIsolated) {
            console.log('This page is Cross-Origin Isolated!');
            // 可以安全地使用 SharedArrayBuffer 等特性
        } else {
            console.warn('This page is NOT Cross-Origin Isolated!');
        }
    </script>
</body>
</html>

在这个例子中，我们同时设置了 COOP: same-origin 和 COEP: require-corp。浏览器会认为这个页面是 Cross-Origin Isolated，并启用相应的安全特性。

第五幕：遇到的坑以及如何填坑

COOP 和 COEP 确实能提高安全性，但配置起来也可能会遇到一些问题。

跨域资源加载失败： 这是最常见的问题。如果你的页面设置了 COEP: require-corp，但某些跨域资源没有设置正确的 CORS 响应头，就会导致加载失败。
- 解决方案： 确保所有跨域资源都设置了正确的 CORS 响应头。如果无法控制跨域资源的服务器，可以考虑使用代理服务器来添加 CORS 响应头。
页面无法与父页面通信： 如果你的页面设置了 COOP: same-origin，并且需要与父页面进行通信，可能会遇到问题。
- 解决方案： 可以考虑使用 postMessage API 来进行跨域通信。 postMessage 允许你在不同的页面之间安全地传递消息。
第三方库不兼容： 有些第三方库可能不兼容 Cross-Origin Isolation。
- 解决方案： 尝试升级第三方库到最新版本，或者寻找替代方案。

总结

COOP 和 COEP 是浏览器安全领域的重要技术，可以有效地隔离页面内存，防御各种攻击。虽然配置起来可能会有些麻烦，但为了你的隐私和安全，还是值得花一些时间去学习和掌握的。

最后，给大家留个思考题：

在什么情况下，你可能不需要使用 COOP 和 COEP？
如果你的网站依赖大量的第三方资源，如何平滑地迁移到 Cross-Origin Isolation？

希望今天的讲座对大家有所帮助！下课！

发表回复 取消回复

发表回复取消回复