当前位置: 首页 > 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 的地…...

计算机网络 实验七 NAT配置实验

一、实验目的 通过本实验理解网络地址转换的原理和技术&#xff0c;掌握扩展NAT/NAPT设计、配置和测试。 二、实验原理 NAT配置实验的原理主要基于网络地址转换&#xff08;NAT&#xff09;技术&#xff0c;该技术用于将内部私有网络地址转换为外部公有网络地址&#xff0c;从…...

UI设计-色彩、层级、字体、边距(一)

一.色彩&#xff1a;色彩可以影响人的心理与行动&#xff0c;具有不同的象征意义&#xff1b;有冷暖&#xff0c;轻重&#xff0c;软硬等等。 1.色彩情绪&#xff1a;最直观的视觉感受 一个活动的页面所用的颜色必须要与其内容相适应&#xff0c;让人看起来舒服。有时我们会不…...

【网络安全】

黑客入侵 什么是黑客入侵&#xff1f; “黑客”是一个外来词&#xff0c;是英语单词hacker的中文音译。最初&#xff0c;“黑客”只是一个褒义词&#xff0c;指的是那些尽力挖掘计算机程序最大潜力的点脑精英&#xff0c;他们讨论软件黑客的技巧和态度&#xff0c;以及共享文化…...

c++趣味编程玩转物联网:基于树莓派Pico控制有源蜂鸣器

有源蜂鸣器是一种简单高效的声音输出设备&#xff0c;广泛应用于电子报警器、玩具、计时器等领域。在本项目中&#xff0c;我们结合树莓派Pico开发板&#xff0c;通过C代码控制有源蜂鸣器发出“滴滴”声&#xff0c;并解析其中涉及的关键技术点和硬件知识。 一、项目概述 1. 项…...

【MySQL】MySQL从入门到放弃

文章目录 声明MYSQL一,架构1.1.网络连接层数据库连接池 1.2.系统服务层1.2.1.SQL接口1.2.2.存储过程1.2.3.触发器1.2.4.解析器1.2.5.优化器1.2.6.缓存,缓冲 1.3.存储引擎层1.4.文件系统层1.4.1.日志模块1.4.2.数据模块 二,SQL 执行2.1.执行流程2.2.刷盘2.3.返回 三.库表设计3.1…...

redis-cluster集群搭建

集群节点信息 192.168.222.131:46379 主要节点1 192.168.222.131:46380 从节点1 192.168.222.131:46381 从节点2192.168.222.132:46379 主要节点2 192.168.222.132:46380 从节点1 192.168.222.132:46381 从节点2192.168.222.133:46379 主要节点3 192.168.222.133:46380 从节点…...

C语言解决空瓶换水问题:高效算法与实现

标题&#xff1a;C语言解决空瓶换水问题&#xff1a;高效算法与实现 一、问题描述 在一个饮料促销活动中&#xff0c;你可以通过空瓶换水的方式免费获得更多的水&#xff1a;3个空瓶可以换1瓶水。喝完这瓶水后&#xff0c;空瓶会再次变为空瓶。假设你最初拥有一定数量的空瓶&a…...

单例模式入门

单例模式是一种创建型设计模式&#xff0c; 让你能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。 它的运作方式是这样的&#xff1a; 如果你创建了一个对象&#xff0c; 同时过一会儿后你决定再创建一个新对象&#xff0c; 此时你会获得之前已创建的…...

MongoDB快速入门

1 MongoDB 1.1 MongoDB 概念 1.1.1 什么是 MongoDB MongoDB 是在2007年由DoubleClick公司的几位核心成员开发出的一款分布式文档数据库&#xff0c;由C语言编写。 目的是为了解决数据大量增长的时候系统的可扩展性和敏捷性。MongoDB要比传统的关系型数据库简单很多。 在Mo…...

c语言中的extern是什么

在C语言中&#xff0c;extern 是一个关键字&#xff0c;用于声明变量或函数的外部链接。它告诉编译器该变量或函数的定义在其他文件中&#xff0c;编译器在编译当前文件时并不需要知道变量或函数的具体定义&#xff0c;而是将它们视作外部引用。 1. 变量的 extern 声明 当你在…...

CTF之密码学(摩斯密码)

一、历史背景 摩尔斯电码发明于1837年&#xff0c;是一种早期的数字化通信形式。它最初由艾尔菲德维尔和摩尔斯等人构思&#xff0c;通过点、划和中间的停顿&#xff0c;把各个字元以及标点符号彼此独立地发送出去。这种标识不同符号的方案后来被放入摩尔斯的专利中&#xff0…...

Flink 任务启动脚本-V2(包括ck启动)

#!/bin/bash#crontab时设置&#xff0c;如果依赖其他环境变量配置&#xff0c;可以在脚本执行一下环境变量脚本 source /etc/profile# 进入脚本目录 curdirdirname "$0" curdircd "$curdir"; pwd echo "进入启动脚本目录 $curdir"# 定义应用程序…...

16:00面试,16:08就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…...

selinux和防火墙

SElinux 1、selinux简介 SELinux是Security-Enhanced Linux的缩写&#xff0c;意思是安全强化的linux。 SELinux 主要由美国国家安全局&#xff08;NSA&#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 SELinux是对程序、文件等权限设置依据的一个内核模块。…...

Android 13 Aosp Settings Android Studio版本

Android 13 Aosp Settings Android Studio版本 Settings相关源码 Settings https://android.googlesource.com/platform/packages/apps/Settings/+/refs/heads/android13-release SettingsIntelligence https://android.googlesource.com/platform/packages/apps/SettingsIn…...

[241127] Mistral AI 更新 Le Chat,免费提供前沿 AI 助手!| TrendForce 预测 2025 十大科技趋势

目录 Mistral AI 更新 Le Chat&#xff0c;免费提供前沿 AI 助手&#xff01;TrendForce 预测 2025 十大科技趋势 Mistral AI 更新 Le Chat&#xff0c;免费提供前沿 AI 助手&#xff01; Mistral AI 宣布对其免费 AI 助手 Le Chat 进行重大更新&#xff0c;新增多项强大功能&…...

go-carbon v2.5.0 发布,轻量级、语义化、对开发者友好的 golang 时间处理库

carbon 是一个轻量级、语义化、对开发者友好的 Golang 时间处理库&#xff0c;提供了对时间穿越、时间差值、时间极值、时间判断、星座、星座、农历、儒略日 / 简化儒略日、波斯历 / 伊朗历的支持。 carbon 目前已捐赠给 dromara 开源组织&#xff0c;已被 awesome-go 收录&am…...

linux安全管理-账号口令

文章目录 1 设备密码复杂度策略2 设备密码生存周期、最小长度、更改最小间隔天数和过期前警告天数3 使用 PAM 认证禁止指定组之外的用户使用 su 切换到 root4 制作用户权限对照表 1 设备密码复杂度策略 1、配置内容 检查密码复杂度策略中设置的特殊字符、大写字母、小写字母和…...

uni-app自定义底部tab并且根据字段显示和隐藏

首先将所有tab使用到的页面创建好并且在pages里面配置好&#xff0c;要在pages.json中的"tabBar里面配置"custom": true将自带的tab底部导航关闭 "pages": [{"path": "pages/mine/mine","style": {"navigationBa…...

C#开发合集

用C#轻松搞定m3u8视频下载与合并 嘿&#xff0c;程序员们&#xff01;今天咱们来聊聊如何用C#写个小程序&#xff0c;轻松下载和合并m3u8视频文件。没错&#xff0c;就是那种分段的流媒体视频。准备好了吗&#xff1f;让我们开始吧&#xff01; 准备工作 在动手之前&#xf…...

Chrome和edge浏览器如何为任何网站强制暗模式

前言 因为我的编辑器是黑色&#xff0c;可能是看的时间长了比较喜欢这种颜色了&#xff0c;感觉白色有些刺眼。尤其是看文章时&#xff0c;两边的空白纯白色&#xff0c;所以强迫症搜素设置了谷歌浏览器和edge如何设置成黑色。 Chrome和edge浏览器如何为任何网站强制暗模式 前…...

第二十章 Java多线程--JUC并发工具-CountDownLatch

目录 一、CountDownLatch基础概念 CountDownLatch 的核心概念 CountDownLatch 的常用方法 场景一&#xff1a;主线程等待多个子线程执行完毕 场景二&#xff1a;实现多个线程同时开始执行任务 场景三&#xff1a;统计报表优化 CountDownLatch 的局限性 结论 二、Count…...

限制对 etcd 的访问范围是确保 Kubernetes 集群安全的一个重要环节。

限制对 etcd 的访问范围是确保 Kubernetes 集群安全的一个重要环节。通常&#xff0c;etcd 只应当对 Kubernetes 控制平面的组件&#xff08;如 API Server、Controller Manager、Scheduler 等&#xff09;以及某些维护工具&#xff08;如备份工具&#xff09;开放访问权限&…...

shell脚本基础学习_总结篇(完结)

细致观看可以&#xff0c;访问shell脚本学习专栏&#xff0c;对应章节会有配图https://blog.csdn.net/2201_75446043/category_12833287.html?spm1001.2014.3001.5482 导语 一、shell脚本简介 1. 定义&#xff1a; 2. 主要特点&#xff1a; 3. shell脚本的基本结构 4. S…...

Linux之网络基础

网络发展 网络的发展可以从人与人之间的工作模式开始谈起, 人与人的工作模式反应了机器与机器的工作模式: 1. 独立模式: 在网络发展的早期计算机间处于独立模式, 计算机之间相互独立 最开始计算机之间是独立运行的, 数据之间的交互需要人用软盘等存储介质拷贝过去, 一般涉及…...

《Vue零基础入门教程》第十课:属性绑定指令

往期内容 《Vue零基础入门教程》第一课&#xff1a;Vue简介 《Vue零基础入门教程》第二课&#xff1a;搭建开发环境 《Vue零基础入门教程》第三课&#xff1a;起步案例 《Vue零基础入门教程》第四课&#xff1a;应用实例 《Vue零基础入门教程》第五课&#xff1a;挂载 《…...

RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange

前言&#xff1a; RabbitMQ 延迟队列插件&#xff08;rabbitmq_delayed_message_exchange&#xff09;是一个社区开发的插件&#xff0c;它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件&#xff0c;用户可以创建一种特殊的交换机类型 x-delayed-message&#xff0c;该…...

MATLAB中Simulink的基础知识

Simulink是MATLAB中的一种可视化仿真工具&#xff0c; 是一种基于MATLAB的框图设计环境&#xff0c;是实现动态系统建模、仿真和分析的一个软件包&#xff0c;被广泛应用于线性系统、非线性系统、数字控制及数字信号处理的建模和仿真中。 Simulink提供一个动态系统建模、仿真和…...

Swift——单例模式

单例是软件设计常用的一种模式&#xff0c;它的核心结构中只有一个被称为单例的特殊类&#xff0c;通过单例模式可以保证应用该模式的类只有一个实例化对象&#xff0c;其作用就是能够使类中的一个对象成为系统中的唯一实例。 单例的特点&#xff1a; 某个类只有一个实例化对象…...

百度智能云千帆大模型平台引领企业创新增长

本文整理自百度世界大会 2024——「智能跃迁 产业加速」论坛的同名演讲。 更多大会演讲内容&#xff0c;请访问&#xff1a; https://baiduworld.baidu.com 首先&#xff0c;跟大家分享一张图&#xff0c;这个是我们目前大模型应用落地的场景分布。可以看到&#xff0c;大模型…...

scala统计词频

目标&#xff1a;统计词频 &#xff08;1&#xff09;从文件1.tst&#xff0c;读入内容&#xff0c;保存在一个字符串中。 &#xff08;2&#xff09;统计字符串中&#xff0c;每个单词出现的频率 &#xff08;3&#xff09;对结果进行排序 &#xff08;4&#xff09;把最后…...

CTF之密码学(费纳姆密码)

一、作为二进制替换密码的费纳姆密码 定义&#xff1a;费纳姆密码是一种由二进制产生的替换密码&#xff0c;也被称为弗纳姆密码&#xff08;Vernam cipher&#xff09;。它采用二进制表示法&#xff0c;将明文转化为二进制数字&#xff0c;并通过与密钥进行模2加法运算来产生密…...

postgresql按照年月日统计历史数据

1.按照日 SELECT a.time,COALESCE(b.counts,0) as counts from ( SELECT to_char ( b, YYYY-MM-DD ) AS time FROM generate_series ( to_timestamp ( 2024-06-01, YYYY-MM-DD hh24:mi:ss ), to_timestamp ( 2024-06-30, YYYY-MM-DD hh24:mi:ss ), 1 days ) AS b GROUP BY tim…...

Python 网络爬虫进阶:动态网页爬取与反爬机制应对

在上一篇文章中&#xff0c;我们学习了如何使用 Python 构建一个基本的网络爬虫。然而&#xff0c;在实际应用中&#xff0c;许多网站使用动态内容加载或实现反爬机制来阻止未经授权的抓取。因此&#xff0c;本篇文章将深入探讨以下进阶主题&#xff1a; 如何处理动态加载的网…...

YOLOv11融合PIDNet中的PagFM模块及相关改进思路

YOLOv11v10v8使用教程&#xff1a; YOLOv11入门到入土使用教程 YOLOv11改进汇总贴&#xff1a;YOLOv11及自研模型更新汇总 《PIDNet: A Real-time Semantic Segmentation Network Inspired by PID Controllers》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/pdf/2…...

使用Python实现自动化邮件通知:当长时程序运行结束时

使用Python实现自动化邮件通知&#xff1a;当长时程序运行结束时 前提声明 本代码仅供学习和研究使用&#xff0c;不得用于商业用途。请确保在合法合规的前提下使用本代码。 目录 引言项目背景项目设置代码分析 导入所需模块定义邮件发送函数发送邮件 实现步骤结语全部代码…...

smb cifs samba smbpasswd 笔记241127

smb cifs samba smbpasswd 笔记241127 SMB、CIFS和Samba都是与文件共享相关的技术&#xff0c;它们在不同的层面上发挥着作用。以下是关于SMB、CIFS和Samba的详细解释&#xff1a; SMB&#xff08;Server Message Block&#xff09; 定义&#xff1a;SMB&#xff08;Server …...

Spring MVC练习(前后端分离开发实例)

White graces&#xff1a;个人主页 &#x1f649;专栏推荐:Java入门知识&#x1f649; &#x1f439;今日诗词:二十五弦弹夜月&#xff0c;不胜清怨却飞来&#x1f439; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主&#x1f64f; ⛳️点赞 ☀️收藏⭐️关注&#x1f4…...

使用 pycharm 新建不使用 python 虚拟环境( venv、conda )的工程

有时候我们发现一个好玩的 demo&#xff0c;想赶快在电脑上 pip install 一下跑起来&#xff0c;发现因为 python 的 venv、conda 环境还挺费劲的&#xff0c;因为随着时间的发展&#xff0c;之前记得很清楚的 venv、conda 的用法&#xff0c;不经常使用&#xff0c;半天跑不起…...

英语知识网站开发:Spring Boot框架应用

3系统分析 3.1可行性分析 通过对本英语知识应用网站实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本英语知识应用网站采用SSM框架&#xff0c;JAVA作为开发语…...

Pandas 数据读取与导出

Pandas 是一个强大的 Python 库&#xff0c;用于数据处理和分析。它提供了许多函数来读取和导入数据&#xff0c;支持多种文件格式&#xff0c;如 CSV、Excel、SQL 数据库、JSON 等。以下是一些常用的数据读取和导出方法&#xff1a; 常用方法 格式文件格式读取函数写入&…...

Day49 | 动态规划 :线性DP 判断子序列两个字符串的删除操作

Day49 | 动态规划 &#xff1a;线性DP 判断子序列&&两个字符串的删除操作 动态规划应该如何学习&#xff1f;-CSDN博客 动态规划学习&#xff1a; 1.思考回溯法&#xff08;深度优先遍历&#xff09;怎么写 注意要画树形结构图 2.转成记忆化搜索 看哪些地方是重复…...

HDR视频技术之三:色度学与颜色空间

HDR 技术的第二个理论基础是色度学。从前面的内容中可以了解到&#xff0c;光学以及人类视觉感知模型为人类提供了解释与分析人类感知亮度的理论基础&#xff0c;但是 HDR 技术不仅仅关注于提升图像与视频的亮度范围&#xff0c;同时也关注于提供更加丰富的色彩。因此&#xff…...

nginx和netcore加载常见的3D模型

背景 数字孪生带火了3D版的Web世界&#xff0c;3D模型格式也是众多&#xff0c;常见的glb适合web传输&#xff0c;fbx&#xff0c;gltf&#xff0c;obj&#xff0c;unity等常用于模型编辑和处理。我们在用netcore或者wasm加载这些3D模型文件时&#xff0c;一般都需要手工增加M…...

ABAP开发学习——标准GUI状态模板的复制

补充一下创建了GUI状态后复制标准状态的方法 首先创建GUI状态 此时按钮全部都是空的 点击顶部的附加-调整模板 选择列表查看器 应用成功&#xff0c;下一步点击激活即可 另外需要注意&#xff0c;功能键中的三个图标的代码并不是习惯性写的”BACK、EXIT、CANCEL",在这个标…...

酷!用豆包MarsCode 写了一个五子棋小游戏

作者&#xff1a;一起重学前端 前言 2017 年&#xff0c;当时大学三本毕业前端工作一年&#xff0c;去深圳找工作面试&#xff0c;在拉勾上海投&#xff0c;接到某公司前端开发团队回复询问邮箱账号&#xff0c;喜滋滋的以为可以有面试了。一看邮箱&#xff0c;抛给我一道面试…...

IntelliJ IDEA 中,自动导包功能

在 IntelliJ IDEA 中&#xff0c;自动导包功能可以极大地提高开发效率&#xff0c;减少手动导入包所带来的繁琐和错误。以下是如何在 IntelliJ IDEA 中设置和使用自动导包功能的详细步骤&#xff1a; 一、设置自动导包 打开 IntelliJ IDEA&#xff1a; 启动 IntelliJ IDEA 并打…...

c#异步编程(async/await)

注&#xff1a;下文摘自ChatGPT&#xff0c;总结与案例都非常完善&#xff0c;可以快速理解并应用 0&#xff1a;使用场景 在winform界面程序中&#xff0c;在ui操作中涉及到一些耗时的等待操作&#xff0c;使用线程自己处理已经显得力不从心&#xff0c;如何能更好的实现&am…...

使用vcpkg自动链接tinyxml2时莫名链接其他库(例如boost)

使用vcpkg自动链接tinyxml2时莫名链接其他库&#xff08;例如boost&#xff09; vcpkg的自动链接功能非常方便&#xff0c;但在某些情况下会出现过度链接的问题。 链接错误症状 以tinyxml2为例&#xff0c;程序中调用tinyxml2的函数后&#xff0c;若vcpkg中同时存在opencv和…...