防止表单重复提交的核心方法是令牌机制，通过服务器生成唯一令牌并存储在会话中，表单提交时验证并删除令牌，确保每次提交唯一有效。
防止HTML表单重复提交，核心在于确保每次提交都是唯一且有效的。通常通过令牌机制、禁用提交按钮、或者在服务器端进行校验来实现。
解决方案：
令牌机制 (Token-Based Approach)
这是最常见且可靠的方法。它的原理是为每个表单生成一个唯一的令牌，并在服务器端验证该令牌。
生成令牌：
立即学习“前端免费学习笔记（深入）”；
在服务器端，使用一个随机数生成器（例如，
uuid
库在Python中，或者
java.util.UUID
在Java中）生成一个唯一的字符串。将此令牌存储在用户的会话中。
import uuidfrom flask import sessiondef 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表单中。
验证令牌：
当表单提交到服务器时，从请求中获取令牌，并与存储在会话中的令牌进行比较。如果匹配，则处理表单数据，并从会话中删除该令牌。如果不匹配，则拒绝请求。
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; // 重新启用按钮 // 处理失败 }});
以上就是HTML表单如何实现防重复提交？怎样生成唯一的提交令牌？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572122.html
微信扫一扫 
支付宝扫一扫 
