解决 SharedArrayBuffer is not defined

2021-10-09 13,263 阅读1分钟

背景

2017.7月（Chrome 60）引入 SharedArrayBuffer。

2021.7月（Chrome 92）限制 SharedArrayBuffer只能在 cross-origin isolated 页面使用。

Android Chrome 88 也进行了同样的限制。

1. SharedArrayBuffer 降级 ArrayBuffer

if(!crossOriginIsolated) {
  SharedArrayBuffer = ArrayBuffer;
}

优点：简单粗暴

缺点：可能影响功能

2. 响应 COOP 和 COEP 头部

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

优点：支持 Chrome，Firefox 等大部分浏览器，属于目前的长期解决方案。

缺点：影响窗口/iframe 回调型应用（第三方登录、付款等），影响 script 标签加载跨域资源。

3. Chrome 浏览器添加 Chrome Origin Trials

这种方法只支持 chrome 浏览器，且最高支持到 2022.7月 Chrome 104

# 注册页面获得 Token
https://developer.chrome.com/origintrials/#/registration

# Token 放置页面 meta 标签或者响应头 Origin-Trial
<meta http-equiv="origin-trial" content="REGISTER GET TOKEN">

Origin-Trial: REGISTER GET TOKEN

优点：简单粗暴

缺点：只支持 Chrome