vue 如何防止xss攻击 框架_前端防范xss攻击的实用方案

一、xss攻击原理

大家想必都听过xss攻击，那么这个xss到底是如何攻击、我们又应该如何防范的呢？

xss攻击主要是针对表单的input文本框发起的，比如有这样一个文本框：

xss攻击图1

在说明一栏填入一段js代码，如果前端不进行过滤直接提交到后端(比如php)，而php端也没有进行过滤直接入库，那么在下一个展示页面，就会发生这样的情况：

xss攻击图2

为什么会酱紫呢？

因为我们在说明这一栏的input，会将后端返回的内容直接追加进去，导致js代码执行。

可能有同学会不屑一顾：

你弹个框又能怎样呢？大不了我关了就是了呗！

那假设是cookie这样的敏感信息呢？我们不妨来做个试验：

xss攻击图3

执行代码：

xss攻击图4

这样就可以获取到一个用户的cookie了。那再进一步，如果把所有的cookie都想办法弄出来，然后存到自己的库里面的话。。。

想想挺带劲的哈，咱们不妨动手搞一下。

我们可以直接注入这样一段js脚本：

xss攻击图5</