安全思维与攻防基础

前言

你的网站安全吗？ 很多开发者觉得"安全是安全团队的事"，直到自己的项目被攻击、用户数据泄露。安全不是可选项，而是每个开发者的基本功。

本章带你建立安全思维，理解最常见的 Web 安全威胁和防御方法。

这篇文章会带你学什么？

章节	内容	核心概念
第 1 章	安全思维模型	像攻击者一样思考
第 2 章	常见 Web 攻击	XSS、SQL 注入、CSRF
第 3 章	防御策略	输入验证、输出编码、权限控制
第 4 章	安全检查清单	项目上线前的安全自查

学完本章，你将具备基本的安全意识，能识别和防御最常见的 Web 安全威胁。

0. 全景图：为什么开发者需要懂安全？

想象你建了一栋房子，功能齐全、装修漂亮，但忘了装锁。安全漏洞就是代码世界里"忘了装的锁"。

安全的核心原则

最小权限：只给必要的权限，不多给一分
纵深防御：不依赖单一防线，层层设防
永不信任输入：所有来自外部的数据都可能是恶意的
安全默认：默认配置应该是安全的，而不是方便的

1. 常见 Web 攻击

通过下面的交互组件，了解三种最常见的 Web 攻击原理（仅用于教育目的）：

Web 安全漏洞演示（教育用途）── 点击切换漏洞类型

攻击流程

1攻击者在输入框提交恶意脚本

2服务器未过滤直接存入数据库

3其他用户访问页面时脚本被执行

4用户 Cookie/数据被窃取

❌ 有漏洞的代码

// 直接插入用户输入（危险！）
el.innerHTML = userInput
// 如果 userInput = '<scr' + 'ipt>steal(cookie)</scr' + 'ipt>'
// 脚本会被执行！

✅ 修复后的代码

// 使用 textContent 安全插入
el.textContent = userInput
// 或使用框架自动转义
// Vue: {{ userInput }}  自动转义
// React: {userInput}    自动转义

防御要点：永远不要信任用户输入。使用框架自带的转义机制，避免 innerHTML，对输出进行编码。

1.1 XSS（跨站脚本攻击）

攻击者将恶意脚本注入到网页中，当其他用户访问时，脚本在他们的浏览器中执行。

javascript

// 危险：直接将用户输入插入 HTML
element.innerHTML = userInput
// 如果 userInput 是 <script>恶意代码</script>，就会执行

// 安全：使用 textContent 或转义
element.textContent = userInput
// 或使用框架的自动转义（Vue 的 {{ }}、React 的 JSX）

防御要点：

输出时转义 HTML 特殊字符（<, >, &, ", '）
使用现代框架的自动转义机制
设置 Content-Security-Policy HTTP 头

1.2 SQL 注入

攻击者通过构造特殊输入，篡改 SQL 查询的逻辑。

javascript

// 危险：字符串拼接 SQL
const query = `SELECT * FROM users WHERE name = '${userInput}'`
// 如果 userInput 是 ' OR '1'='1，就会返回所有用户

// 安全：使用参数化查询
const query = 'SELECT * FROM users WHERE name = ?'
db.execute(query, [userInput])

防御要点：

永远使用参数化查询 / 预编译语句
使用 ORM 框架（如 Prisma、Sequelize）
限制数据库账号权限

1.3 CSRF（跨站请求伪造）

攻击者诱导已登录用户访问恶意页面，利用用户的登录状态发起请求。

防御要点：

使用 CSRF Token
检查 Referer / Origin 头
关键操作使用 POST 而非 GET
Cookie 设置 SameSite 属性

2. 防御策略

2.1 输入验证

javascript

// 白名单验证：只允许预期的格式
function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
}

// 长度限制
function isValidUsername(name) {
  return name.length >= 2 && name.length <= 50
}

2.2 敏感数据保护

数据类型	保护措施
密码	bcrypt/argon2 哈希，永不明文存储
API 密钥	环境变量，不提交到代码仓库
用户数据	HTTPS 传输，加密存储
会话令牌	HttpOnly + Secure + SameSite Cookie

2.3 HTTP 安全头

Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Strict-Transport-Security: max-age=31536000

3. 安全检查清单

上线前，用下面的交互组件检查你的项目安全状况：

安全评分

0分

危险

🔍输入验证0/3▾

所有用户输入在服务端进行校验

使用白名单而非黑名单过滤

对文件上传进行类型和大小限制

🔐认证授权0/4▸

🛡️数据保护0/3▸

🌐通信安全0/3▸

3.1 开发阶段

[ ] 所有用户输入都经过验证和转义
[ ] 使用参数化查询，无 SQL 拼接
[ ] 密码使用 bcrypt 等算法哈希存储
[ ] 敏感配置通过环境变量管理
[ ] .env 文件已加入 .gitignore

3.2 部署阶段

[ ] 启用 HTTPS
[ ] 配置安全 HTTP 头
[ ] 关闭调试模式和详细错误信息
[ ] 数据库使用最小权限账号
[ ] 定期更新依赖（npm audit）

4. AI 助力：用大模型提升安全防护

大模型可以充当你的"安全顾问"，帮你审计代码漏洞、生成安全方案。

4.1 代码安全审计

提示词：

请对以下代码进行安全审计，检查是否存在：
- XSS 漏洞（未转义的用户输入）
- SQL 注入（字符串拼接查询）
- CSRF 风险（缺少 Token 验证）
- 敏感数据泄露（硬编码密钥、明文密码）
对每个问题给出风险等级、具体位置和修复方案。

[粘贴你的代码]

4.2 生成安全配置

提示词：

我的项目使用 Express.js + PostgreSQL，即将部署上线。
请生成一份完整的安全配置清单，包括：
- HTTP 安全头配置代码
- CORS 配置
- 数据库连接的安全设置
- 环境变量管理方案
给出可直接使用的代码片段。

4.3 解释漏洞原理

提示词：

用一个具体的例子，解释 CSRF 攻击的完整流程：
1. 攻击者如何构造恶意页面
2. 为什么浏览器会自动携带 Cookie
3. 服务端如何用 CSRF Token 防御
用代码演示攻击和防御的完整过程。

AI 使用建议

AI 的安全审计不能替代专业的安全测试。把它当作第一道筛查，关键系统仍需专业安全团队审计。

5. 总结

安全思维：永不信任外部输入，最小权限，纵深防御
常见攻击：XSS、SQL 注入、CSRF 是最高频的 Web 安全威胁
防御策略：输入验证、输出编码、参数化查询、安全 HTTP 头
安全习惯：上线前过安全检查清单，定期审计依赖

终极思考

安全不是一次性的工作，而是贯穿开发全过程的习惯。就像开车系安全带——不是因为你预期会出事故，而是因为这是基本的安全意识。写每一行代码时都问自己：如果这个输入是恶意的，会发生什么？

安全思维与攻防基础 ​

0. 全景图：为什么开发者需要懂安全？ ​

1. 常见 Web 攻击 ​

1.1 XSS（跨站脚本攻击） ​

1.2 SQL 注入 ​

1.3 CSRF（跨站请求伪造） ​

2. 防御策略 ​

2.1 输入验证 ​

2.2 敏感数据保护 ​

2.3 HTTP 安全头 ​

3. 安全检查清单 ​

3.1 开发阶段 ​

3.2 部署阶段 ​

4. AI 助力：用大模型提升安全防护 ​

4.1 代码安全审计 ​

4.2 生成安全配置 ​

4.3 解释漏洞原理 ​

5. 总结 ​

延伸阅读 ​

安全思维与攻防基础

0. 全景图：为什么开发者需要懂安全？

1. 常见 Web 攻击

1.1 XSS（跨站脚本攻击）

1.2 SQL 注入

1.3 CSRF（跨站请求伪造）

2. 防御策略

2.1 输入验证

2.2 敏感数据保护

2.3 HTTP 安全头

3. 安全检查清单

3.1 开发阶段

3.2 部署阶段

4. AI 助力：用大模型提升安全防护

4.1 代码安全审计

4.2 生成安全配置

4.3 解释漏洞原理

5. 总结

延伸阅读