跨域隔离的启用指南

跨域隔离使网页能够使用例如 SharedArrayBuffer 等强大功能。本篇文章解释了如何在您的网站上启用跨域隔离。

— 更新日期
Available in: Deutsch、English、Español、Français、Português、Русский、日本語和한국어
Eiji Kitamura
Eiji Kitamura
TwitterGitHubHomepage
本页内容

本篇指南将向您展示跨域隔离的启用方式。如果您想使用SharedArrayBuffer、performance.measureUserAgentSpecificMemory()或 更精确的高精度计时器，就会需要跨域隔离。

如果您打算启用跨域隔离，请评估这对您网站上的其他跨域资源（例如广告展示位置）将产生的影响。

确定您网站中SharedArrayBuffer的使用位置

从 Chrome 92 开始，使用SharedArrayBuffer的功能在没有跨域隔离的情况下将停止工作。如果您是因为收到SharedArrayBuffer已弃用的消息而造访此页面，那么很可能是因为您的网站或其中嵌入的某项资源正在使用SharedArrayBuffer。为确保您的网站不会因弃用而中断，请首先确定SharedArrayBuffer的使用位置。

如果您不确定您网站中SharedArrayBuffer的使用位置，有两种方法可以找到：

  • 使用 Chrome 开发者工具
  • （进阶）使用弃用报告

如果您已经知道SharedArrayBuffer的使用位置，请跳至分析跨域隔离的影响。

使用 Chrome 开发者工具 #

Chrome 开发者工具允许开发者对网站进行检查。

  1. 在您怀疑可能正在使用SharedArrayBuffer的页面上打开 Chrome 开发者工具。
  2. 选择控制台面板。
  3. 如果该页面正在使用SharedArrayBuffer，则会显示以下消息：
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
  4. 消息末尾的文件名和行号（例如，common-bundle.js:535）表明SharedArrayBuffer的来源。如果来源是第三方库，请联系开发者解决问题。如果是作为您网站的一部分来执行的，请按照以下指南启用跨域隔离。
在没有跨域隔离的情况下使用 SharedArrayBuffer 时，开发者工具控制台发出警告
在没有跨域隔离的情况下使用 SharedArrayBuffer 时，开发者工具控制台发出警告。

（进阶）使用弃用报告 #

某些浏览器有向指定端点报告已弃用 API 的功能。

  1. 设置弃用报告服务器并获取报告 URL。您可以通过使用公共服务或自己进行搭建来实现这一目标。
  2. 使用 URL，对可能正在提供SharedArrayBuffer的页面设置以下 HTTP 标头。
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. 一旦标头开始传播，您注册的端点就应该能够开始收集弃用报告。

请在此处查看执行示例：https://cross-origin-isolation.glitch.me。

分析跨域隔离的影响 #

如果能在不进行任何破坏的情况下就可以评估启用跨域隔离对您的网站的影响，那该多好啊？Cross-Origin-Opener-Policy-Report-Only和Cross-Origin-Embedder-Policy-Report-Only HTTP 标头恰恰能帮助您实现这一愿望。

  1. 在您的顶级文档上设置Cross-Origin-Opener-Policy-Report-Only: same-origin。正如标头名称所示，该标头只发送有关COOP: same-origin将会对您网站产生的影响的报告，而不会实际弹出窗口来禁止通信。
  2. 设置报告内容并配置一个网络服务器来接收和保存报告。
  3. 在顶级文档上设置Cross-Origin-Embedder-Policy-Report-Only: require-corp。与之前一样，该标头能够让您看到启用COEP: require-corp后的影响，而不会实际影响您的网站功能。您可以配置该标头，将报告发送到您在上一步中设置的同一个报告服务器。

减轻跨域隔离的影响 #

在确定哪些资源将受到跨域隔离的影响后，以下是有关如何实际让这些跨域资源选择加入的一般准则：

  1. 在图像、脚本、样式表、iframe 等跨域资源上设置Cross-Origin-Resource-Policy: cross-origin标头。在同站资源上设置Cross-Origin-Resource-Policy: same-site标头。
  2. 如果资源是用 CORS（例如，<img src="example.jpg" crossorigin>）提供的，那么请在顶级文档的 HTML 标签中设置crossorigin。
  3. 如果加载到 iframe 中的跨域资源涉及另一层 iframe，则在进行下一步之前递归地运用本节中描述的步骤。
  4. 在您确认所有跨域资源都已选择加入后，请在加载到 iframe 中的跨域资源上设置Cross-Origin-Embedder-Policy: require-corp标头。
  5. 请确保没有需要通过postMessage()进行通信的跨域弹出窗口。这些弹出窗口无法在启用跨域隔离时继续运行。您可以将通信移动到另一个非跨域隔离文档中，或使用一种不同的通信方法（例如，HTTP 请求）。

启用跨域隔离 #

在减轻跨域隔离的影响后，以下是启用跨域隔离的一般准则：

  1. 在顶级文档上设置Cross-Origin-Opener-Policy: same-origin标头。如果您之前已经设置了Cross-Origin-Opener-Policy-Report-Only: same-origin，请将其替换。这会阻止顶级文档与其弹出窗口之间的通信。
  2. 在顶级文档上设置Cross-Origin-Embedder-Policy: require-corp标头。如果您之前已经设置了Cross-Origin-Embedder-Policy-Report-Only: require-corp，请将其替换。这会阻止未选择加入的跨域资源进行加载。
  3. 检查并确认self.crossOriginIsolated在控制台中返回true，从而验证您的页面已启用跨域隔离。

资源 #

Last updated: — Improve article
Return to all articles
分享