防止表单重复提交的核心方法是令牌机制，通过服务器生成唯一令牌并存储在会话中，表单提交时验证并删除令牌，确保每次提交唯一有效。
防止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 tokenimport 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表单中。
-
验证令牌：
当表单提交到服务器时，从请求中获取令牌，并与存储在会话中的令牌进行比较。如果匹配，则处理表单数据，并从会话中删除该令牌。如果不匹配，则拒绝请求。
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(); // 确保表单提交 }); -
防止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; // 重新启用按钮
// 处理失败
}
}); 
