使用 COOP 和 COEP 将网站设置为“跨源隔离”

您可以使用 COOP 和 COEP 设置跨源隔离环境，并启用 SharedArrayBuffer、performance.measureUserAgentSpecificMemory() 等强大功能以及精确度更高的高分辨率计时器。

Eiji Kitamura

注意 ：从 Chrome 92 开始，Chrome 桌面版的 SharedArrayBuffer 要求启用跨域隔离。如需了解详情，请参阅 Android Chrome 88 和桌面版 Chrome 92 中的 SharedArrayBuffer 更新。

更新

• 2022 年 6 月 21 日：在进行跨域隔离时，工作器脚本也需要小心谨慎 已启用。添加了一些说明。
• 2021 年 8 月 5 日：JS Self-Profiling API 被提及为 要求进行跨域隔离，但这反映了近期 方向， 就会被移除
• 2021 年 5 月 6 日：根据反馈和报告的问题，我们决定做出调整 SharedArrayBuffer 在非跨域隔离网站中的使用时间轴 在 Chrome M92 中受限
• 2021 年 4 月 16 日：添加了有关新的 COEP 无凭据的新增功能的说明 模式和 COOP same-origin-allow-popups 条件 隔离。
• 2021 年 3 月 5 日：移除了对 SharedArrayBuffer、 performance.measureUserAgentSpecificMemory()和调试功能， 这些功能现已在 Chrome 89 中完全启用。添加了即将推出的功能 performance.now() 和 performance.timeOrigin，其优先级更高 精确率。
• 2021 年 2 月 19 日：添加了关于功能政策的说明 allow="cross-origin-isolated" 和开发者工具上的调试功能。
• 2020 年 10 月 15 日：Chrome 87 及更高版本提供 self.crossOriginIsolated。 这表示，在以下情况下，document.domain 是不可变的： self.crossOriginIsolated 会返回 true。 performance.measureUserAgentSpecificMemory()即将结束源试用，并且 在 Chrome 89 中默认处于启用状态。Android Chrome 上的共享数组缓冲区 Chrome 88 及更高版本均提供此功能。

某些 Web API 会增加发生边信道攻击（例如 Spectre）的风险。接收者 为降低这种风险，浏览器提供了一个基于选择启用的隔离环境， 进行跨域隔离采用跨源隔离状态时，网页将 能够使用如下特权功能：

。

将在跨域隔离之后提供的功能 状态。

API	说明
SharedArrayBuffer	对于 WebAssembly 线程，此为必填项。你可以在 Android 设备上使用 Chrome 88。桌面版目前默认处于启用状态 <ph type="x-smartling-placeholder"></ph> 的帮助 网站隔离，但需要启用跨源隔离状态 和 在 Chrome 92 中默认处于停用状态。
performance.measureUserAgentSpecificMemory()	Chrome 89 及更高版本提供此功能。
<ph type="x-smartling-placeholder"></ph> performance.now()、performance.timeOrigin	目前适用于许多浏览器，其分辨率限制为 不小于 100 微秒。启用跨域隔离功能后 分辨率可以是 5 微秒或更高。

跨域隔离状态还会阻止修改 document.domain。（更改document.domain可让通信 因此被认为是 同源政策。）

如需选择启用跨源隔离状态，您需要发送以下内容 主文档上的 HTTP 标头：

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

这些标头指示浏览器阻止加载资源或 iframe 未选择由跨源文档加载的垃圾内容，并防止 与文档直接交互，从而实现跨域窗口。这也 意味着要跨域加载的资源需要选择启用。

您可以通过以下方式确定网页是否处于跨源隔离状态 正在检查 self.crossOriginIsolated。

本文介绍了如何使用这些新标头。在跟进 文章我会提供更多背景信息。

注意 ：本文面向的是想要让网站做好准备，以便能够在各种浏览器平台上以更可靠的方式使用 SharedArrayBuffer、WebAssembly 线程、performance.measureUserAgentSpecificMemory() 或高分辨率计时器（具有更高的精度）。

。

关键术语 ：本文使用了许多发音相似的术语。为了清楚起见，我们先来定义它们：* COEP：跨源嵌入器政策 * COOP：跨源打开器政策 * CORP：跨源资源政策 * CORS：跨源资源共享 * CORB：跨源读取屏蔽

部署 COOP 和 COEP 以将您的网站进行跨源隔离

注意 ：如需了解启用跨域隔离的实用步骤，请参阅启用跨域隔离的指南。

集成 COOP 和 COEP

1. 在顶级文档上设置 Cross-Origin-Opener-Policy: same-origin 标头

对顶级文档启用 COOP: same-origin 后，具有相同名称的窗口 以及从文档打开的窗口 上下文组，除非它们位于同一源，且 COOP 设置相同。 因此，对打开的窗口和 系统会停用这两个窗口

注意 ：这会破坏需要跨源窗口交互的集成，例如 OAuth 和付款。为了缓解此问题，我们正在探索放宽条件，以实现对 Cross-Origin-Opener-Policy: same-origin-allow-popups 的跨域隔离。这样就可以与单独打开的窗口进行通信。如果您想启用跨域隔离，但被此问题阻止，我们建议您注册源试用，并等到新的条件可用时再进行。在此问题安全得到解决之前，我们不打算终止源试用。

浏览上下文组是一组可相互引用的窗口。对于 顶级文档及其通过 <iframe> 嵌入的子文档。 如果网站 (https://a.example) 打开弹出式窗口 (https://b.example)， 打开器窗口和弹出式窗口共享相同的浏览上下文， 它们可以通过 window.opener 等 DOM API 互相访问。

您可以查看窗口打开程序和其打开者是否处于单独的浏览模式 上下文组。

试试看： 查看不同 COOP 参数的影响。

2. 确保资源已启用 CORP 或 CORS

确保网页中的所有资源均通过 CORP 或 CORS HTTP 加载 标头。对于第 4 步（启用 COEP），必须执行此步骤。

根据资源的性质，您需要执行以下操作：

• 如果预计仅从同一来源加载资源，请将 Cross-Origin-Resource-Policy: same-origin 标头。
• 如果资源的预期仅从同一网站加载， 来源，请设置 Cross-Origin-Resource-Policy: same-site 标头。
• 如果资源是从您控制的跨源加载的，请将 Cross-Origin-Resource-Policy: cross-origin 标头（如果可能）。
• 对于您无法控制的跨源资源： <ph type="x-smartling-placeholder">
  </ph>
  • 如果资源已加载，请在加载 HTML 标记中使用 crossorigin 属性 通过 CORS 传送的信息。（例如 <img src="***" crossorigin>。）
  • 让资源所有者支持 CORS 或 CORP。
• 对于 iframe，请遵循上述原则，并将 Cross-Origin-Resource-Policy: cross-origin（或 same-site，same-origin） 视具体情况而定）。
• 使用 WebWorker 加载的脚本必须从同一来源提供， 因此您不需要 CORP 或 CORS 标头。
• 对于使用 COEP: require-corp 提供的文档或 Worker，跨源 未使用 CORS 加载的子资源必须设置 Cross-Origin-Resource-Policy: cross-origin 标头，才能选择嵌入。例如，这适用于 <script>、importScripts、<link>、<video>、<iframe> 等

。

您可以将 allow="cross-origin-isolated" 权限政策应用于 <iframe> 代码并满足本文档中所述的相同条件，从而对嵌入在 iframe 中的文档启用跨域隔离。请注意，包括父框架和子框架在内的整个文档链也必须进行跨源隔离。

。

关键术语 ：您有必要了解“同网站”之间的区别和“same-origin”如需了解不同之处，请参阅了解同网站和同源。

3. 使用 COEP 仅用于报告的 HTTP 标头评估嵌入式资源

在完全启用 COEP 之前，您可以使用 Cross-Origin-Embedder-Policy-Report-Only 标头，以检查政策是否 效果。您能够在不屏蔽嵌入内容的情况下收到报告。

以递归方式将此参数应用于所有文档，包括顶级文档， iframe 和工作器脚本有关仅用于报告的 HTTP 标头的信息，请参阅 使用报告观察问题 API。

4. 启用 COEP

在您确认一切正常，并且所有资源都可以 已成功加载，请切换Cross-Origin-Embedder-Policy-Report-Only 标头映射到 Cross-Origin-Embedder-Policy 标头，而所有标头具有相同的值 包括通过 iframe 和工作器脚本嵌入的文档。

试试看： 了解不同 COEP / CORP 参数的影响。

。

注意 ：Squoosh（一款图片优化 PWA）现在使用 COOP / COEP 在 Android Chrome 上访问 Wasm Threads（和 Shared Array Buffer）。

。

注意 ：我们一直在探索如何大规模部署 Cross-Origin-Resource-Policy，因为跨域隔离需要所有子资源明确选择启用。我们已经提出了相反的想法：全新的 COEP“无凭据”模式，允许通过剥离资源的所有凭据来加载不带 CORP 标头的资源。我们希望这能减轻您确保子资源发送 Cross-Origin-Resource-Policy 标头的负担。不过，由于 Chrome 96 及更高版本支持 credentialless 模式，但任何其他浏览器尚不支持该模式，因此一些开发者可能会发现部署 COOP 或 COEP 的难度。如果您还不想启用跨域隔离，我们建议您注册源试用，并等到 credentialless 在更多浏览器中推出时再进行。

使用 self.crossOriginIsolated 确定隔离是否成功

当网页处于self.crossOriginIsolatedtrue 启用跨域隔离状态，并且所有资源和窗口 同一浏览上下文组。您可以使用此 API 来确定 已成功隔离浏览上下文组，并获得访问 如 performance.measureUserAgentSpecificMemory() 等强大功能。

使用 Chrome 开发者工具调试问题

对于在屏幕上渲染的资源（例如图片）， 以检测 COEP 问题，因为请求将被阻止，并且网页 表示缺少图像。但是，对于 例如脚本或样式，那么 COEP 问题 被忽视。对于此类问题，请使用开发者工具的 Network 面板。如果 COEP 存在问题，您应会看到 (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)（处于状态） 列。

然后，您可以点击该条目查看更多详情。

您还可以通过 Application 面板。前往“帧”部分 展开“顶部”查看资源结构的明细

<ph type="x-smartling-placeholder"></ph> 您可以查看 iframe 的状态，例如 SharedArrayBuffer 的可用性、 等等

<ph type="x-smartling-placeholder"></ph> 您还可以查看弹出式窗口的状态，例如是否是跨源窗口 隔离。

使用 Reporting API 观察问题

Reporting API是另一种供您 检测各种问题。您可以配置 Reporting API 来指示 用户的浏览器，以便在 COEP 阻止资源加载时发送报告 或 COOP 隔离弹出式窗口。Chrome 对 Reporting API 的支持从 69 版可用于多种用途，包括 COEP 和 COOP。

注意 ：您是否已在使用包含 Report-To 标头的 Reporting API？Chrome 正在改用新版本的 Reporting API，新版本会将 Report-To 替换为 Reporting-Endpoints；请考虑迁移到新版本请查看迁移到 Reporting API v1 了解详情。

了解如何配置 Reporting API 并设置用于接收 请参阅使用“报告” API。

COEP 报告示例

示例 COEP 报告 跨源资源被屏蔽时的载荷如下所示：

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

注意 ：blocked-url 仅用于向后兼容，并且最终将被移除。

COOP 报告示例

示例 COOP report [报告] 载荷 单独打开弹出式窗口时，显示如下：

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

当不同的浏览上下文组尝试互相访问时（仅在 “report-only”模式），COOP 也会发送报告。例如，当某个报告 postMessage() 将如下所示：

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

总结

组合使用 COOP 和 COEP HTTP 标头将网页设置为 跨域隔离状态您将能够查看 self.crossOriginIsolated，用于确定某个网页是否为跨源网页 隔离状态

当此扩展程序推出新功能时，我们会及时更新此帖 跨域隔离状态，并且对开发者工具进行了进一步改进 。

资源

• 为什么需要“跨源隔离”实现强大功能
• 启用跨域隔离的指南
• Android Chrome 88 和桌面版 Chrome 中的 SharedArrayBuffer 更新 92 个
• 使用 Google Analytics 4 媒体资源 measureUserAgentSpecificMemory()