6.8 进阶安全防护
Tip
理解SQL注入、XSS、CSRF等常见攻击,学会用ORM和React默认转义防护。
1. 为什么要学这个?
你做一个搜索框SELECT * FROM users WHERE name = '${input}'。用户输入了名字:Alice' OR '1'='1。
SQL变成了:SELECT * FROM users WHERE name = 'Alice' OR '1'='1'。
因为'1'='1'永远为真,黑客直接dump出了全表数据。
懂ORM和React转义,才能挡住这些经典攻击。
2. 核心概念
2.1 常见全栈安全威胁
-
Injection(注入攻击):攻击者将恶意负载(Payload)作为输入发送给应用,通过破坏原有的指令语义(如SQL拼接)来实现未经授权的数据访问或指令执行
-
XSS(Cross-Site Scripting):攻击者在网页中植入恶意脚本,当其他用户浏览该页时,脚本在用户浏览器上下文环境中执行,从而窃取Session或进行钓鱼
-
CSRF(Cross-Site Request Forgery):攻击者诱导用户访问恶意链接,利用用户已有的身份认证凭证,在用户不知情的情况下以其名义向受信任网站发送非法请求
3. 防御方案
3.1 核心防御塔:Prisma ORM
❌ 危险写法(手动拼SQL):
const query = `SELECT * FROM users WHERE email = '${email}'`; // 极度危险!
✅ 安全写法(Prisma):
// Prisma会把email视为单纯的"文本值",绝不会把它当命令执行
const user = await prisma.user.findUnique({
where: { email: email },
});
3.2 核心防御塔:React转义
❌ 危险写法:
// 只有在完全信任内容源(如你自己的CMS)时才能用
<div dangerouslySetInnerHTML={{ __html: userComment }} />
✅ 安全写法:
// React自动把<script>转义为文本显示
<div>{userComment}</div>
4. 应用场景
凡是涉及用户输入(User Input)的场景——无论是搜索框、评论区、表单提交还是URL参数——都必须实施防御性编程策略。
5. 避坑指南
| ✅ 推荐做法 | ❌ 禁忌 |
|---|---|
| 使用ORM | 手动拼接SQL字符串 |
| 信任React默认渲染 | 滥用dangerouslySetInnerHTML |
| 敏感操作二次确认 | 点击即转账,毫无防备 |
6. 真实案例
Story
2021年,Log4j"核弹级"漏洞
虽然不是Web漏洞,但原理与注入攻击如出一辙。Java著名的日志库Log4j包含了一个功能:如果你打印的日志包含${jndi:ldap://...},它会自动去这个地址下载代码并执行。灾难:黑客只需要把这串代码改成自己的名字,或者发在聊天框里。只要服务器记录了这条日志("User ${...} logged in"),服务器就会被黑客接管。全球90%的企业级Java应用一夜之间沦陷。
Vibe心法:凡是用户输入的,皆可能是恶意的——使用ORM阻断SQL注入,信任React默认转义,在安全领域,只有"被害妄想症"才是最专业的素养。
7. 本章小结
- 🛡️ ORM保平安:使用Prisma等现代ORM,彻底告别SQL注入
- ⚛️ React护体:默认转义机制防住了99%的XSS,别手动关掉它
- 🚫 零信任:凡是用户输入的,都要假设它是恶意的