如何设置跨域隔离启用 SharedArrayBuffer

布满荆棘的人生 2023-09-27 12:31 77阅读 0赞

### 需求 ###

最近在研究 ffmpeg WebAssembly 版本在网页运行的工具，发现使用到了 SharedArrayBuffer，涉及到跨域隔离的问题，需要设置两个 HTTP 消息头启用跨域隔离：

*  Cross-Origin-Opener-Policy 设置为 same-origin（保护源站免受攻击）
 *  Cross-Origin-Embedder-Policy 设置为 require-corp（保护源站免受侵害）

不同的服务有不同的设置方法，这里简要介绍下。

### 解决 ###

#### 方案一 ####

对于前端开发来说，本地开发阶段，可以起一个 Node.js 服务，用于本地开发实时调试，比如我用 Express.js (Node.js 后端框架)

// Add headers
    app.use(function (req, res, next) {
        // 设置响应头
        res.header("Cross-Origin-Embedder-Policy", "require-corp");
        res.header("Cross-Origin-Opener-Policy", "same-origin");
    
        // Pass to next layer of middleware
        next();
    });

#### 方案二 ####

部署到服务器上之后，一般会用 nginx 做代理服务器，这时候可以给 nginx 配置加两个响应头

nginx 配置

location / {
        # 设置响应头
        add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
        add_header 'Cross-Origin-Opener-Policy' 'same-origin';
    }

#### 方案三 ####

如果只是临时开启简单体验下 SharedArrayBuffer 这个功能，可以在启动谷歌浏览器时加参数。

以 Windows 为例，桌面上找到 chrome 图标，复制一个出来，右击 Chrome 图标 – 属性 – 目标，将原来的

"C:\Program Files\Google\Chrome\Application\chrome.exe"

改成

"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-features=SharedArrayBuffer

这样用新的图标打开谷歌浏览器就是开启了 SharedArrayBuffer，本地测试用

### 注意 ###

一旦开启了跨域隔离，可能会对您网站上的其它跨域资源产生影响，比如 Adsense 广告，暂时也没有很好的兼容办法，需要自己做一下取舍。

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关【跨域】如何解决跨域问题

同源策略同源相同协议+相同域名+相同端口内容 [浏览器的同源策略 - Web 安全 | MDN (mozilla.org)][- Web _ _

超、凢脫俗/ 2024年03月16日 13:32/ 0 赞/ 148 阅读

相关如何设置跨域隔离启用 SharedArrayBuffer

需求最近在研究 ffmpeg WebAssembly 版本在网页运行的工具，发现使用到了 SharedArrayBuffer，涉及到跨域隔离的问题，需要设置两个 HTT

布满荆棘的人生/ 2023年09月27日 12:31/ 0 赞/ 78 阅读

相关 axios请求，跨域问题，设置跨域代理

生成一个vue项目之后，开始写请求，请求数据，渲染到前端界面，有时候直接请求服务器上的接口，会遇到跨域问题，遇到跨域的时候，需要设置跨域代理~ 1：进入新建的项目之中，使用n

今天药忘吃喽~/ 2022年12月22日 00:57/ 0 赞/ 328 阅读

相关 Chrome设置跨域

cmd，输入以下命令，然后关掉浏览器重新打开 C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe

迷南。/ 2022年05月22日 08:39/ 0 赞/ 347 阅读

相关 springboot跨域设置

@Configuration public class CorsConfig { private CorsConfiguration

- 日理万妓/ 2022年05月16日 14:29/ 0 赞/ 250 阅读

相关浏览器设置跨域

由于项目前端使用8001端口，后端使用的8080端口，因此前端调用后端接口时需要跨域，在浏览器中需要设置跨域，否则会由于跨域安全性导致请求失败。比如chrome中，需要新建一个

朴灿烈づ我的快乐病毒、/ 2022年03月25日 04:48/ 0 赞/ 505 阅读

相关 jQuery AJAX 设置header 跨域 || 不跨域

一.ajax请求，没有跨域，设置http header头部 $.ajax({ type: "post",

叁歲伎倆/ 2022年02月01日 23:37/ 0 赞/ 1455 阅读

相关 SpringBoot设置跨域

[IDEA配置SpringBoot项目][IDEA_SpringBoot] > 跨域是指从一个域名的网页去请求另一个域名的资源。比如从http://www.baidu.c

痛定思痛。/ 2022年01月29日 09:59/ 0 赞/ 317 阅读

相关 WebAPI跨域设置

自定义webapi的路由规则，控制到action 跨域设置：（服务端） webconfig文件中，system.webServer节点下添加 <!--跨域请求：三

末蓝、/ 2021年10月29日 11:12/ 0 赞/ 452 阅读

相关 cors跨域设置

import org.springframework.context.annotation.Bean; import org.springframework.c

比眉伴天荒/ 2021年07月26日 20:36/ 0 赞/ 547 阅读