Skip to main content

跨源隔离

一个网站要么是跨源隔离的,要么不是。

🌐 A website can either be cross-origin-isolated or not.

跨源隔离如何影响页面

🌐 How cross-origin isolation affects pages

启用跨源隔离是某些网页功能所必需的。例如,SharedArrayBuffer API——这是 @remotion/whisper-web 软件包正常工作的必要条件——仅在跨源隔离的页面中可用。

🌐 Enabling cross-origin isolation is required for some web features. For example, the SharedArrayBuffer API, which is required for the @remotion/whisper-web package to work, is only available in cross-origin isolated pages.

跨源隔离也会对页面施加一些限制。
例如,像 <video><audio> 这样的 HTML5 标签,如果从不同的源加载媒体,除非它们具有 crossorigin="anonymous" 属性,否则将无法工作。
如果这些资源不支持 CORS,它们将根本无法加载。

🌐 Cross-origin isolation will put some restrictions on the page as well.
For example, HTML5 tags like <video> and <audio> that load media from a different origin will not work unless they have the crossorigin="anonymous" attribute.
If those assets then do not support CORS, they will not load at all.

这也会影响以下 Remotion 标签: <Html5Video>, <Html5Audio>, <OffthreadVideo>, <Img>

🌐 This also affects the following Remotion tags: <Html5Video>, <Html5Audio>, <OffthreadVideo>, <Img>.

启用跨源隔离

🌐 Enabling cross-origin isolation

跨源隔离默认情况下是禁用的。

🌐 Cross-origin isolation is disabled by default.

在你的服务器上

🌐 On your server

要在你的页面上启用跨源隔离,服务器必须发送以下HTTP头:

🌐 To enable cross-origin isolation on your page, the server must send the following HTTP headers:

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

另请参见:

🌐 See also:

在 Remotion 工作室

🌐 In the Remotion Studio

在配置文件中:要启用它,你可以在你的 remotion.config.ts 文件中使用 setEnableCrossSiteIsolation() 函数。

通过 CLI 标志:你也可以通过向 Remotion CLI 传递 --cross-site-isolation 标志来启用它。

检查页面是否为跨源隔离

🌐 Checking if a page is cross-origin isolated

你可以通过调用 window.crossOriginIsolated 属性来检查页面是否是跨源隔离的。

🌐 You can check if a page is cross-origin isolated by calling the window.crossOriginIsolated property.

window.crossOriginIsolated; // true