Vue常用的Markdown插件mavon-editor,如何避免XSS攻击?

September 21, 2020 by 刘大辉在路上

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

安装markdown:
npm install mavon-editor --save
截图.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
})