Layui表单input框如何实现输入时自动过滤非法的SQL敏感字符

小浩大大_2274

小浩大大_2274

2026-05-03

899人浏览

原创

前端javascript过滤sql敏感字符根本防不住sql注入,因代码可被禁用js、抓包或curl绕过;真正防护必须在后端采用参数化查询,而非前端黑名单过滤。

为什么不能在前端做sql注入过滤

直接说结论:layui 的 input 框里用 javascript 过滤 sql 敏感字符(比如 '、"、;、--、/*、union 等)根本防不住 sql 注入,还可能误导开发者以为“已经安全了”。

原因很实在:

  • 前端代码完全可被绕过——禁用 JS、抓包改请求、用 curl 直接发数据,过滤逻辑形同虚设
  • Layui 本身不提供内置的 SQL 过滤机制,所有所谓“自动过滤”都得自己写 JS,而 JS 只能处理当前输入值,无法覆盖拼接 SQL 的上下文(比如参数位置、引号闭合状态、编码绕过等)
  • 过度过滤反而破坏正常业务:用户昵称叫 O'Reilly、搜索关键词含 ORDER BY、JSON 字段含 /* comment */ 都会被误杀

应该在哪一层真正拦截 SQL 敏感字符

真正的防御必须落在后端,且不是简单“黑名单替换”,而是结构化防护:

  • 首选预编译参数化查询:用 PreparedStatement(Java)、pg.query + 参数数组(Node.js pg)、mysqli->prepare()(PHP)等,让数据库引擎天然区分“代码”和“数据”
  • 若必须做输入清洗(如日志记录、白名单字段校验),应使用严格白名单(例如仅允许中文、英文、数字、下划线),而不是删 SELECT 这类字符串——因为大小写、编码、注释、空格变形都能绕过
  • Web 层可配 WAF(如 ModSecurity 规则),但这是兜底,不能替代参数化

Layui input 能做的有限但有用的事

虽然不能防注入,但可以在用户体验层做轻量提示或基础格式约束,避免明显错误输入:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 用 lay-verify="sqlSafe" 自定义验证规则,只做「提醒」不做强制拦截:
    form.verify({ sqlSafe: function(value, item){ if(/['";\]|(--)|((union|select|insert|update|delete|drop|create|exec|execute))/i.test(value)){ return '该字段疑似包含 SQL 关键字,请确认是否误输'; } }});
  • 监听 input 事件做实时高亮(非阻断):
    layui.jquery('input[name="search"]').on('input', function(){ const v = this.value; if(/['";\]|(--)|((select|union))/i.test(v)){ layui.jquery(this).addClass('layui-form-danger'); } else { layui.jquery(this).removeClass('layui-form-danger'); } });
  • 注意:正则要加 i 标志,且不能用 .replace() 原地删字符——用户看不到被删了什么,体验差,还可能触发重复输入 bug

最容易被忽略的坑

很多团队加了前端过滤就以为万事大吉,结果上线后还是被扫出漏洞。最常漏掉的是:

  • 后端接收的是 req.body、req.query、req.headers 甚至 req.files.filename ——只要进 SQL,全都要参数化,不能只查 input 表单字段
  • Layui 的 textarea、select、checkbox 值同样可能拼进 SQL,但没人给它们写过滤
  • 用 ORM 时误以为“用了 ORM 就安全”,实际上 sequelize.query("SELECT * FROM user WHERE name = '" + req.query.name + "'") 还是拼接,照样中招

说到底,SQL 注入不是输入框的问题,是 SQL 构造方式的问题。盯着 Layui 的 input 想解决它,方向就偏了。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2443

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5263

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6330

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5898

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

843

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2780

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2593

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习