Web富文本编辑器 wangeditor 解决 XSS 攻击方法

标题Web富文本编辑器 wangeditor 解决 XSS 攻击方法

在终端执行如下命令安装 xss 依赖

npm install xss -S

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

import xss from 'xss'

找到 wangeditor 实例

<template>
	<div>
		<div ref="myEditor" style="width: 100%">
		</div>
	</div>
</template>

import xss from 'xss'
import wangeditor from 'wangeditor'

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
			let safeContent = xss(content) // 进行xss攻击过滤
			editorInstance.txt.html(safeContent)
		}
	})
}