npm库xss依赖的使用方法和vue3 中Web富文本编辑器 wangeditor 使用xss库解决 XSS 攻击的方法
npm库xss依赖的使用方法和vue3 中Web富文本编辑器 wangeditor 使用xss库解决 XSS 攻击的方法
- 1. npm库xss依赖的使用方法
- 1.1 xss库定义
- 1.2 xss库功能
- 2. vue3 中 wangeditor 使用xss库解决 XSS 攻击的方法和示例
- 2.1 在终端执行如下命令安装 xss 依赖
- 2.2 在使用 wangeditor 的地方引入 xss 依赖
- 2.3 xss 依赖使用示例
1. npm库xss依赖的使用方法
1.1 xss库定义
- npm中有一个依赖名为xss,是一个可以对用户输入的内容进行过滤以避免遭受 XSS 攻击的js模块。
1.2 xss库功能
- 不定义白名单,也不自定义处理函数时,采用xss库默认的过滤规则。
- 可配置标签及标签属性白名单,作为允许的HTML标签及标签属性;
- 可自定义处理函数,针对任意标签及标签属性进行自定义处理。
2. vue3 中 wangeditor 使用xss库解决 XSS 攻击的方法和示例
2.1 在终端执行如下命令安装 xss 依赖
npm install xss -S
2.2 在使用 wangeditor 的地方引入 xss 依赖
import xss from 'xss'
2.3 xss 依赖使用示例
<template><div><div ref="myEditor" style="width: 100%"></div></div>
</template><script lang="ts" setup>
import xss from 'xss'
import wangeditor from 'wangeditor'let mailData = reactive({id: ''
})
const myEditor = ref(null)
let editorInstance = null
onMounted(() => {createWangeditor()
})
const createWangeditor = () => {editorInstance = new wangeditor(myEditor.value)let config = editorInstance.customConfig ? editorInstance.customConfig : editorInstance.configconfig.menus = ['head', // 标题'bold', // 加粗'fontName', // 字体'fontSize', // 字号'underline', // 下划线'strikeThrough', // 删除线'indent', // 'lineHeight', // 行高'foreColor', // 字体颜色'backColor', // 背景色'list', // 'justify' // ]config.fontNames = ['黑体','仿宋','楷体','标楷体','华文仿宋','华文楷体','宋体','微软雅黑']editorInstance.create()
}
onBeforeUnmount(() => {editorInstance = null
})// 查询文本编辑器默认内容接口
const handleChange = () => {mailData.id = ''editorInstance.txt.html('')queryDefaultContent().then(res => {const {code, data} = resif(code === '000') {let {id, content} = datamailData.id = id// 不定义白名单,也不自定义处理函数时,采用xss库默认的过滤规则let safeContent = xss(content) // 进行xss攻击过滤editorInstance.txt.html(safeContent)}})
}
</script>
相关文章:
npm库xss依赖的使用方法和vue3 中Web富文本编辑器 wangeditor 使用xss库解决 XSS 攻击的方法
npm库xss依赖的使用方法和vue3 中Web富文本编辑器 wangeditor 使用xss库解决 XSS 攻击的方法 1. npm库xss依赖的使用方法1.1 xss库定义1.2 xss库功能 2. vue3 中 wangeditor 使用xss库解决 XSS 攻击的方法和示例2.1 在终端执行如下命令安装 xss 依赖2.2 在使用 wangeditor 的地…...
微信小程序蓝牙writeBLECharacteristicValue写入数据返回成功后,实际硬件内信息查询未存储?
问题:连接蓝牙后,调用小程序writeBLECharacteristicValue,返回传输数据成功,查询硬件响应发现没有存储进去? 解决:一直以为是这个write方法的问题,找了很多相关贴,后续进行硬件日志…...
5G NR:带宽与采样率的计算
100M 带宽是122.88Mhz sampling rate这是我们都知道的,那它是怎么来的呢? 采样率 子载波间隔 * 采样长度 38.211中对于Tc的定义, 在LTE是定义了Ts,在NR也就是5G定义了Tc。 定义这个单位会对我们以后工作中的计算至关重要。 就是在…...
go 和java 编写方式的理解
1. go 推荐写流水账式的代码(非贬义),自己管自己。java喜欢封装各种接口供外部调用,让别人来管自己。 2. 因为协程的存在, go的变量作用域聚集在方法内部,即函数不可重入,而java线程的限制&…...
C# 7.1 .Net Framwork4.7 VS2017环境下,方法的引用与调用
方法的调用比较好理解,就是给方法传递实参,执行方法代码。 方法引用涉及委托,委托签名与其引用的方法必须一致。以下demo说明方法调用与引用在写程序时的区别: using System; using System.Collections.Generic; using System.L…...
etcd、kube-apiserver、kube-controller-manager和kube-scheduler有什么区别
在我们部署K8S集群的时候 初始化master节点之后(在master上面执行这条初始化命令) kubeadm init --apiserver-advertise-address10.0.1.176 --image-repository registry.aliyuncs.com/google_containers --kubernetes-version v1.16.0 --service…...
每日一题 LCR 057. 存在重复元素 III
LCR 057. 存在重复元素 III 滑动窗口二分查找 有序集合 有lower_bound(num) ,可以找到第一个大于其的数字 class Solution { public:bool containsNearbyAlmostDuplicate(vector<int>& nums, int k, int t) {set<long> win;for(int i0;i<nums.size();i){a…...
使用IDEA编写测试用例,复杂度校验
最近我们公司要求开发人员必须写测试用例,组织了TDD培训,测试驱动开发,同时衡量代码的圈复杂度,我记录下初次使用的过程。 编写测试用例,查看用例覆盖度 1、要编写测试用例,并看下测试用例的覆盖度&#…...
搭建私有云存储
1、安装LNMP环境 yum install nginx -y yum install -y nginx mariadb-server php php-fpm php-mysqlnd systemctl restart nginx.service --- 启动Nginx systemctl start mariadb.service ---启动数据库 mysql -e create database lxdb character set utf8 ---创建数据库 my…...
【从零开始的LeetCode-算法】3304. 找出第 K 个字符 I
Alice 和 Bob 正在玩一个游戏。最初,Alice 有一个字符串 word "a"。 给定一个正整数 k。 现在 Bob 会要求 Alice 执行以下操作 无限次 : 将 word 中的每个字符 更改 为英文字母表中的 下一个 字符来生成一个新字符串,并将其 追加 到原始的…...
深入解析分布式遗传算法及其Python实现
目录 深入解析分布式遗传算法及其Python实现目录第一部分:分布式遗传算法的背景与原理1.1 遗传算法概述1.2 分布式遗传算法的引入1.3 分布式遗传算法的优点与挑战优点:挑战:第二部分:分布式遗传算法的通用Python实现2.1 基本组件的实现第三部分:案例1 - 基于多种交叉与变异…...
gitee:创建仓库,存入本地文件至仓库
一、git下载 git:下载与安装-CSDN博客https://blog.csdn.net/weixin_46001736/article/details/144107485?sharetypeblogdetail&sharerId144107485&sharereferPC&sharesourceweixin_46001736&spm1011.2480.3001.8118 二、创建仓库 1、主页面->右上角新增…...
计算分数的浮点数值
计算分数的浮点数值 C语言代码C 代码Java代码Python代码 💐The Begin💐点点关注,收藏不迷路💐 两个整数a和b分别作为分子和分母,既分数 a/b ,求它的浮点数值(双精度浮点数,保留小数点…...
在 C/C++ 中,volatile 关键字的作用是什么?.volatile 关键字与 const 关键字有什么区别?
volatile关键字用于告诉编译器,被修饰的变量可能会被程序以外的因素(如硬件、操作系统等)修改,因此每次访问该变量时都应该从内从中读取他的值,而不是使用可能存在的缓存之,这在多线程编程,与硬…...
golang debug调试
1. 本地调试 1:Add Configurations 添加配置文件(Run kind :Directory) 2:进入run运行窗口 3:debug断点调试模式 1. Resume Program (继续运行) 图标: ▶️ 或 ► 快捷键: F9(Windows/Linux&a…...
自动化运维(k8s)之微服务信息自动抓取:namespaceName、deploymentName等全解析
前言:公司云原生k8s二开工程师发了一串通用性命令用来查询以下数值,我想着能不能将这命令写成一个自动化脚本。 起初设计的 版本一:开头加一条环境变量,执行脚本后,提示输入:需要查询的命名空间,…...
07 初始 Oracle 优化器
查询优化器,简称优化器,是数据库最核心的组件之一。我们在这个系列的第一篇文章中已经给大家介绍了,优化器会参与到SQL语句的解析过程中,用来生成SQL语句的执行计划,直接决定SQL语句执行性能的优劣。 什么是执行计划 …...
Java对象与XML互相转换(xstream)
依赖 <dependency><groupId>com.thoughtworks.xstream</groupId><artifactId>xstream</artifactId><version>1.4.18</version></dependency> 实体类 package com.itheima.util;import lombok.AllArgsConstructor; import lom…...
一键生成唯美动漫图:ComfyUI-tPonynai详细搭建教程
tPonynai 是在 C 站上开源的动漫风格扩散模型,与其他基础大模型一样,只需要输入适当的正面和负面提示词就能够实现动漫图片的生成。截至目前已经有 12.9k 的下载量,生成效果也非常不错。本文将介绍ComfyUI-tPonynai在算家云搭建以及本地部署的…...
C++设计模式(工厂模式)
一、介绍 1.动机 在软件系统中,经常面临着创建对象的工作,这些对象有可能是一系列相互依赖的对象;由于需求的变化,需要创建的对象的具体类型经常变化,同时也可能会有更多系列的对象需要被创建。 如何应对这种变化&a…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
