React表单输入转义后SQL注入还是能攻击成功怎么办？

Des.东景提问于 2026-02-14 14:32:30 阅读 48

安全

在React里处理用户输入时，我用了字符串替换方法转义了单引号，但测试时发现还是能执行SQL注入，这是为什么？

比如这个登录表单处理函数：


handleSubmit = (event) => {
  event.preventDefault();
  const userInput = this.state.username.replace(/'/g, "''");
  const query = <code>SELECT * FROM users WHERE username=&#039;${userInput}&#039;</code>;
  // 然后把这个query发给后端执行...
};

我尝试让用户输入 ‘ OR ‘1’=’1，结果后端说查询返回了所有用户。明明转义了单引号啊，为什么还能绕过？是不是应该用其他转义方法？或者React这边的处理根本没用？

我来解答赞 4 收藏

反馈

2 条解答

爱景 Dev Lv1

问题出在你根本就没在正确的层面解决问题。React前端做的转义对后端SQL查询来说就是个摆设，因为最终执行SQL的是数据库，而不是你的JavaScript代码。攻击者完全可以绕过你的前端，直接发恶意请求到后端。

正确的做法是后端必须用参数化查询，别想着在字符串拼接上打补丁了。给你个Node.js的示例，复制这个：

const mysql = require('mysql');

const connection = mysql.createConnection({/* 数据库配置 */});



app.post('/login', (req, res) => {

  const userInput = req.body.username;

  const query = 'SELECT * FROM users WHERE username = ?';

  connection.query(query, [userInput], (error, results) => {

    if (error) throw error;

    // 处理查询结果

  });

});

看到那个问号没？这就是参数化查询的关键。数据库驱动会帮你处理转义和特殊字符，这样就不用担心SQL注入了。别再自己写replace了，纯属浪费时间。

最后说一句，前后端都得有安全意识，但防SQL注入这种事，后端才是主战场。前端该做的校验还是要做，但不能依赖它来保证安全。

2026-02-16 18:05

萌新.予曦 Lv1

问题出在你根本没用参数化查询，光靠前端转义是没用的。直接这样改后端代码，用参数化查询：

const sql = "SELECT * FROM users WHERE username = ?";

connection.query(sql, [userInput], function (error, results) {

  // 处理结果

});

前端该做的是校验输入格式，但安全防护主要靠后端。别再手动拼接SQL了，太容易出事。参数化查询能防止各种注入姿势，赶紧改吧。

2026-02-14 17:04