防止表单重复提交的解决方案整理汇总 使用Session防止表单重复提交

zgq123456

用户在操作表单Post数据时往往会出现表单数据重复提交的问题，尤其在Web开发中此类问题比较常见。刷新页面，后退操作以前的页面，单机多次按钮都会导致数据重复提交。此类问题是因为浏览器重复提交HTTP请求导致。

 公众号原文

下面列出了四种比较常用的解决方案：

1、在数据库添加唯一字段

　　　在数据库建表的时候在ID字段添加主键约束，账号，名称的信息添加唯一性约束。确保数据库只可以添加一条数据。

此方法从根本上的防止了数据重复提交。

 

2、用js为添加按钮禁用

 

　　当用户提交表单之后，可以使用js将提交按钮隐藏（disable属性），防止用户多次点击按钮提交数据。

　　  注意：如果客户端禁用了js，则此方法无效。

 

3、使用Post/Redirect/Get

 

Post/Redirect/Get简称PRG，是一种可以防止表单数据重复提交的一种Web设计模式，像用户刷新提交响应页面等比较典型的重复提交表单数据的问题可以使用PRG模式来避免。例如：当用户提交成功之后，执行客户端重定向，跳转到提交成功页面。

注意：PRG设计模式并不适用所有的重复提交情况，比如：

1）由于服务器响应缓慢，用户刷新提交POST请求造成的重复提交。

2）用户点击后退按钮，返回到数据提交界面，导致的数据重复提交。

3）用户多次点击提交按钮，导致的数据重复提交。

4）用户恶意避开客户端预防多次提交手段，进行重复数据提交。

4、使用Session设置令牌

 

客户端请求页面时，服务器为每次产生的Form表单分配唯一的随机标识号，并且在orm的一个隐藏字段中设置这个标识号，同时在当前用户的Session中保存这个标识号。当提交表单时，服务器比较hidden和session中的标识号是否相同，相同则继续，处理完后清空Session，否则服务器忽略请求。

注意：恶意用户可利用这一性质，不断重复访问页面，以致Session中保存的标识号不断增多，最终严重消耗服务器内存。可以采用在Session中记录用户发帖的时间，然后通过一个时间间隔来限制用户连续发帖的数量来解决这一问题。

 

3、在session中存放一个特殊标志。

在服务器端，生成一个唯一的标识符，将它存入session，同时将它写入表单的隐藏字段中，然后将表单页面发给浏览器，用户录入信息后点击提交，在服务器端，获取表单中隐藏字段的值，与session中的唯一标识符比较，相等说明是首次提交，就处理本次请求，然后将session中的唯一标识符移除；不相等说明是重复提交，就不再处理。

这使你的web应用有了更高级的XSRF保护。

请见如下代码：

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <?php  
  2. session_start();  
  3. //根据当前SESSION生成随机数  
  4. $code = mt_rand(0,1000000);  
  5. $_SESSION[\'code\'] = $code;  
  6. ?>  
  7. 在页面表单上将随机数作为隐藏值进行传递，代码如下：  
  8. <input type="hidden" name="originator" value="<?=$code?>">  
  9.    
  10.     在接收页面的PHP代码如下：  
  11.    
  12. <?php  
  13. session_start();  
  14. if(isset($_POST[\'originator\'])) {  
  15. if($_POST[\'originator\'] == $_SESSION[\'code\']){  
  16. // 处理该表单的语句，省略  
  17. }else{  
  18. echo ‘请不要刷新本页面或重复提交表单！’;  
  19. }  
  20. }  
  21. ?>  

 

4．使用header函数转向

除了上面的方法之外，还有一个更简单的方法，那就是当用户提交表单，服务器端处理后立即转向其他的页面，代码如下所示。

if (isset($_POST[\'action\']) && $_POST[\'action\'] == \'submitted\') {

//处理数据，如插入数据后，立即转向到其他页面

header(\'location:submits_success.PHP\');

}

这样，即使用户使用刷新键，也不会导致表单的重复提交，因为已经转向新的页面，而这个页面脚本已经不理会任何提交的数据了。

5.表单过期的处理

在开发过程中，经常会出现表单出错而返回页面的时候填写的信息全部丢失的情况，为了支持页面回跳，可以通过以下两种方法实现。

1．使用header头设置缓存控制头Cache-control。

header(\'Cache-control: private, must-revalidate\'); //支持页面回跳

2．使用session_cache_limiter方法。

session_cache_limiter(\'private, must-revalidate\'); //要写在session_start方法之前

下面的代码片断可以防止用户填写表单的时候，单击“提交”按钮返回时，刚刚在表单上填写的内容不会被清除：

session_cache_limiter(\'nocache\');

session_cache_limiter(\'private\');

session_cache_limiter(\'public\');

session_start();

//以下是表单内容，这样在用户返回该表单时，已经填写的内容不会被清空

将该段代码贴到所要应用的脚本顶部即可。

Cache-Control消息头域说明

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。

请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh和only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate和max-age。各个消息中的指令含义如表5-3所示。

表5-3

缓存指令

说 明

public

指示响应可被任何缓存区缓存

private

指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效

no-cache

指示请求或响应消息不能缓存

no-store

用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存

max-age

指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应

min-fresh

指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale

指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息

有关Session和Cookie的介绍，详细内容请参阅第10章“PHP会话管理”。

6.判断表单动作的技巧

表单可以通过同一个程序来分配应该要处理的动作，在表单中有不同的逻辑，要怎么判别使用者按下的按钮内容不过是个小问题。

其实只要通过提交按钮的name 就可以知道了，表单在提交出去的时候，只有按下的submit类型的按钮才会被送到表单数组去，所以只要判断按钮的值就可以知道使用者按下哪一个按钮，以如下表单为例：

<FORM method="POST" Action=test.php>

<input type=submit name="btn" value="a">

<input type=submit name="btn" value="b">

</FORM>

当使用者按下“a”按钮的时候btn=a，按下“b”按钮，则btn=b。

另外也可以通过提交按钮的名字（name）来判断，请见如下代码：

<FORM method="POST" Action=test.php>

<input type=submit name="a" value="提交A">

<input type=submit name="b" value="提交B">

</FORM>

这样只要POST/GET的参数里面有a或b，就可以知道按下的按钮是哪个。

<?php

print_r($_POST);

?>

 

7、在数据库里添加约束。

在数据库里添加唯一约束或创建唯一索引，防止出现重复数据。这是最有效的防止重复提交数据的方法。

你是如何克服数据重复提交问题的？你遇到过什么重复提交数据的现实例子吗？

转载自：http://www.bkjia.com/jingyan/471187.html

5.使用客户端脚本

提到客户端脚本，经常使用的是JavaScript进行常规输入验证。在下面的例子中，我们使用它处理表单的重复提交问题，请看下面的代码：

<form method="post" name="register" action="test.php" enctype="multipart/form-data">

<input name="text" type="text" id="text" />

<input name="cont" value="提交" type="button" onClick="document.register.cont.value=\'正在提交,请等待...\';document.register.cont.disabled=true;document.the_form.submit();">

</form>

当用户单击“提交”按钮后，该按钮将变为灰色不可用状态。

上面的例子中使用OnClick事件检测用户的提交状态，如果单击了“提交”按钮，该按钮立即置为失效状态，用户不能单击按钮再次提交。

 

8.使用Cookie处理

使用Cookie记录表单提交的状态，根据其状态可以检查是否已经提交表单，请见下面的代码：

<?php

if(isset($_POST[\'Go\'])){

setcookie("tempcookie","",time()+30);

header("Location:".$_SERVER[PHP_SELF]);

exit();

}

if(isset($_COOKIE["tempcookie"])){

setcookie("tempcookie","",0);

echo "您已经提交过表单";

}

?>

如果客户端禁止了Cookie，该方法将不起任何作用，这点请注意。关于Cookie的详细介绍，请参阅第10章“PHP会话管理”。

PS：这几种防止重复提交表单的方法可以做参考，自己使用过第一种方式来防止表单多次提交。

 

在平时开发中，如果网速比较慢的情况下，用户提交表单后，发现服务器半天都没有响应，那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，我们在开发中必须防止表单重复提交。

一、表单重复提交的常见应用场景

有如下的form.jsp页面

复制代码
 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML>
 3 <html>
 4   <head>
 5     <title>Form表单</title>
 6   </head>
 7   
 8   <body>
 9       <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" method="post">
10         用户名：<input type="text" name="username">
11         <input type="submit" value="提交" id="submit">
12     </form>
13   </body>
14 </html>
复制代码

　　form表单提交到DoFormServlet进行处理

复制代码
 1 package xdp.gacl.session;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 public class DoFormServlet extends HttpServlet {
10 
11     public void doGet(HttpServletRequest request, HttpServletResponse response)
12             throws ServletException, IOException {
13         //客户端是以UTF-8编码传输数据到服务器端的，所以需要设置服务器端以UTF-8的编码进行接收，否则对于中文数据就会产生乱码
14         request.setCharacterEncoding("UTF-8");
15         String userName = request.getParameter("username");
16         try {
17             //让当前的线程睡眠3秒钟，模拟网络延迟而导致表单重复提交的现象
18             Thread.sleep(3*1000);
19         } catch (InterruptedException e) {
20             e.printStackTrace();
21         }
22         System.out.println("向数据库中插入数据："+userName);
23     }
24 
25     public void doPost(HttpServletRequest request, HttpServletResponse response)
26             throws ServletException, IOException {
27         doGet(request, response);
28     }
29 
30 }
复制代码

　　如果没有进行form表单重复提交处理，那么在网络延迟的情况下下面的操作将会导致form表单重复提交多次

1.1、场景一：在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交

　　演示动画如下所示：

 1.2、场景二：表单提交后用户点击【刷新】按钮导致表单重复提交

演示动画如下所示：

　　点击浏览器的刷新按钮，就是把浏览器上次做的事情再做一次，因为这样也会导致表单重复提交。

1.3、场景三：用户提交表单后，点击浏览器的【后退】按钮回退到表单页面后进行再次提交

演示动画如下所示：

二、利用JavaScript防止表单重复提交

　　既然存在上述所说的表单重复提交问题，那么我们就要想办法解决，比较常用的方法是采用JavaScript来防止表单重复提交，具体做法如下：

修改form.jsp页面，添加如下的JavaScript代码来防止表单重复提交

复制代码
 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML>
 3 <html>
 4   <head>
 5     <title>Form表单</title>
 6         <script type="text/javascript">
 7         var isCommitted = false;//表单是否已经提交标识，默认为false
 8         function dosubmit(){
 9             if(isCommitted==false){
10                 isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
11                 return true;//返回true让表单正常提交
12             }else{
13                 return false;//返回false那么表单将不提交
14             }
15         }
16     </script>
17   </head>
18   
19   <body>
20       <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" onsubmit="return dosubmit()" method="post">
21         用户名：<input type="text" name="username">
22         <input type="submit" value="提交" id="submit">
23     </form>
24   </body>
25 </html>
复制代码

　　我们看看使用了JavaScript来防止表单提交重复是否可以成功，运行效果如下：

　　可以看到，针对"在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交"这个应用场景，使用JavaScript是可以解决这个问题的，解决的做法就是"用JavaScript控制Form表单只能提交一次"。

　　除了用这种方式之外，经常见的另一种方式就是表单提交之后，将提交按钮设置为不可用，让用户没有机会点击第二次提交按钮，代码如下：

复制代码
1 function dosubmit(){
2     //获取表单提交按钮
3     var btnSubmit = document.getElementById("submit");
4     //将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
5     btnSubmit.disabled= "disabled";
6     //返回true让表单可以正常提交
7     return true;
8 }
复制代码

运行效果如下：

 　　另外还有一种做法就是提交表单后，将提交按钮隐藏起来，这种做法和将提交按钮设置为不可用是差不多的，个人觉得将提交按钮隐藏影响到页面布局的美观，并且可能会让用户误以为是bug(怎么我一点击按钮，按钮就不见了呢？用户可能会有这样的疑问)，我个人在开发中用得比较多的是表单提交后，将提交按钮设置为不可用，反正使用JavaScript防止表单重复提交的做法都是差不多的，目的都是让表单只能提交一次，这样就可以做到表单不重复提交了。

　　使用JavaScript防止表单重复提交的做法只对上述提交到导致表单重复提交的三种场景中的【场景一】有效，而对于【场景二】和【场景三】是没有用，依然无法解决表单重复提交问题。

三、利用Session防止表单重复提交

　　对于【场景二】和【场景三】导致表单重复提交的问题，既然客户端无法解决，那么就在服务器端解决，在服务器端解决就需要用到session了。

　　具体的做法：在服务器端生成一个唯一的随机标识号，专业术语称为Token(令牌)，同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的Form表单中，在Form表单中使用隐藏域来存储这个Token，表单提交的时候连同这个Token一起提交到服务器端，然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致，如果不一致，那就是重复提交了，此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交，处理完后清除当前用户的Session域中存储的标识号。
　　在下列情况下，服务器程序将拒绝处理用户提交的表单请求：

  1. 存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。
  2. 当前用户的Session中不存在Token(令牌)。
  3. 用户提交的表单数据中没有Token(令牌)。

看具体的范例：

　　1.创建FormServlet，用于生成Token(令牌)和跳转到form.jsp页面

复制代码
 1 package xdp.gacl.session;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 public class FormServlet extends HttpServlet {
10     private static final long serialVersionUID = -884689940866074733L;
11 
12     public void doGet(HttpServletRequest request, HttpServletResponse response)
13             throws ServletException, IOException {
14 
15         String token = TokenProccessor.getInstance().makeToken();//创建令牌
16         System.out.println("在FormServlet中生成的token："+token);
17         request.getSession().setAttribute("token", token);  //在服务器使用session保存token(令牌)
18         request.getRequestDispatcher("/form.jsp").forward(request, response);//跳转到form.jsp页面
19     }
20 
21     public void doPost(HttpServletRequest request, HttpServletResponse response)
22             throws ServletException, IOException {
23         doGet(request, response);
24     }
25 
26 }
复制代码

　　2.在form.jsp中使用隐藏域来存储Token(令牌)

复制代码
 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4 <head>
 5 <title>form表单</title>
 6 </head>
 7 
 8 <body>
 9     <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" method="post">
10         <%--使用隐藏域存储生成的token--%>
11         <%--
12             <input type="hidden" name="token" value="<%=session.getAttribute("token") %>">
13         --%>
14         <%--使用EL表达式取出存储在session中的token--%>
15         <input type="hidden" name="token" value="${token}"/> 
16         用户名：<input type="text" name="username"> 
17         <input type="submit" value="提交">
18     </form>
19 </body>
20 </html>
复制代码

　　3.DoFormServlet处理表单提交

复制代码
 1 package xdp.gacl.session;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 public class DoFormServlet extends HttpServlet {
10 
11     public void doGet(HttpServletRequest request, HttpServletResponse response)
12                 throws ServletException, IOException {
13 
14             boolean b = isRepeatSubmit(request);//判断用户是否是重复提交
15             if(b==true){
16                 System.out.println("请不要重复提交");
17                 return;
18             }
19             request.getSession().removeAttribute("token");//移除session中的token
20             System.out.println("处理用户提交请求！！");
21         }
22         
23         /**
24          * 判断客户端提交上来的令牌和服务器端生成的令牌是否一致
25          * @param request
26          * @return 
27          *         true 用户重复提交了表单 
28          *         false 用户没有重复提交表单
29          */
30         private boolean isRepeatSubmit(HttpServletRequest request) {
31             String client_token = request.getParameter("token");
32             //1、如果用户提交的表单数据中没有token，则用户是重复提交了表单
33             if(client_token==null){
34                 return true;
35             }
36             //取出存储在Session中的token
37             String server_token = (String) request.getSession().getAttribute("token");
38             //2、如果当前用户的Session中不存在Token(令牌)，则用户是重复提交了表单
39             if(server_token==null){
40                 return true;
41             }
42             //3、存储在Session中的Token(令牌)与表单提交的Token(令牌)不同，则用户是重复提交了表单
43             if(!client_token.equals(server_token)){
44                 return true;
45             }
46             
47             return false;
48         }
49 
50     public void doPost(HttpServletRequest request, HttpServletResponse response)
51             throws ServletException, IOException {
52         doGet(request, response);
53     }
54 
55 }
复制代码

　　生成Token的工具类TokenProccessor

复制代码
 1 package xdp.gacl.session;
 2 
 3 import java.security.MessageDigest;
 4 import java.security.NoSuchAlgorithmException;
 5 import java.util.Random;
 6 import sun.misc.BASE64Encoder;
 7 
 8 public class TokenProccessor {
 9 
10     /*
11      *单例设计模式（保证类的对象在内存中只有一个）
12      *1、把类的构造函数私有
13      *2、自己创建一个类的对象
14      *3、对外提供一个公共的方法，返回类的对象
15      */
16     private TokenProccessor(){}
17     
18     private static final TokenProccessor instance = new TokenProccessor();
19     
20     /**
21      * 返回类的对象
22      * @return
23      */
24     public static TokenProccessor getInstance(){
25         return instance;
26     }
27     
28     /**
29      * 生成Token
30      * Token：Nv6RRuGEVvmGjB+jimI/gw==
31      * @return
32      */
33     public String makeToken(){  //checkException
34         //  7346734837483  834u938493493849384  43434384
35         String token = (System.currentTimeMillis() + new Random().nextInt(999999999)) + "";
36         //数据指纹   128位长   16个字节  md5
37         try {
38             MessageDigest md = MessageDigest.getInstance("md5");
39             byte md5[] =  md.digest(token.getBytes());
40             //base64编码--任意二进制编码明文字符   adfsdfsdfsf
41             BASE64Encoder encoder = new BASE64Encoder();
42             return encoder.encode(md5);
43         } catch (NoSuchAlgorithmException e) {
44             throw new RuntimeException(e);
45         }
46     }
47 }
复制代码

　　首先访问FormServlet，在FormServlet中生成Token之后再重定向到form.jsp页面，这次是在服务器端处理表单重复提交的，运行效果如下：

　　从运行效果中可以看到，通过这种方式处理表单重复提交，可以解决上述的场景二和场景三中出现的表单重复提交问题。

 

防止表单重复提交的一般操作是
1.用户成功登录系统之后，后台生成一个唯一的token值，该值存储在session中，同时返回给前端。
2.前端在登录成功的回调里获取到该token值之后将该值存储在sessionStorage里。
3.前端统一拦截ajax请求，在http的请求header中添加存储在sessionStorage里的token。
4.在需要防止重复提交的请求api前判断存储在session里的token值和请求头里的token值是否相等，若相等视为第一次请求，进行相应的业务处理，之后重新生成token值更新session，然后发送给前端（前端操作同步骤2）。若不相等则拦截该请求不进行业务处理

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode