如何在 Chrome 中定义 SharedArrayBuffer？答案

【问题标题】：How to define SharedArrayBuffer in Chrome?如何在 Chrome 中定义 SharedArrayBuffer？
【发布时间】：2021-10-07 12:17:53
【问题描述】：

我正在关注this tutorial 开发 React + WASM + FFmpeg 应用程序

在 Chrome 上，我收到错误 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined error.

我关注了doc reference，它说的是下面的内容，我不明白。

跨域隔离概述

您可以通过使用以下标头提供页面来使页面跨域隔离：

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

serving the pages with these headers 是什么意思？

我该如何实现？

我什至找到了Chrome dev's official video，但即便如此也没有解释任何实现细节。

Edit2：我能找到的最好的指令是here，但即使这样对我来说也太模糊了。设置标题是什么意思？我不要求任何开始。

编辑：我的 React 版本已经是 17.0.2，所以 this should have been fixed 但不知何故我也遇到了这个错误......

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021.

【问题讨论】：

标签： javascript google-chrome http-headers

【解决方案1】：

让我们从serving the pages with these headers 的含义开始。

例如，如果您曾经使用 Express.js 构建过 API，那么您将对此很熟悉。从本质上讲，这意味着当用户发出 GET 请求以查看网页时，您将不得不以 HTTP 标头的形式发送一些附加信息。

具体来说，第一个标头可防止您的页面加载任何未明确授予权限的跨域资源。第二个意味着您不能与任何跨域文档共享浏览上下文组。这两者都被用作防止跨域攻击的安全措施。即使您可能没有要求任何东西，您也必须应用它们。

现在解决您的问题，我建议您安装 Chrome 扩展程序 CORS。我不确切知道它是如何工作的，但我过去曾使用过它，这将是一个临时解决方案。我浏览了您正在关注的教程，但没有看到服务器设置（例如在Express.js/Node 的http 中）。如果您有任何这些，您可以将标头作为参数传递给服务器。

要检查 CORS 设置是否按预期工作，请将以下代码添加到您的应用中：

if (crossOriginIsolated) {
    // Works
}

【讨论】：

谢谢。但是，是的，这不使用任何服务器设置。因此，我真的很困惑在哪里设置 http 请求标头，甚至如何做到这一点......
我也不确定。试试我提到的 CORS 东西，让我知道它是否有效。如果您正在寻找更永久的东西或不满意，您可以考虑将所有内容包装在 Web 服务器中
scotch.io/tutorials/…

【解决方案2】：

SharedArrayBuffer 用于在您的主要浏览上下文和另一个代理（另一个网页或工作人员）之间共享数据缓冲区。

但是，为了尽量减少可能的安全漏洞，规范规定此 API 只能在 secure context 中运行。

除了这个安全先决条件之外，任何顶级文档还必须处于跨域隔离中。这意味着，提供内容的一方应该告诉浏览器它应该阻止跨域资源的加载。（来自域 A 的文档试图从域 B 获取数据）

这是由服务器通过在为网站提供服务时指定以下两个响应头来完成的：

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

如何在调试环境中指定它们？

您需要设置标准文件服务器，例如 Apache。然后你将不得不调整它的配置来为上面的头文件提供服务。

快速设置：https://www.wampserver.com/en/

提供标题信息的答案：https://stackoverflow.com/a/35566100/4185234

【讨论】：