如何在 Microsoft Edge 中启用 SharedArrayBuffer Javascript

How to enable SharedArrayBuffer in Microsoft Edge Javascript

所以前几天,我问了这个关于 javascript 网络工作者的问题: 。我收到的答案之一是使用 SharedArrayBuffer 在 main javascript 和 webworker 之间共享内存。我知道有一段时间,这在 Microsoft Edge 上是可用的,但出于安全考虑,不久前被禁用了。我的边缘版本是 96.0.1054.62。有没有办法在浏览器配置或设置中启用共享数组缓冲区?目前,当我尝试使用它时,它说 SharedArrayBuffer 未定义。

为了启用共享数组缓冲区支持,您的网页需要位于 secure context. To do this, you need your server to give the following headers: Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp. You can read more about it on MDN

在服务器上更改header是推荐的方式,但是如果你根本没有能力在服务器上管理header,那么你可以通过Service Workers来修改它们. This blogpost 描述了在 ServiceWorker 中通过 header 修改启用 SharedArrayBuffer。它按以下顺序工作:

  1. 第一次加载页面时,会注册一个 Service worker
  2. 页面已重新加载
  3. SharedArrayBuffer 变得可用,因为 ServiceWorker 控制所有请求的所有 CORS header

Service Worker 通过添加 CORS/COEP headers 修改所有请求(示例取自提到的博文):

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);
    })
  );
});