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

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

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

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

具体可以参考blockUI这个插件

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

在后台我们线程sleep5秒

@RequestMapping("/CSRFDemo/save")

@ResponseBodypublicLeeJSONResult saveCSRF(Feedback feedback) {

log.info("保存用户反馈成功, 入参为 Feedback.title: {}", feedback.getTitle());try{

Thread.sleep(5000);

}catch(InterruptedException e) {

e.printStackTrace();

}returnLeeJSONResult.ok();

}

多次点击，效果如下

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

设置自定义标签

packagecom.javasxy.web.tag;importjava.io.IOException;importjava.io.StringWriter;importjava.util.UUID;importjavax.servlet.jsp.JspException;importjavax.servlet.jsp.JspWriter;importjavax.servlet.jsp.tagext.Sim