需求
最近在研究 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 的功能的时候总结出的经验,如果有不对的地方欢迎指出。