当前位置: 首页 > news >正文

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部署,为指定路由加上请求头:
比如:

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 如何解决

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

【OpenCV实战】1.OpenCV环境搭建,Mac M1系统,C++开发环境

OpenCV环境搭建,Mac系统,C开发环境 一、步骤VSCode C环境安装运行CMake安装运行OpenCV 安装CMakeList 一、步骤 VSCode C环境安装CMake 安装OpenCV 安装CmakeList.txt VSCode C环境安装运行 访问官网 CMake安装运行 CMake官网 参考文档 OpenCV 安…...

Hyperf 如何做到用两个端口 9501/9502 都能连接 Websocket 服务以及多 Worker 协作实现聊天室功能

为何 Hyperf 能够在两个端口上监听 WebSocket 连接? 源码角度来看,在配置了多个 Servers 时,实际上,只启动了一个 Server 注:我之前接触的代码都是启动一个服务绑定一个端口,之前也看过 swoole 扩展的文档…...

网络映射会遇到哪些困难

网络映射通过将复杂的网络划分为更小、可管理的块,帮助 IT 管理员获得对其网络的更大控制和可见性,它有助于可视化不同的网络组件(如服务器、交换机端口和路由器)如何互连以执行其功能,通过表示网络设备的通信方式&…...

【jvm】类的主动使用和被动使用

目录 一、主动使用二、被动使用 一、主动使用 1.创建类的实例 2.访问某个类或接口的静态变量,或者对该静态变量赋值 3.调用类的静态方法 4.反射(例如Class.forName(“com.learning.Test”)) 5.初始化一个类的子类 6.java虚拟机启动时被标明为…...

如何选择合适的损失函数

目录 如何选择合适的损失函数 1、均方误差,二次损失,L2损失(Mean Square Error, Quadratic Loss, L2 Loss) 2、平均绝对误差,L1损失(Mean Absolute Error, L1 Loss) 3、MSE vs MAE &#xff…...

Java常见的排序算法

排序分为内部排序和外部排序(外部存储) 常见的七大排序,这些都是内部排序 。 1、插入排序:直接插入排序 1、插入排序:每次将一个待排序的记录,按其关键字的大小插入到前面已排序好的记录序列 中的适当位置…...

【C++】5、构建:CMake

文章目录 一、概述二、实战2.1 内部构建、外部构建2.2 CLion Cmake 一、概述 CMake 是跨平台构建工具,其通过 CMakeLists.txt 描述,并生成 native 编译配置文件: 在 Linux/Unix 平台,生成 makefile在苹果平台,可以生…...

【ARP欺骗】嗅探流量、限速、断网操作

【ARP欺骗】 什么是ARP什么是ARP欺骗ARP欺骗实现ARP断网限制网速嗅探流量 什么是ARP ARP(Address Resolution Protocol,地址解析协议)是一个TCP/IP协议,用于根据IP地址获取物理地址。在计算机网络中,当一个主机需要发…...

初步认识OSPF的大致内容(第三课)

1 路由的分类 直连路由(Directly Connected Route)是指网络拓扑结构中相邻两个网络设备直接相连的路由,也称为直接路由。如果两个设备属于同一IP网络地址,那么它们就是直连设备。直连路由表是指由计算机系统生成的一种用于路由选择的表格,其中记录着直连路由的信息。直连…...

CSDN编程题-每日一练(2023-08-27)

CSDN编程题-每日一练(2023-08-27) 一、题目名称:异或和二、题目名称:生命进化书三、题目名称:熊孩子拜访 一、题目名称:异或和 时间限制:1000ms内存限制:256M 题目描述: …...

机器视觉之平面物体检测

平面物体检测是计算机视觉中的一个重要任务,它通常涉及检测和识别在图像或视频中出现的平面物体,如纸张、标志、屏幕、牌子等。下面是一个使用C和OpenCV进行平面物体检测的简单示例,使用了图像中的矩形轮廓检测方法: #include &l…...

C#开发WinForm之DataGridView开发

前言 DataGridView是开发Winform的一个列表展示,类似于表格。学会下面的基本特征用法,再辅以经验,基本功能开发没问题。 1.设置 DataGridView表格行首为序号索引, //设置 DataGridView表格行首为序号索引private void dataGridView1_RowPost…...

PDFPrinting.Net Crack

PDFPrinting.Net Crack 它能够轻松灵活地预测完美的打印结果以及用户文件的示例性显示。在.NET的PDF打印中,可以快速浏览最关键的元素。如果用户需要获得更详细的概述,那么他可以查看快速入门手册,甚至现有文档的详细概述参考。 在这种情况下…...

git操作:将一个仓库的分支提交到另外一个仓库分支

这个操作,一般是同步不同网站的同个仓库,比如说gitee 和github。某个网站更新了,你想同步他的分支过来。然后基于分支开发或者其它。 操作步骤 1.本地先clone 你自己的仓库。也就是要push 分支的仓库。比如A仓库,把B仓库分支&am…...

基于Java+SpringBoot+Vue前后端分离医院资源管理系统设计和实现

博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…...

Android——基本控件下(十七)

1. 文本切换&#xff1a;TextSwitcher 1.1 知识点 &#xff08;1&#xff09;理解TextSwitcher和ViewFactory的使用。 1.2 具体内容 范例&#xff1a;切换显示当前时间 <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools&…...

HCIP-HCS华为私有云

1、概述 HCS&#xff08;HuaweiCoudStack&#xff09;华为私有云&#xff1a;6.3 之前叫FusionSphere OpenStack&#xff0c;6.3.1 版本开始叫FusionCloud&#xff0c;6.5.1 版本开始叫HuaweiCloud Stack (HCS)华为私有云软件。 开源openstack&#xff0c;发放云主机的流程&am…...

docker下载github项目失败

Docker 在构建过程中直接从 GitHub 下载项目时超时&#xff0c;可能是由于网络问题、GitHub 访问限制或其他原因导致的。以下是一些建议和解决方法&#xff1a; 预先下载项目: 在构建 Docker 镜像之前&#xff0c;首先在宿主机上手动克隆 GitHub 项目&#xff0c;然后使用 COPY…...

【CSS】网站 网格商品展示 模块制作 ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 ) 绘制的如下模块 : 在上面的盒子中 , 没有设置高度 , 只设置了一个 1215px 的宽度 ; 在列表中每个列表项都设置了 浮动 ; /* 网格商品展示 */ .box-bd {/* 处理列表间隙导致意外换行问题一排有 5 个 228x270 的盒子…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...