独书先生 Menu

如何设置跨域隔离启用 SharedArrayBuffer

分类:Web

需求

最近在研究 ffmpeg WebAssembly 版本在网页运行的工具,发现使用到了 SharedArrayBuffer,涉及到跨域隔离的问题,需要设置两个 HTTP 消息头启用跨域隔离:

  • Cross-Origin-Opener-Policy 设置为 same-origin(保护源站免受攻击)
  • Cross-Origin-Embedder-Policy 设置为 require-corp(保护源站免受侵害)

不同的服务有不同的设置方法,这里简要介绍下。

解决

方案一

对于前端开发来说,本地开发阶段,可以起一个 Node.js 服务,用于本地开发实时调试,比如我用 Express.js (Node.js 后端框架)

// Add headers
app.use(function (req, res, next) {
    // 设置响应头
    res.header("Cross-Origin-Embedder-Policy", "require-corp");
    res.header("Cross-Origin-Opener-Policy", "same-origin");

    // Pass to next layer of middleware
    next();
});

完整的文件可以参考:Create a server with Express.js

方案二

部署到服务器上之后,一般会用 nginx 做代理服务器,这时候可以给 nginx 配置加两个响应头

nginx 配置

location / {
    # 设置响应头
    add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
    add_header 'Cross-Origin-Opener-Policy' 'same-origin';
}

方案三

如果只是临时开启简单体验下 SharedArrayBuffer 这个功能,可以在启动谷歌浏览器时加参数。

以 Windows 为例,桌面上找到 chrome 图标,复制一个出来,右击 Chrome 图标 – 属性 – 目标,将原来的

"C:\Program Files\Google\Chrome\Application\chrome.exe"

改成

"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-features=SharedArrayBuffer

这样用新的图标打开谷歌浏览器就是开启了 SharedArrayBuffer,本地测试用

注意

一旦开启了跨域隔离,可能会对您网站上的其它跨域资源产生影响,比如 Adsense 广告,暂时也没有很好的兼容办法,需要自己做一下取舍。

总结

以上就是我在使用 wasm SharedArrayBuffer 的功能的时候总结出的经验,如果有不对的地方欢迎指出。

参考