npm库xss依赖的使用方法和vue3 中Web富文本编辑器 wangeditor 使用xss库解决 XSS 攻击的方法

npm库xss依赖的使用方法和vue3 中Web富文本编辑器 wangeditor 使用xss库解决 XSS 攻击的方法

    • [1. npm库xss依赖的使用方法](#1. npm库xss依赖的使用方法)
      • [1.1 xss库定义](#1.1 xss库定义)
      • [1.2 xss库功能](#1.2 xss库功能)
    • [2. vue3 中 wangeditor 使用xss库解决 XSS 攻击的方法和示例](#2. vue3 中 wangeditor 使用xss库解决 XSS 攻击的方法和示例)
      • [2.1 在终端执行如下命令安装 xss 依赖](#2.1 在终端执行如下命令安装 xss 依赖)
      • [2.2 在使用 wangeditor 的地方引入 xss 依赖](#2.2 在使用 wangeditor 的地方引入 xss 依赖)
      • [2.3 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 依赖

bash 复制代码
npm install xss -S

2.2 在使用 wangeditor 的地方引入 xss 依赖

bash 复制代码
import xss from 'xss'

2.3 xss 依赖使用示例

javascript 复制代码
<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.config
	config.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} = res
		if(code === '000') {
			let {id, content} = data
			mailData.id = id
			// 不定义白名单,也不自定义处理函数时,采用xss库默认的过滤规则
			let safeContent = xss(content) // 进行xss攻击过滤
			editorInstance.txt.html(safeContent)
		}
	})
}
</script>
相关推荐
EndingCoder1 分钟前
Three.js 与 WebXR:初识 VR/AR 开发
开发语言·前端·javascript·ar·vr
懋学的前端攻城狮20 分钟前
深入浅出Vue源码 - 剖析diff算法的核心实现
前端·vue.js·前端框架
JuneXcy21 分钟前
9.项目起步(3)
javascript·vue
小沙盒32 分钟前
使用js把txt的url列表转换成html列表
前端·javascript·html
超浪的晨43 分钟前
JavaWeb 进阶:Vue.js 与 Spring Boot 全栈开发实战(Java 开发者视角)
java·开发语言·前端·javascript·vue.js·html·个人开发
开开心心就好1 小时前
PDF转图片工具,一键转换高清无损
服务器·前端·智能手机·r语言·pdf·excel·batch
Java手札1 小时前
安装如下依赖(package.json 未包含):vueelement-plusecharts@element-plus/icons-vue
前端·javascript·vue.js
EndingCoder1 小时前
Three.js + AI:结合 Stable Diffusion 生成纹理贴图
开发语言·前端·javascript·人工智能·stable diffusion·ecmascript·three.js
haruma sen2 小时前
VUE前端
前端
汪叽家的兔子羡2 小时前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite