html5防止刷数据库

表单验证与约束

HTML5提供原生表单验证功能，可减少无效数据提交至服务器，降低数据库写入压力。
实现方式：

防止重复提交

通过禁用按钮或事件监听阻止多次点击提交，减少重复数据写入。
实现方法：

1. 提交后禁用按钮：

   document.querySelector('form').addEventListener('submit', () => {
       this.querySelector('button').disabled = true;
   });

2. 防抖处理（Lodash库示例）：

   _.debounce(submitFunction, 3000);

数据格式预处理

利用HTML5特性过滤非法数据，降低后端处理复杂度。
| 场景 | 技术方案 | 作用 |
|——|———-|——|
| 数值范围限制 | <input type="number" min="1" max="100"> | 限制数字区间 |
| 字符串长度 | maxlength属性 | 截断超长输入 |
| 文件类型校验 | <input type="file" accept=".jpg"> | 限制上传扩展名 |

文件上传安全

通过File API预检文件属性，避免恶意文件写入数据库。
关键API：

const file = document.querySelector('input[type="file"]').files[0];
if (file.size > 5 1024 1024 || !file.type.startsWith('image/')) {
alert('文件不合法');
return false; // 阻止表单提交
}

跨域请求限制

利用HTML5的CORS策略限制资源请求来源，防范XSS攻击导致的数据库篡改。
服务器配置示例：

Access-Control-Allow-Origin: https://yourdomain.com

本地存储优化

使用LocalStorage/IndexedDB缓存高频数据，减少重复网络请求。
| 存储类型 | 适用场景 | 优势 |
|———-|———-|——|
| LocalStorage | 临时表单数据 | 减少服务器写入 |
| IndexedDB | 离线数据同步 | 支持复杂数据结构 |

// 缓存用户输入
localStorage.setItem('userInput', JSON.stringify(formData));

前后端协同验证

前端防御：

• CSRF Token嵌入表单：

  <meta name="csrf-token" content="{{token}}">

• Web Crypto API生成签名：

  crypto.subtle.digest('SHA-256', buffer).then(hash => {/发送哈希/});

后端防御：

• 校验Token有效性
• 参数签名比对
• 频率限制（如IP黑名单）

相关问题与解答

Q1：HTML5表单验证能否完全替代后端校验？
A1：不能，前端验证易被绕过，所有关键校验必须在后端执行。

• 用户可禁用JS跳过验证
• required字段可通过开发者工具移除
• 复杂逻辑仍需服务端二次校验

Q2：如何防御自动化脚本模拟表单提交？
A2：综合方案：

1. 行为特征分析：检测操作速度/轨迹（如鼠标移动路径）
2. 验证码集成：使用<canvas>绘制动态验证图案
3. 请求频率限制：后端设置IP/User代理级别的速率阈值
4. HSTS+CSP：强制HTTPS并限制外部脚本