如何在Microsoft中启用SharedArrayBuffer

Question

所以前几天，我问了一个关于javascript网络工作者的问题：Javascript如何将json信息放入数组缓冲区。我得到的答案之一是使用SharedArrayBuffer在主javascript和webworker之间共享内存。我知道，有一段时间，这是可用的微软边缘，但出于安全考虑被禁用了一段时间前。我的边缘版本是96.0.1054.62。是否有任何方式在浏览器配置或设置中启用共享数组缓冲区？目前，当我尝试使用它时，它说SharedArrayBuffer是未定义的。

Answer 1

为了启用共享阵列缓冲区支持，您的网页需要位于安全上下文中。为此，您需要您的服务器提供以下标题：Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp。你可以在MDN上读到更多关于它的信息。

更改服务器上的标头是推荐的方法，但如果您根本没有能力管理服务器上的标头，则可以通过Service修改它们。这个博客描述了通过在ServiceWorker中修改头来启用SharedArrayBuffer。它的工作顺序如下：

1. 第一次加载页面时，将注册服务工作人员
2. 页面被重新加载。
3. SharedArrayBuffer变得可用，因为ServiceWorker控制所有请求的所有CORS头。

服务工作者通过添加CORS/COEP头来修改所有请求(示例摘自上述blogpost)：

​

self.addEventListener("install", function() {
  self.skipWaiting();
});

self.addEventListener("activate", (event) => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener("fetch", function(event) {
  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
    return;
  }

  event.respondWith(
    fetch(event.request)
    .then(function(response) {
      // It seems like we only need to set the headers for index.html
      // If you want to be on the safe side, comment this out
      // if (!response.url.includes("index.html")) return response;

      const newHeaders = new Headers(response.headers);
      newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
      newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");

      const moddedResponse = new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders,
      });

      return moddedResponse;
    })
    .catch(function(e) {
      console.error(e);
    })
  );
});

​