HTML表单属性如required、pattern等仅提升体验且不防篡改，真正安全校验必须由服务端完成，前端校验不可替代后端验证。
required、pattern、minlength、maxlength、type 这些 HTML 属性本身**不防篡改**，它们只提供即时反馈和基础约束，浏览器一关、开发者工具一开、curl 一发，全被绕过。真要防篡改，得靠服务端——但这些属性在合理场景下仍有明确价值：提升体验、减少无效请求、辅助用户输入。
为什么 type="email" 和 required 不能当安全措施用
浏览器对 type="email" 的校验仅检查格式（如是否含 @ 符号），不验证邮箱是否存在；required 只阻止表单原生提交，但攻击者可直接调用 form.submit() 或构造 POST 请求跳过所有前端逻辑。更关键的是，这些校验完全运行在客户端内存里，无加密、无签名、无绑定上下文，连“防手误”都算不上“防恶意”。
pattern 和 minlength 的真实适用边界
它们适合表达「用户应遵守的简单约定」，比如手机号必须 11 位、密码至少 8 字符且含数字。但以下情况必须放弃依赖：
- 正则表达式复杂到影响渲染性能（如嵌套量词、回溯爆炸）
- 规则随业务动态变化（如不同国家身份证格式），前端硬编码 pattern 易过期
- 字段值参与权限判断或金额计算（例如
pattern="[0-9]{1,5}"拦不住传 "999999" 的恶意请求）
真正起作用的永远是后端按相同规则再跑一遍——而且要用服务端语言的标准库（如 Python 的 re.fullmatch()、Go 的 regexp.MatchString()），不是复刻一份 JS 正则。
哪些 HTML 属性组合能降低攻击成功率（而非杜绝）
单独用没意义，但配合服务端策略时，能抬高攻击门槛：
立即学习“前端免费学习笔记（深入）”；
-
input[type="number"]+min="0"+max="100"：防止用户误输负数或超大值，但服务端仍需校验int(request.form.get("score"))是否在 [0,100] 区间 -
input[accept="image/png,image/jpeg"]+ 前端读取文件头魔数（如89 50 4E 47）：能拦住随手拖拽的 .exe 文件，但无法阻止重命名后的恶意图片——服务端必须用file命令或python-magic重检真实 MIME -
form[autocomplete="off"]+input[autocapitalize="none"]：减少因自动补全/大小写转换导致的脏数据，不涉及安全，但影响后续清洗成本
最容易被忽略的兼容性陷阱
HTML 校验属性在不同浏览器中行为不一致，尤其老版本 iOS Safari 和某些国产 WebView：
-
pattern在 Safari 中对空字符串不触发，而 Chrome 会；required在部分 Android WebView 下对contenteditable元素失效 -
type="date"在 Firefox 中不支持min/max属性校验，仅限制选择器范围 -
inputmode="numeric"不等价于type="number"，它只调起数字键盘，不提供任何校验能力
这意味着：你写的 pattern 在开发机上通过了，上线后可能在某个用户设备上根本没执行——所以服务端校验不能省，也不能假设“前端已过滤过非法字符”。
