VUE常用的MARKDOWN插件MAVON-EDITOR,如何避免XSS攻击?

Vue常用的markdown的插件有mavon-editor, 但是我们在安装的时候,往往会被告知该插件存在隐藏的XSS攻击危险。那么如何避免XSS攻击呢?

安装markdown:
npm install mavon-editor --save
93035-84dz1hbmz5h.png
接下来介绍一款XSS防范插件XSS,可以在npm仓库直接下载。
https://github.com/Kylelkh/js-xss

安装命令:npm install xss --save
在Vue页面引入xss
import xss from 'xss'

测试攻击的代码:
<p v-html="testHtml"></p>

export default {
data () {

return {
testHtml: <a onclick='alert("xss攻击啦@@")'>点击</a>
}

防御demo:

<p v-html="$xss(testHtml)"></p>
import xss from 'xss'
export default {
data () {

return {
testHtml: <a onclick='alert("xss攻击啦@@")'>点击</a>
}
}

Object.defineProperty(Vue.prototype, '$xss', {
value: xss
})