如何设置跨域隔离启用 SharedArrayBuffer

8月 5, 2022

分类: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 的功能的时候总结出的经验，如果有不对的地方欢迎指出。