|
前端安全简介 XSS又叫CSS (Cross Site Script) ,跨站脚本攻击 XSS是一种发生在Web前端的漏洞，所以其危害的对象也主要是前端用户 XSS漏洞可以用来进行钓鱼攻击、前端js挖矿、盗取用户cookie，甚至对主机进行远程控制 攻击流程 假设存在漏洞的是一个论坛，攻击者将恶意的JS代码通过XSS漏洞插入到论文的某一页面中 当用户访问这个页面时，都会执行这个恶意的JS代码，这个代码就会在用户的浏览器端执行 XSS攻击类型危害：存储型 > 反射型 > DOM型 反射型：交互的数据一般不会被存在数据库里面，一次性，所见即所得，一般出现在查询页面等 存储型：交互的数据会被存在数据库里面，永久性存储，一般出现在留言板，注册等页面 DOM型：不与后台服务器产生数据交互，是一种通过DOM操作前端代码输出的时候产生的问题，一次性，也属于反射型
XSS形成原因 形成XSS漏洞的 主要原因是程序中输入和输出的控制不够严格 导致“精心构造”的脚本输入后，在输出到前端时被浏览器当作有效代码解析执行 常见的漏洞场景 登录，注册，搜索，留言一切表单的行为，过滤<>""/() (srcipt)(srcipt) 解析成html标签 如：&qt <> <script>alert("xss")</script>
<script>alert(document.cookie)</script>
<script>alert(window.localStorage.getItem("key"))</script>
'> v-html 出现xss问题 方法1：
<p v-html="$xss(test)"></p>
import xss from 'xss'
export default {
data () {
return {
test: `<a onclick='alert("xss攻击")'>链接</a>`
}
}
Object.defineProperty(Vue.prototype, '$xss', {
value: xss
})
方法2：
安装
cnpm install vue-dompurify-html
引入
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)
使用
<div v-dompurify-html="rawHtml"></div>
方法3：
<div id="box">
<input type="text" v-model="msg | filterHtml">
<br>
<label v-html="msg"></label>
</div>
Vue.filter('filterHtml',{
read:function(val){//val就是以获取的msg的值
return val.replace(/<[^>]*>/g);//去除文字的<...></...>标签
},
write:function(){
return val;
}
}); 执行效果截图：
攻击代码
| 
收藏
淘帖
踩
