表单防重复提交方法详解：JS与Token双重防护

有志者，事竟成！如果你在学习文章，那么本文《HTML表单防重复提交的实现方法主要有以下几种：一、使用 JavaScript 阻止重复点击通过 JavaScript 禁用提交按钮，防止用户多次点击。

<input type="submit" name="submitBtn" value="提交">

优点： 简单有效，适合前端控制。缺点： 用户可通过禁用 JS 或刷新页面绕过。二、使用 唯一提交令牌（Token）在服务器端生成一个唯一 Token，并将其作为隐藏字段发送到客户端。每次提交时验证该 Token，确保只处理一次请求。实现步骤：生成 Token（服务端）：// PHP 示例 session_start(); $_SESSION['token'] = md5(uniqid(rand(), true));将 Token 添加到表单中：

<input type="hidden" name="token" value="<?php echo $_SESSION['token']; ?>"><input type="submit" value="提交">

验证 Token（服务端）： // submit.php session_start(); if ($_SERVER['REQUEST_METHOD']》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

防止表单重复提交的核心方法是令牌机制，通过服务器生成唯一令牌并存储在会话中，表单提交时验证并删除令牌，确保每次提交唯一有效。

防止HTML表单重复提交，核心在于确保每次提交都是唯一且有效的。通常通过令牌机制、禁用提交按钮、或者在服务器端进行校验来实现。

解决方案：

令牌机制 (Token-Based Approach)

这是最常见且可靠的方法。它的原理是为每个表单生成一个唯一的令牌，并在服务器端验证该令牌。

1. 生成令牌：

   在服务器端，使用一个随机数生成器（例如，uuid库在Python中，或者java.util.UUID在Java中）生成一个唯一的字符串。将此令牌存储在用户的会话中。

   import uuid
   from flask import session
   
   def generate_token():
       token = str(uuid.uuid4())
       session['csrf_token'] = token
       return token

   import java.util.UUID;
   import javax.servlet.http.HttpSession;
   
   public String generateToken(HttpSession session) {
       String token = UUID.randomUUID().toString();
       session.setAttribute("csrf_token", token);
       return token;
   }

2. 将令牌添加到表单：

   将生成的令牌作为一个隐藏字段添加到HTML表单中。

   <form method="post" action="/submit">
       &lt;input type=&quot;hidden&quot; name=&quot;csrf_token&quot; value=&quot;{{ csrf_token }}&quot;&gt;
       <!-- 其他表单字段 -->
       <button type="submit">提交</button>
   </form>

3. 验证令牌：

   当表单提交到服务器时，从请求中获取令牌，并与存储在会话中的令牌进行比较。如果匹配，则处理表单数据，并从会话中删除该令牌。如果不匹配，则拒绝请求。

   from flask import request, session, redirect, url_for
   
   @app.route('/submit', methods=['POST'])
   def submit():
       token = request.form.get('csrf_token')
       if not token or token != session.get('csrf_token'):
           return "Invalid CSRF token", 400
   
       session.pop('csrf_token', None)  # 删除令牌，防止重复提交
   
       # 处理表单数据
       return "Form submitted successfully!"

   import javax.servlet.http.HttpServletRequest;
   import javax.servlet.http.HttpSession;
   
   public boolean validateToken(HttpServletRequest request) {
       HttpSession session = request.getSession();
       String token = request.getParameter("csrf_token");
       String sessionToken = (String) session.getAttribute("csrf_token");
   
       if (token != null && token.equals(sessionToken)) {
           session.removeAttribute("csrf_token"); // 删除令牌
           return true;
       }
       return false;
   }

禁用提交按钮 (Disable Submit Button)

这是一种简单的客户端方法，虽然不如令牌机制可靠，但在某些情况下也很有用。

1. 禁用按钮：

   当用户点击提交按钮时，立即禁用该按钮。

   const submitButton = document.getElementById('submitButton');
   
   submitButton.addEventListener('click', function() {
       this.disabled = true;
       this.form.submit(); // 确保表单提交
   });

   <button type="submit" id="submitButton">提交</button>

2. 防止JavaScript失效：

   为了防止JavaScript失效导致按钮无法禁用，可以在服务器端验证表单是否已经处理过。

服务器端校验 (Server-Side Validation)

在服务器端，记录已处理的表单提交。可以使用数据库或缓存来存储已处理的表单的唯一标识符（例如，基于用户ID和时间戳的组合）。当收到新的提交时，检查其标识符是否已存在。

如何处理AJAX表单的重复提交？

对于AJAX表单，令牌机制仍然适用，但需要在AJAX请求中包含令牌。

1. 获取令牌：

   从HTML表单中获取令牌。

   const csrfToken = document.querySelector('input[name="csrf_token"]').value;

2. 添加到请求头或数据：

   将令牌添加到AJAX请求的头部或数据中。

   fetch('/submit', {
       method: 'POST',
       headers: {
           'Content-Type': 'application/json',
           'X-CSRF-Token': csrfToken  // 添加到请求头
       },
       body: JSON.stringify({
           // 表单数据
           'data': 'some data'
       })
   })
   .then(response => {
       // 处理响应
   });

   或者，将令牌添加到请求数据中：

   fetch('/submit', {
       method: 'POST',
       headers: {
           'Content-Type': 'application/json'
       },
       body: JSON.stringify({
           // 表单数据
           'data': 'some data',
           'csrf_token': csrfToken  // 添加到请求数据
       })
   })
   .then(response => {
       // 处理响应
   });

3. 服务器端验证：

   服务器端验证令牌的方式与普通表单相同。

令牌的存储位置：Session还是Cookie？

通常建议将令牌存储在Session中，因为Session是服务器端的存储，安全性更高。如果必须使用Cookie，请确保Cookie设置了HttpOnly和Secure标志，以防止XSS攻击和中间人攻击。

如何处理用户在多个标签页打开同一个表单的情况？

当用户在多个标签页打开同一个表单时，每个标签页都会生成一个独立的令牌。服务器端需要能够处理这种情况，例如，允许用户在多个标签页中提交表单，或者在提交一个标签页的表单后，使其他标签页的表单失效。一种简单的方法是，在用户提交任何一个标签页的表单后，刷新所有其他打开相同表单的标签页，强制用户重新加载表单并获取新的令牌。

禁用提交按钮后如何恢复？

如果在禁用提交按钮后，表单提交失败或需要重新提交，需要重新启用该按钮。可以在服务器端返回一个指示成功的标志，然后在客户端根据该标志重新启用按钮。

fetch('/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken
    },
    body: JSON.stringify({
        'data': 'some data'
    })
})
.then(response => response.json())
.then(data => {
    if (data.success) {
        // 处理成功
    } else {
        submitButton.disabled = false; // 重新启用按钮
        // 处理失败
    }
});

今天关于《表单防重复提交方法详解：JS与Token双重防护》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于防重复提交,提交令牌的内容请关注golang学习网公众号！