注入类：SQL 与命令注入（前后端协作视角）

本质防线在后端：参数化查询 / ORM 绑定 / 禁止拼接 Shell。前端仍需避免把用户输入 拼进发往服务器的查询语句模板（误导后端或绕过网关），并拒绝 把模板字符串当 SQL 使用。

---

SQL 注入示意（错误）

前端 仅为示意：绝不应对生产库执行。

const username = document.getElementById('u').value;
const sql = `SELECT * FROM users WHERE name='${username}'`;
// username = admin' OR '1'='1' --

即使请求发到后端，若后端再次拼接，仍会注入。

---

正确请求形态（参数交给服务端）

await fetch('/api/users/lookup', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: document.getElementById('u').value }),
});

由服务端使用 预编译语句：

SELECT * FROM users WHERE name = ?

---

命令注入（上传文件名 / 系统调用）

若后端误把文件名拼进 Shell：

filename = "; rm -rf /"

前端可做 输入校验与文件名规范化（去掉路径分隔符），但 最终必须由服务端 白名单存储与安全调用。

---

小结

前端：JSON 传参、不做 SQL 拼接演示进生产；后端：参数化 + 最小权限账户。前端校验只为体验，不可替代服务端校验。