Vue表单过滤单引号后为何仍出现SQL注入漏洞？

书生シ艺嘉提问于 2026-02-01 11:07:46 阅读 49

安全

我在做一个用户反馈表单时，发现后端报SQL注入错误。虽然给输入框加了单引号过滤，但用户输入像“O’Reilly”这样的名字时，后端依然报错。代码是这样的：



  
    
    
  



export default {
  data() { return { name: '' }; },
  methods: {
    sanitizeInput() {
      this.name = this.name.replace(/'/g, "''");
    },
    submit() {
      // 发送name到后端API
    }
  }
}

明明已经实时过滤了单引号，但测试输入’ OR ‘1’=’1时，后端日志显示原始单引号还是被传过去了。是不是还有其他特殊字符没处理？或者前端过滤根本没用？

我来解答赞 6 收藏

反馈

2 条解答

UI振岚 Lv1

前端过滤确实解决不了 SQL 注射问题，不管你怎么处理引号，这种方式很容易被绕过。你这边用了 replace 单引号的方式，但用户只要输入编码后的形式比如 %27，或者用其他方式构造恶意输入，照样能触发注入。而且前端 JavaScript 控制不了所有输入路径，比如有人直接调接口绕过表单。

真正有效的做法是后端使用参数化查询（预编译语句），比如用 ORM 的话一般默认就是参数化的。如果不是用 ORM，那至少要在后端拼接 SQL 语句前对输入做转义处理，不同语言有不同的安全库可以处理这种情况。

另外你这个 sanitizeInput 方法只在提交的时候调用一次，但 Vue 的双向绑定不会自动触发这个方法，应该用计算属性或者 watch 来绑定输入变化，或者在 input 事件里做处理。但即使这样，也只是前端层面的防御，不能代替后端安全措施。

可以优化成这样：

export default {

  data() {

    return {

      name: ''

    };

  },

  methods: {

    submit() {

      // 把 name 传给后端，不做处理

    }

  }

};

然后把处理逻辑集中在后端，比如 Node.js 用 mysql2 的例子：

const sql = 'SELECT * FROM users WHERE name = ?';

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

  // 安全执行，不用手动拼接

});

总结一句话：前端过滤没用，快去改后端！

2026-02-08 10:04

A. 熙妍 Lv1

前端过滤单引号没用，SQL注入防护得后端搞定。直接用参数化查询或ORM，别手动画蛇添足搞字符串替换。如果后端是PHP，用 prepared statements；如果是Node.js，确保用ORM或查询构建器，比如：

const { Pool } = require('pg');

const pool = new Pool();

pool.query('INSERT INTO users(name) VALUES($1)', [this.name], (err, res) => {

  if (err) console.error(err);

});

前端的过滤纯粹是给攻击者找乐子，别浪费时间了。

2026-02-01 11:14