跨源隔离
一个网站要么是跨源隔离的,要么不是。
🌐 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