Vue使用ffmpeg,报ReferenceError: SharedArrayBuffer is not defined 如何解决

这篇具有很好参考价值的文章主要介绍了Vue使用ffmpeg,报ReferenceError: SharedArrayBuffer is not defined 如何解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

“SharedArrayBuffer is not defined” 错误是因为在浏览器环境中,SharedArrayBuffer 对象被认为是一种潜在的安全风险。为了防止 Spectre 攻击等漏洞,现代浏览器通常会禁用或限制对 SharedArrayBuffer 的使用。

SharedArrayBuffer 是一种 JavaScript 对象,用于在多线程环境中共享内存。然而,由于共享内存的特性,它可能导致安全漏洞。攻击者可以通过操纵共享内存来执行恶意代码,因此大部分浏览器对其进行了限制。

什么是SharedArrayBuffer ?

在讨论SharedArrayBuffer ,我们可以很容易地把注意力集中在物理词上。“共享”、"阵列 "和 “缓冲区”。

数组是一种数据结构,在编程中用来存储由不同数据类型(字符串、布尔值、数字和对象)组成的数据元素。缓冲区是内存存储的一部分,用于在发送或接收使用前暂时存储数据。

ArrayBuffer是一个与其他不同的数组–它是一个字节数组,意味着只接受字节。

要在JavaScript中使用共享内存,你需要创建SharedArrayBuffer 。这是通过使用SharedArrayBuffer 对象来完成的,它创建了一个新的对象构造器,用于在多个线程之间写入和共享数据。

SharedArrayBuffer的历史

2018年1月5日,由于现代CPU架构中发现的漏洞攻击,SharedArrayBuffer 在所有主要浏览器中被禁用。

此后,SharedArrayBuffer 在谷歌浏览器 v67 中被重新启用,现在可以在启用其网站隔离功能的平台上使用,我们将在本文的后续部分介绍。这一更新可以防止Spectre漏洞的攻击,使你的网站更加安全。

什么是跨源隔离?

跨源隔离是一项新的安全功能(截至2021年4月),被添加到浏览器中。简而言之,它是在你的顶层文件上发送两个HTTP头信息(COOP和COEP)的结果。这些头信息使你的网站能够获得对网络API的访问,如SharedArrayBuffer ,并防止外部攻击(Spectre攻击、跨源攻击等)。

以前,使用共享内存的网站可以未经许可加载跨源内容。这些网站可以与非同一来源的窗口弹出式广告互动,有可能造成安全漏洞,或通过漏洞获取网站的用户信息。对于使用共享内存的网站来说,安全并同时保护用户信息变得非常重要。

以上问题内容均来自掘金上的这篇文章:https://juejin.cn/post/7065181402848837662#heading-0

本地运行解决方案:

在vue.config.js中的devServer中配置请求头:

  devServer: {
    headers: {
      // 如果需要用到ffmpeg合并视频,需要将COEP和COOP打开,来确保ShareArrayBuffer能够正常使用
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    }
  }

查看当前环境是否支持使用ShareArrayBuffer,在浏览器控制台输入crossOriginIsolated来校验;
MDN地址:https://developer.mozilla.org/zh-CN/docs/Web/API/crossOriginIsolated

本地运行,最好是用localhost,不用ip;

如果使用的是vite,也是同理;

生产环境运行解决方案:

vue路由要使用mode: "hash"的方式;
nginx部署,为指定路由加上请求头:
比如:文章来源地址https://www.toymoban.com/news/detail-671624.html

location /ffmpeg {
    root   html/dist;
    index  dolphin-ffmpeg.html;
    add_header Cross-Origin-Opener-Policy same-origin;
    add_header Cross-Origin-Embedder-Policy require-corp;
}

到了这里,关于Vue使用ffmpeg,报ReferenceError: SharedArrayBuffer is not defined 如何解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js报错问题解决:[Vue warn]: Error in v-on handler: “ReferenceError: XXX is not defined“.

    代码: 报错信息: 原因:count 忘加 this 了。。。 1、2

    2024年02月13日
    浏览(59)
  • Uncaught ReferenceError: $ is not defined几种处理方式

    1.未引进JQuery的js文件,可以去JQuery官网下载 2.jquery的js文件路径错误,src后可以写相对路径或者绝对路径,推荐写绝对路径 script type=\\\"text/javascript\\\" src=\\\"bookjs/jquery.js\\\"/script 3.最郁闷的一种,浏览器中文件都能读取,但是就是不能调用,代码顺序问题,应该先引用jquery.js文件,再

    2024年02月07日
    浏览(50)
  • 如何申请百度地图开发者AK和基本使用,并解决Uncaught ReferenceError: BMapGL is not defined的错误

    今天在学习 amis 框架中的地理位置( LocationPicker )的组件,如下图所示: 关于 amis 的更多了解,可以参考博文:百度低代码amis框架的讲解 截图中注意的是, ak 参数只能在 amis 官网示例中使用,让我们前往百度地图开放平台申请自己的 ak 。 百度地图开放平台官网地址:https:

    2024年02月01日
    浏览(91)
  • Webpack 解决:ReferenceError: dist is not defined 的问题

    其一、报错为: ReferenceError: dist is not defined 中文为: ReferenceError:dist 未定义 其二、问题描述为: 想在 webpack 的配置中,创建一个 dist 文件夹 来存放 npm run build 打包后的文件,但发现运行代码后报错; 其三、控制台报错的页面显示为: 根据报错的提示: dist 未定义 可知,

    2024年02月07日
    浏览(62)
  • node.js报错 ReferenceError require is not defined 解决方案

    从node.js 14版及以上版本中,require作为COMMONJS的一个命令已不再直接支持使用,所以我们需要导入createRequire命令才可以; 在使用 require 的地方需要加入以下代码:

    2024年01月18日
    浏览(56)
  • js出现Uncaught ReferenceError: XXX is not defined错误的解决办法

    javascript提示:Uncaught ReferenceError: XXX is not defined的意思是函数XXX()没有被定义。js一般出现Uncaught ReferenceError: XXX is not defined这样的错误,大概率是你把函数放在了 window.onload 里面。 出现这个问题的原因是: 1.window.onload事件是在整个页面包括dom结构、图片等等全部加载完成之后

    2024年02月09日
    浏览(50)
  • Vite+web3:报错出现ReferenceError: process is not defined

    近期使用vite脚手架搭建一个区块链项目,需要web3这个依赖库,但是在项目当中引入web3后,报错出现:  解决方案是在vite配置文件vite.config.js当中配置: 然后正常引入即可:

    2024年02月12日
    浏览(71)
  • ReferenceError: __dirname is not defined in ES module scope

    运行代码 报错: package.json 加了以下配置 1、方法一 删除文件 package.json 中的配置项: \\\"type\\\": \\\"module\\\" 2、方法二 注意:该方法得到的是运行目录,并不是该文件的所在目录 ESM下,不能直接引入json文件了,需要通过文件接口读取解析 参考 https://stackoverflow.com/questions/8817423/why-i

    2024年02月11日
    浏览(42)
  • 小程序报错Uncaught ReferenceError: __wxConfig is not defined解决方法

    首先检查一下小程序有没有安装所需要的依赖包,这里以我自己的项目举例,我用的npm,所以要执行命令(npm  i)安装依赖包 在小程序端构建npm: 开发者工具菜单中选择  “工具”—— “构建npm” 构建好之后项目应该就可以跑起来了,如果还是不行尝试重新编译或者重启

    2024年02月11日
    浏览(61)
  • HTML引入Typescript编译JS文件 :Uncaught ReferenceError: exports is not defined

    初学TypeScript,尝试在html引入ts编译出来的js文件: 报错: Uncaught ReferenceError: exports is not defined 以下是代码: 创建了TS:加入export {}形成独立的作用域,其他ts文件重复声明相同名称的变量。 tsconfig.json配置: 编译之后生成js: HTML: 运行时报错:Uncaught ReferenceError: exports is not defi

    2023年04月18日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包