反应错误：Firefox 中的“SharedArrayBuffer 未定义”

Question

我有一个 React 应用程序，它是用“create-react-app”创建的（我也使用 jsdom NPM 包），出于某种原因，该应用程序仅在 Firefox 中在加载时引发错误（在 Chrome 和 Edge 中工作正常）。
这是错误：

ReferenceError: SharedArrayBuffer is not defined
./node_modules/jsdom/node_modules/webidl-conversions/lib/index.js
C:/Or/Web/WorldCovid/WorldCovid/node_modules/jsdom/node_modules/webidl-conversions/lib/index.js:347

  344 | 
  345 | const abByteLengthGetter =
  346 |     Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
> 347 | const sabByteLengthGetter =
  348 |     Object.getOwnPropertyDescriptor(SharedArrayBuffer.prototype, "byteLength").get;
  349 | 
  350 | function isNonSharedArrayBuffer(V) {

经过一番谷歌搜索，我发现：
“为了使SharedArrayBuffer在Firefox中，去about：config中和javascript.options.shared_memory偏好设置为true”（https://github.com/ggerganov/kbd-audio/issues/9）
的问题是它已经启用为true。

以前有人遇到过这个问题吗？谢谢。

更新：

尝试转换为：

const shared = new SharedArrayBuffer(1024);

const abByteLengthGetter =
    Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
const sabByteLengthGetter =
    Object.getOwnPropertyDescriptor(shared.prototype, "byteLength").get;

仍然得到相同的错误（与 SharedArrayBuffer 对象不同的行）。

Answer 1

您需要为文档设置两个响应标头：

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

这些是使用 SharedArrayBuffer 的新安全要求。

您可以检查代码是否启用了跨源隔离：

if (crossOriginIsolated) {
    // SharedArrayBuffer is available
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

Answer 2

React 问题已在 17.0.2 中修复并发布。他们表示没有计划将更改向后移植到旧版本，但这应该不是一个大问题，除非您期望在 React 上进行高精度性能测量。

SharedArrayBuffer自Spectre发现以来，除 Chrome 桌面版外，所有浏览器都已禁用它，但 Chrome 桌面版也从 Chrome 92 开始禁用它。您需要“跨域隔离”才能启用它。

当您遇到问题时：Uncaught ReferenceError: SharedArrayBuffer is not defined在 Chrome 上，您需要应用“跨源隔离”才能继续使用SharedArrayBuffer，但作为逃生舱，您可以请求源试用，将您的网站列入白名单SharedArrayBuffer，以便在没有跨源隔离的情况下继续使用至少在 Chrome 96 之前。

要启用跨源隔离，您必须以 @stephane k 形式发送两个 HTTP 标头（COOP 和 COEP）。其他评论中提到。

要了解有关跨源隔离的更多信息，请阅读：

• Android Chrome 88 和桌面版 Chrome 92 中的 SharedArrayBuffer 更新
• 使用 COOP 和 COEP 使您的网站“跨域隔离”
• 为什么需要“跨域隔离”才能获得强大的功能