当前位置：首页 > 文章列表 > 文章 > 前端 > 表单防重复提交方法与令牌生成技巧

表单防重复提交方法与令牌生成技巧

2025-09-03 15:02:50 0浏览收藏

本文深入探讨了HTML表单防重复提交的有效方法，重点介绍**令牌机制**及其在确保表单提交唯一性方面的核心作用。通过服务器生成唯一令牌并存储在会话中，结合表单提交时的验证与删除机制，有效防止恶意或意外的重复提交。文章详细阐述了如何利用Python和Java等后端技术生成和验证令牌，并提供了禁用提交按钮等客户端辅助手段。此外，还针对AJAX表单、Session与Cookie选择、多标签页场景等复杂情况，提供了全面的解决方案和安全建议，助力开发者构建更健壮、更安全的Web应用，提升用户体验。掌握这些技巧，让你的网站远离重复提交的困扰！

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

HTML表单如何实现防重复提交？怎样生成唯一的提交令牌？

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

解决方案：

令牌机制 (Token-Based Approach)

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

生成令牌：

在服务器端，使用一个随机数生成器（例如，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;
}

将令牌添加到表单：

将生成的令牌作为一个隐藏字段添加到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>

验证令牌：

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

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)

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

禁用按钮：

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

const submitButton = document.getElementById('submitButton');

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

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

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

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

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

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

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

获取令牌：

从HTML表单中获取令牌。

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

添加到请求头或数据：

将令牌添加到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 => {
    // 处理响应
});

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

令牌的存储位置：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; // 重新启用按钮
        // 处理失败
    }
});

到这里，我们也就讲完了《表单防重复提交方法与令牌生成技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于session,防重复提交,令牌机制,禁用提交按钮,AJAX表单的知识点！

session 防重复提交令牌机制禁用提交按钮 AJAX表单