做的好的大学生旅行有哪些网站好,网站开发流程视频,池州网站建设怎么样,网络营销的5种方式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 的地… 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 -S2.2 在使用 wangeditor 的地方引入 xss 依赖
import xss from xss2.3 xss 依赖使用示例
templatedivdiv refmyEditor stylewidth: 100%/div/div
/templatescript langts setup
import xss from xss
import wangeditor from wangeditorlet 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
