您可以使用 COOP 和 COEP 设置跨源隔离环境,并启用 SharedArrayBuffer
、performance.measureUserAgentSpecificMemory()
等强大功能以及精确度更高的高分辨率计时器。
更新
- 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
。
本文介绍了如何使用这些新标头。在跟进 文章我会提供更多背景信息。
。部署 COOP 和 COEP 以将您的网站进行跨源隔离
集成 COOP 和 COEP
1. 在顶级文档上设置 Cross-Origin-Opener-Policy: same-origin
标头
对顶级文档启用 COOP: same-origin
后,具有相同名称的窗口
以及从文档打开的窗口
上下文组,除非它们位于同一源,且 COOP 设置相同。
因此,对打开的窗口和
系统会停用这两个窗口
浏览上下文组是一组可相互引用的窗口。对于
顶级文档及其通过 <iframe>
嵌入的子文档。
如果网站 (https://a.example
) 打开弹出式窗口 (https://b.example
),
打开器窗口和弹出式窗口共享相同的浏览上下文,
它们可以通过 window.opener
等 DOM API 互相访问。
您可以查看窗口打开程序和其打开者是否处于单独的浏览模式 上下文组。
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。
- 如果资源已加载,请在加载 HTML 标记中使用
- 对于 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>
等
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 和工作器脚本嵌入的文档。
使用 self.crossOriginIsolated
确定隔离是否成功
当网页处于self.crossOriginIsolated
true
启用跨域隔离状态,并且所有资源和窗口
同一浏览上下文组。您可以使用此 API 来确定
已成功隔离浏览上下文组,并获得访问
如 performance.measureUserAgentSpecificMemory()
等强大功能。
使用 Chrome 开发者工具调试问题
对于在屏幕上渲染的资源(例如图片),
以检测 COEP 问题,因为请求将被阻止,并且网页
表示缺少图像。但是,对于
例如脚本或样式,那么 COEP 问题
被忽视。对于此类问题,请使用开发者工具的 Network 面板。如果
COEP 存在问题,您应会看到
(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)
(处于状态)
列。
![“网络”面板“状态”列中的 COEP 问题。](https://web.developers.google.cn/static/articles/coop-coep/image/coep-issues-the-status-c-9f8040461053.jpg?authuser=7&hl=ro)
然后,您可以点击该条目查看更多详情。
![在“Network”面板中点击某个网络资源后,“Headers”标签页中会显示 COEP 问题的详细信息。](https://web.developers.google.cn/static/articles/coop-coep/image/details-the-coep-issue-a-7483b46211d45.jpg?authuser=7&hl=ro)
您还可以通过 Application 面板。前往“帧”部分 展开“顶部”查看资源结构的明细
<ph type="x-smartling-placeholder"></ph>
您可以查看 iframe 的状态,例如 SharedArrayBuffer
的可用性、
等等
![Chrome 开发者工具 iframe 检查器](https://web.developers.google.cn/static/articles/coop-coep/image/chrome-devtools-iframe-in-7b22ff613fbeb.png?authuser=7&hl=ro)
<ph type="x-smartling-placeholder"></ph> 您还可以查看弹出式窗口的状态,例如是否是跨源窗口 隔离。
![Chrome 开发者工具弹出式窗口检查器](https://web.developers.google.cn/static/articles/coop-coep/image/chrome-devtools-popup-win-191023386b4a8.png?authuser=7&hl=ro)
使用 Reporting API 观察问题
Reporting API是另一种供您 检测各种问题。您可以配置 Reporting API 来指示 用户的浏览器,以便在 COEP 阻止资源加载时发送报告 或 COOP 隔离弹出式窗口。Chrome 对 Reporting API 的支持从 69 版可用于多种用途,包括 COEP 和 COOP。
了解如何配置 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"
}]
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
,用于确定某个网页是否为跨源网页
隔离状态
当此扩展程序推出新功能时,我们会及时更新此帖 跨域隔离状态,并且对开发者工具进行了进一步改进 。