前端无法阻止SQL注入，因SQL在后端执行，攻击者可绕过前端直接发请求；前端仅能提示可疑输入（如SELECT、UNION等关键词），不能替代后端参数化查询或防止真实攻击。
为什么前端根本拦不住 SQL 注入
前端做 sql 注入拦截是伪需求，sql 语句根本不会在浏览器里执行，所有用户输入最终都得发到后端拼进查询——而正则或黑名单在 js 里跑一遍，对攻击者毫无约束力。他们绕开页面、直接 curl 或用 burp 发请求，你的 input 监听和 onsubmit 校验形同虚设。
真正该做的只有一件事：让后端不拼接 SQL 字符串。但如果你非要前端加一层“心理安慰”，那得清楚它能干什么、不能干什么：
- 能提示用户“这个输入看起来可疑”，比如含
' OR 1=1 --、UNION SELECT等明显载荷 - 不能替代服务端校验，也不能防止任何真实攻击
- 容易误伤正常输入（比如用户真名叫
O'Reilly）
JS 正则匹配常见 SQL 载荷的写法误区
很多人抄网上“防注入正则”，结果要么太松（/unions+select/i 漏掉换行、注释、大小写变形），要么太紧（/['";\-]/ 把所有单引号都干掉，导致表单提交失败）。关键不是“多写几条规则”，而是理解哪些模式真有区分度。
推荐用以下最小集覆盖大部分手工探测行为（注意：仅用于前端提示，非拦截）：
-
/(SELECT|INSERT|UPDATE|DELETE|UNION|DROP|CREATE|ALTER)/i—— 匹配关键词，加词边界防SELECTED误报 —— 捕获带注释或逻辑恒真的单引号闭合
/(AND|OR)s+d+s*=s*d+/i —— 常见布尔盲注特征，如 <code>AND 1=1
别用 .test() 粗暴阻止提交；建议在 onblur 或 oninput 时标红输入框并显示提示，让用户自己改。
黑名单 vs 白名单：前端根本没资格做白名单
有人想“只允许字母数字下划线”，这在表单场景中几乎必然失败：email 含 @ 和 .，address 含空格和中文，search 可能要支持模糊符号。前端白名单本质是业务逻辑错位。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
黑名单更现实，但要注意三点：
- 不要硬编码一堆字符串去
includes()，性能差且漏变体（如sel/**/ect） - 避免全局替换（
str.replace(/'/g, '')），会破坏原始值，后端还得自己解析 - 正则里慎用
.和.*，容易跨行匹配或回溯爆炸，尤其在长文本中
如果非要用黑名单，优先走上面提到的带边界的关键词正则，而不是逐字符过滤。
实际部署时最容易被忽略的细节
你以为加了正则就安全了？这些点一踩一个准：
- 没考虑
textarea和富文本编辑器内容——它们可能含 HTML 标签，正则要额外转义或先textContent提取纯文本 - 忘了处理 URL 参数里的载荷，比如
?q=1%27%20OR%201%3D1，前端 JS 解码后才是' OR 1=1 - 移动端软键盘触发
input事件频率高，频繁正则测试卡顿，建议加防抖（setTimeout延迟 300ms 再校验） - 和服务端黑名单不一致：前端放过了
EXEC，后端却拦了，用户困惑；或者前端拦了admin，后端又接受——信任链断裂
最麻烦的是，这类前端检查一旦上线，团队容易产生“我们有防护”的错觉，反而放松后端参数化查询的落地。这才是真危险的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
