前端防范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实体编码，也就是过滤掉