HTML表单如何实现防重复提交？怎样生成唯一的提交令牌？-html教程-PHP中文网

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

小老鼠

发布： 2025-08-16 13:53:01

原创

928人浏览过

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

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">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <!-- 其他表单字段 -->
    <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失效：

AI社交封面生成器
一句话/一张图一键智能生成社交媒体图片的AI设计神器

30

查看详情

为了防止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; // 重新启用按钮
        // 处理失败
    }
});

登录后复制

以上就是HTML表单如何实现防重复提交？怎样生成唯一的提交令牌？的详细内容，更多请关注php中文网其它相关文章！