vue 如何防止xss攻击 框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...

Vue中防止XSS脚本攻击

最近写了一个博客评论模块，因为引入了表情包，所以就将原来的v-text的形式，改成了v-html，也就是渲染html标签，但是这样不可不免的会带来问题，就是XSS跨站脚本攻击

XSS解决方案官网：点我传送

XSS脚本攻击

跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页面时，嵌入Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。XSS攻击针对的是用户层面的攻击！

例如我在评论框输入以下内容

链接

这个时候评论就会出现一个超链接

只要我们点击这个链接后，就会出现一个alert弹框

上面代码因为写的的是循环10次后，alert消失，但是如果是while(true)，那么后果不堪设想，会进入无止无休的弹框

解决XSS脚本攻击

首先需要安装xss模块

npm install xss --save

然后在main.js中引入

import xss from 'xss'

// 定义全局XSS解决方法

Object.defineProperty(Vue.prototype, '$xss', {

value: xss

})

然后针对需要渲染的页面，调用$xss()方法

我们在点击刚刚的页面，发现已经不会有弹框了，但是有出来了新的问题，就是我引入的标签也被过滤了

引入xss后

这个时候，我们就需要自定义拦截规则了，我们在data中添加如下配置，下面是自定义白名单，也就是什么标签以及标签的属性能够正常使用，其它的都会被拦截

data() {

return {

// xss白名单配置

options : {

whiteList: {

a: ['href', 'title', 'target'],

span: ['class']

}

}

};

},

然后在使用的时候，增加option配置

这个时候，表情已经成功显示了，并且原来的脚本攻击也不生效，达到了我们的目的~