前端防范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

这段脚本呢，我就直接这么搞：

xss攻击图6

您别误会，我的本意不是创建一个图片，而是利用图片的src跨域属性，直接把cookie的值，传送到我的php后端代码里面，接下来就可以入库了哈哈~~

by the way，将图片的宽高设置为0，用户是不会看到这个图片的，因此这段js一旦注入生效，所有的用户都会触发这个js，从而将自己的cookie源源不断的输送到我的php代码中。

二、防范

好了，原理有了一定的了解之后，接下来就是如何防范了。

问题的源头在于js代码的注入，我们可以想个办法，不让js生效不就行了？

大家要注意两头的防范：

1）输入。

在提交表单时，前端最好将文本内容转为html实体编码，也就是过滤掉<script>、<a>、这样的内容，然后再提交到后台去。当然保险起见，后台也要再做一遍html实体转码，然后再入库。

2）输出。

在显示文本内容时，最好也要做一次html实体编码转换后再显示，防止<script>标签生效。

三、手段

这里给大家介绍一种简单的处理办法。

1、如果您是用的vue、react或node。

安装：

$ npm install xss --save

使用：

xss攻击图7

2、也可以直接在页面引用。

引入文件：

https://raw.github.com/leizongmin/js-xss/master/dist/xss.js

使用：

xss攻击图8

四、实现原理

实现的原理也很简单，就是过滤掉不该有的标签即可，我们可以这样来写：

xss攻击图9

大家可以顺着这个思路，自己动手写一个这样的函数。