如何在 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。它按以下顺序工作:
- 第一次加载页面时,会注册一个 Service worker
- 页面已重新加载
- 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);
})
);
});
所以前几天,我问了这个关于 javascript 网络工作者的问题:
为了启用共享数组缓冲区支持,您的网页需要位于 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。它按以下顺序工作:
- 第一次加载页面时,会注册一个 Service worker
- 页面已重新加载
- 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);
})
);
});