Iframe 中的 SharedArrayBuffer

Question

因此，SharedArrayBuffer 最近被限制为跨源隔离页面作为安全修复。

我们有一个依赖于 SharedArrayBuffer 的工具，我对其进行了重新设计，将其移动到一个剥离了所有其他站点 UI 和其他内容的准系统页面，并发送以下标头：

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

尝试将其加载到成熟网站的 iframe 中会出现控制台错误，SharedArrayBuffer will require cross-origin isolation as of M92然后是ReferenceError: SharedArrayBuffer is not defined- 与我在跨源隔离最小页面本身上的工具之前遇到的情况相同。

我尝试包含 iframe 的页面不是跨域隔离的。这样做即使不是不可能，也是非常困难的。我根本不需要从父页面与 iframe 进行交互，这只是一个方便/风格的事情。目前的生产解决方案只是将用户链接到新窗口中的最小跨源工具页面，但这非常尴尬。

我希望有一些 iframe沙箱属性的组合或者可以使这项工作正常进行的东西？我为此奋斗了几个小时。

据我所知，这可能是不可能的。

Answer 1

我不确定这个选项是否适合您的情况，但也许它可以帮助您找到完整的解决方案。这篇博文介绍了通过 ServiceWorker 中的标头修改来启用 SharedArrayBuffer。它按以下顺序工作：

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

Service Worker 通过添加 CORS/COEP 标头来修改所有请求（该示例取自上述博文）：

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