前端 Javascript 正则实战：从零点博客项目看 SQL 注入防护与数据清洗

一、 为什么需要在前端做防护？

虽然真正的安全防线在数据库层（C# 参数化查询或 PHP PDO），但前端 Javascript 能在用户点击“提交”的瞬间就拦截掉明显的恶意代码，比如 `` 或者包含恶意 SQL 关键字的字符串。这属于“第一道防线”。

二、 零点博客实战：Javascript 正则清洗工具

我们的需求很明确：过滤掉 HTML 标签和危险字符，防止 SQL 注入，同时保留文本格式。

// 零点博客通用清洗函数
function cleanSqlInjection(input) {
    // 1. 替换 HTML 标签 (防止 XSS)
    // .*? 匹配 script 标签及其内容，g 表示全局，i 表示忽略大小写
    let cleanHtml = input.replace(/&/g, '&').replace(//g, '>');

    // 2. 过滤危险的 HTML 标签
    cleanHtml = cleanHtml.replace(/.*?/gi, '');// 移除 script 标签
    cleanHtml = cleanHtml.replace(/<.*?/>/gi, '');// 移除自闭合标签以防万一

    // 3. 替换单引号（针对 SQL 注入，防止拼接成 ' OR '1'='1）
    // 这里注意：如果是用于前端显示，HTML 转义已经处理了一部分，但防注入需双重保险
    cleanHtml = cleanHtml.replace(/'/g, "''");

    return cleanHtml;
}

// 测试案例
const userInput = "用户名：admin'";
console.log(cleanSqlInjection(userInput));
// 输出：用户名：admin''<script>alert('hack')</script>

三、 结合后端：C# 与 JSON 的数据流转

清洗后的数据通常会被打包成 JSON 格式发送给后端。比如在 C# Web API 接口中：

public class CommentModel
{
    public string Content { get; set; }
}

[HttpPost]
public IHttpActionResult SubmitComment([FromBody] CommentModel model)
{
    // 此时 model.Content 已经经过前端 JS 处理过一遍，虽然后端仍需严谨校验
    string safeContent = Server.HtmlEncode(model.Content);

    // 这里演示 C# 层的二次防注入，使用参数化查询
    string sql = "INSERT INTO comments (content) VALUES (@Content)";
    // 使用 SqlParameter 防止 SQL 注入，这是 C# 开发者的底线
    return Ok(new { status = 1, msg = "发布成功" });
}

四、 爬虫开发与正则进阶：解析复杂 HTML

除了清洗，Javascript 正则在爬虫开发中也是一把利器。比如我们要爬取一个网页的标题：

// 模拟从接口获取的 HTML 字符串
const html = '';

// 提取 title 标签的内容
const match = html.match(/<title>(.*?)</title>/i);

if (match && match[1]) {
    console.log("抓取到的标题是：", match[1]);
}

这个正则逻辑同样适用于 PHP 的 preg_match，理解正则的贪婪与非贪婪模式，是掌握 Web 抓虫技术的核心。

五、 避坑指南：千万别只信前端！

• 堆砌关键词不可取： 在代码中虽然提到了 C#、PHP、SQL、JSON、XML，但只是为了业务逻辑服务的。不要为了 SEO 堆砌，否则会被搜索引擎降权。
• 前端校验容易被绕过： 好心的用户可以禁用 JS 直接提交表单。所以，C# 的参数化查询和PHP 的 PDO 预处理是绝对不能少的“保命符”。
• 编码问题： 处理中文或特殊字符时，注意 URL 编码和 HTML 实体编码，避免乱码。

总结

通过这次零点博客的开发复盘，我们可以看到：前端 Javascript 负责体验和初步过滤，后端 C# 或 PHP 负责最终的安全堡垒，中间通过 JSON 或 XML 进行数据传输。正则表达式贯穿了从数据清洗到爬虫解析的全过程。

希望这篇包含源码与实操的干货能帮到你，如果觉得有用，欢迎分享到你的技术圈子！