防CSRF攻击：一场由重复提交的问题引发的前端后端测试口水战

重复提交，这是一直以来都会存在的问题，当在网站某个接口调用缓慢的时候就会有可能引起表单重复提交的问题，不论form提交，还是ajax提交都会有这样的问题，最近在某社交app上看到这么一幕，这个团队没有做重复提交的验证，从而导致了数据有很多的重复提交，在这里我们不讨论谁对谁错，问题解决即可。

首先的一种方式，在前端加入loading，或者是blockUI，在ios以及安卓上也是类似，效果如下：

这个时候整个页面不能再用鼠标点击，只能等待请求响应以后才能操作

具体可以参考blockUI这个插件

此外就是后端了，其实后端在一定程度上也要进行防止重复提交的验证，某些无所谓的情况下可以在前端加，某些重要的场景下比如订单等业务就必须再前后端都要做，为了测试方便，blockUI就直接注释

在后台我们线程sleep5秒

多次点击，效果如下

步骤1：页面生成token，每次进入都需要重新生成

设置自定义标签

页面生成

查看redis

拦截器代码：

测试：

这样重复提交的问题就解决了，同时也解决了CSRF攻击的问题，关于什么是CSRF可以自行百度

*注意：

1、token生成也可以在异步调用的时候生成，也就是一次请求一个token，而不是一个页面一个token，但是这样做可能会被第三方获取

2、这里使用了springmvc的拦截器，当然在shiro中也可以自定义过滤器来实现，代码略