如何在Chrome中定义SharedArrayBuffer？

Question

我正在开发React + WASM + FFmpeg应用程序，在本教程之后

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

我跟踪了doc参考，下面写着，我不明白。

跨源隔离概述

通过向页面提供以下标题，可以使页面跨源隔离：

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

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

我该如何实现呢？

我甚至找到了Chrome dev的官方视频，但即便如此，也没有解释任何实现细节。

Edit2:我能找到的最好的指导是这里，但对我来说这也太模糊了。设置标题是什么意思？我不是在要求任何东西。

编辑:我的反应版本已经是17.0.2，所以这个应该已经修好了，但我也得到了这个错误.

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

Answer 1

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

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

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

现在，关于您的问题，我建议安装Chrome扩展CORS。我不知道它到底是如何工作的，但我在过去使用过它，这将是一个暂时的解决方案。我浏览了下面的教程，没有看到服务器设置(例如，在Express.js/Node的http中)。如果您有其中的任何一个，您可以将头作为参数传递给服务器。

若要检查CORS设置是否正常工作，请将以下代码添加到应用程序中：

if (crossOriginIsolated) {
    // Works
}

Answer 2

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

但是，为了最小化可能的安全漏洞，规范指出，该API只能在安全上下文中操作。

除了这个安全先决条件之外，任何顶级文档都必须处于跨源隔离状态。这意味着，服务内容的一方应该告诉浏览器，它应该阻止跨源资源的加载。(A域的文档试图从域B获取数据)

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

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

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

您需要设置一个标准文件服务器，如Apache。然后，您将不得不调整它的配置，以便在文件中为上面的头提供服务。

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

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

Answer 3

我最近偶然发现了你的问题和上面的答案。

为这些页眉提供服务意味着什么？

这意味着配置为您的页面提供服务的服务器，以包含这些标头。如何配置服务器取决于您正在使用的软件、Apache、Nginx、Caddy，或者是使用其他1000个服务器中的一个，还是编写自己的软件。

我编写了2(或者更正确地说，我使用了一个库来编写2)，并添加了包含这些标题的选项。两者都是开源的，所以如果您想了解它们是如何工作的，可以查看它们的内部。

如果您喜欢UI，那么就会有这一个。如果您喜欢命令行，那么安装node.js，然后可以使用这一个