使用SharedArrayBuffer带来的跨域隔离问题解决方案

---

theme: github

小提示：本方案几乎适用于任意场景，并不局限于Nuxt3，Nginx、IIS等均适用。

起因

今天我的朋友空山开发了个工具：M3U8视频在线下载,在我看来是很高级的，这个工具可以把网络上的m3u8的视频链接通过ffmpeg.wasm进行下载合并为mp4，我感到十分震撼，前端能做的东西实在是太多了，他将代码提交后我抓紧拉取并部署到了网站上，测试发现没有任何问题，但是往往看起来没有任何问题的时候恰恰存在很多我不知道的问题。

发现问题

我发现在登录网站时无法显示登录验证码了，报错如下：

找到问题

于是我开始查看最新提交的代码里做了哪些关于跨域的事情（其实我根本没有去找我就看到了，因为拉取代码后我发现新增了一个中间件，我随手打开了一下）：

可以看到多出来这么一串东西：

export default function (req: any, res: any, next: any) {
    res?.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
    res?.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
    next();
}

确定问题

由于我使用的是nuxt3，因此可以断定这段代码就是响应时设置的，于是我就删除了这段代码重新调试，于是该有的问题出现了，当我删除掉以后，再次使用这个下载工具时浏览器报错：ReferenceError: SharedArrayBuffer is not defined，于是我就开始查找这个报错的意思，于是查到了关于SharedArrayBuffer的一些信息。 大概意思就是想要用这个SharedArrayBuffer就需要设置启用跨域隔离：

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

我的理解就是仅允许使用同源资源，否则浏览器为了安全就不让用SharedArrayBuffer，也就是说如果我想要正常使用SharedArrayBuffer，那么就必须要遇到一个问题：任何第三方资源我都无法使用，例如CDN图片、第三方js（我这里是统计），要么就只能放弃增加这个工具了。

着手解决

作为一个成年人，遇到这种二选一的问题我肯定不能妥协，做到两手都要抓，两手都要硬。

于是我这边有了一个大概的思路：

1. 要查找资料突破这个问题的限制。
2. 如果方案一无法解决，那么我就把这个工具设置为一个单独的工具，这个工具页面除了工具必要的内容外，不再有其他内容了，包括登录按钮（因为点击登录后回有登录验证码）以及统计代码，随后我在中间件中单独对这个url设置response header。

落实方案

经过一番查找，我发现方案一是不可行的，好在群友及时提供了一个连接，参考内容第二个网址，其中有一段话非常重要：

只不过以前js/css/png这些资源都是不检测跨域的，但是如果开启了跨域隔离，这些资源都会变得跟其他资源一样需要进行跨域检测。

也就是说只要我针对这些资源一个个允许跨域就可以解决这个问题了，可是想到未来可能有些第三方地址并未允许跨域，于是我决定将方案一和二融合一下。

最后方案如下：

1. Nuxt3增加相应头（也可以是Nginx等）：cross-origin-resource-policy:cross-origin
2. 中间件依然判断是否需要跨域隔离，需要才增加隔离代码
3. 登录的验证码图片标签和统计代码标签增加crossorigin="anonymous"
4. 尽可能保证这种工具中不出现或者少出现跨域地址

代码部分

我将中间件的代码修改为：

export default function (req: any, res: any, next: any) {
    const uList = [
        '/tool/detail/DownloadM3U8'
    ]
    if (uList.indexOf(req.url) > -1) {
        res?.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
        res?.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
        res?.setHeader('cross-origin-resource-policy', 'cross-origin')
    }
    next();
}

我使用一个数组保存需要隔离的工具地址，这样写，方便以后拓展其他可能用到跨域隔离的工具。

！！！ Nginx等请自行在配置文件中配置，同样针对具体的url地址进行设置header。！！！

登录验证码标签增加crossorigin：

<img class="h-9 flex-1" @click="refreshCaptcha()" :src="captchaUrlPic" crossorigin="anonymous" />

统计代码增加crossorigin：

!function (p) { "use strict"; !function (t) { var s = window, e = document, i = p, c = "".concat("https:" === e.location.protocol ? "https://" : "http://", "sdk.51.la/js-sdk-pro.min.js"), n = e.createElement("script"), r = e.getElementsByTagName("script")[0]; n.type = "text/javascript", n.setAttribute("crossorigin","anonymous"), n.setAttribute("charset", "UTF-8"), n.async = !0, n.src = c, n.id = "LA_COLLECT", i.d = n; var o = function () { s.LA.ids.push(i) }; s.LA ? s.LA.ids && o() : (s.LA = p, s.LA.ids = [], o()), r.parentNode.insertBefore(n, r) }() }({ id: "", ck: "" });

注意看：n.setAttribute("crossorigin","anonymous")，这是51la统计代码，其他统计原理相同。

后记

虽然目前这种方式已经解决了燃煤之急，但我认为并非最佳方案，希望未来可以有更好的解决方案。

参考

如何设置跨域隔离启用 SharedArrayBuffer：https://blog.csdn.net/JAVAQXQ/article/details/126184502

Cross Origin Isolation：如何进行跨域隔离： https://www.cnblogs.com/DarkMaster/p/15224526.html