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

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写入数据返回成功后,实际硬件内信息查询未存储?

问题&#xff1a;连接蓝牙后&#xff0c;调用小程序writeBLECharacteristicValue&#xff0c;返回传输数据成功&#xff0c;查询硬件响应发现没有存储进去&#xff1f; 解决&#xff1a;一直以为是这个write方法的问题&#xff0c;找了很多相关贴&#xff0c;后续进行硬件日志…...

5G NR:带宽与采样率的计算

100M 带宽是122.88Mhz sampling rate这是我们都知道的&#xff0c;那它是怎么来的呢&#xff1f; 采样率 子载波间隔 * 采样长度 38.211中对于Tc的定义&#xff0c; 在LTE是定义了Ts&#xff0c;在NR也就是5G定义了Tc。 定义这个单位会对我们以后工作中的计算至关重要。 就是在…...

go 和java 编写方式的理解

1. go 推荐写流水账式的代码&#xff08;非贬义&#xff09;&#xff0c;自己管自己。java喜欢封装各种接口供外部调用&#xff0c;让别人来管自己。 2. 因为协程的存在&#xff0c; go的变量作用域聚集在方法内部&#xff0c;即函数不可重入&#xff0c;而java线程的限制&…...

C# 7.1 .Net Framwork4.7 VS2017环境下,方法的引用与调用

方法的调用比较好理解&#xff0c;就是给方法传递实参&#xff0c;执行方法代码。 方法引用涉及委托&#xff0c;委托签名与其引用的方法必须一致。以下demo说明方法调用与引用在写程序时的区别&#xff1a; using System; using System.Collections.Generic; using System.L…...

etcd、kube-apiserver、kube-controller-manager和kube-scheduler有什么区别

在我们部署K8S集群的时候 初始化master节点之后&#xff08;在master上面执行这条初始化命令&#xff09; 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编写测试用例,复杂度校验

最近我们公司要求开发人员必须写测试用例&#xff0c;组织了TDD培训&#xff0c;测试驱动开发&#xff0c;同时衡量代码的圈复杂度&#xff0c;我记录下初次使用的过程。 编写测试用例&#xff0c;查看用例覆盖度 1、要编写测试用例&#xff0c;并看下测试用例的覆盖度&#…...

搭建私有云存储

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 正在玩一个游戏。最初&#xff0c;Alice 有一个字符串 word "a"。 给定一个正整数 k。 现在 Bob 会要求 Alice 执行以下操作 无限次 : 将 word 中的每个字符 更改 为英文字母表中的 下一个 字符来生成一个新字符串&#xff0c;并将其 追加 到原始的…...

深入解析分布式遗传算法及其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代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 两个整数a和b分别作为分子和分母&#xff0c;既分数 a/b &#xff0c;求它的浮点数值&#xff08;双精度浮点数&#xff0c;保留小数点…...

在 C/C++ 中,volatile 关键字的作用是什么?.volatile 关键字与 const 关键字有什么区别?

volatile关键字用于告诉编译器&#xff0c;被修饰的变量可能会被程序以外的因素&#xff08;如硬件、操作系统等&#xff09;修改&#xff0c;因此每次访问该变量时都应该从内从中读取他的值&#xff0c;而不是使用可能存在的缓存之&#xff0c;这在多线程编程&#xff0c;与硬…...

golang debug调试

1. 本地调试 1&#xff1a;Add Configurations 添加配置文件&#xff08;Run kind &#xff1a;Directory&#xff09; 2&#xff1a;进入run运行窗口 3&#xff1a;debug断点调试模式 1. Resume Program (继续运行) 图标: ▶️ 或 ► 快捷键: F9&#xff08;Windows/Linux&a…...

自动化运维(k8s)之微服务信息自动抓取:namespaceName、deploymentName等全解析

前言&#xff1a;公司云原生k8s二开工程师发了一串通用性命令用来查询以下数值&#xff0c;我想着能不能将这命令写成一个自动化脚本。 起初设计的 版本一&#xff1a;开头加一条环境变量&#xff0c;执行脚本后&#xff0c;提示输入&#xff1a;需要查询的命名空间&#xff0c…...

07 初始 Oracle 优化器

查询优化器&#xff0c;简称优化器&#xff0c;是数据库最核心的组件之一。我们在这个系列的第一篇文章中已经给大家介绍了&#xff0c;优化器会参与到SQL语句的解析过程中&#xff0c;用来生成SQL语句的执行计划&#xff0c;直接决定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 站上开源的动漫风格扩散模型&#xff0c;与其他基础大模型一样&#xff0c;只需要输入适当的正面和负面提示词就能够实现动漫图片的生成。截至目前已经有 12.9k 的下载量&#xff0c;生成效果也非常不错。本文将介绍ComfyUI-tPonynai在算家云搭建以及本地部署的…...

C++设计模式(工厂模式)

一、介绍 1.动机 在软件系统中&#xff0c;经常面临着创建对象的工作&#xff0c;这些对象有可能是一系列相互依赖的对象&#xff1b;由于需求的变化&#xff0c;需要创建的对象的具体类型经常变化&#xff0c;同时也可能会有更多系列的对象需要被创建。 如何应对这种变化&a…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

《Offer来了:Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...