前端安全核心实践：XSS、CSRF 与依赖管理

前端安全核心实践

常见误区

前端安全？这不是后端的事吗？

"我只是个前端，安全关我什么事？"——结果网站被 XSS 攻击，用户信息泄露； "我用了框架，应该很安全吧？"——结果框架有漏洞，被人轻松突破； "我的网站小，没人会攻击的"——结果被黑客当作练手的靶子。

前端安全不是可有可无的，而是必须重视的！

前端安全的重要性

• 保护用户数据：防止用户信息被窃取
• 维护网站声誉：避免安全事件影响品牌形象
• 遵守法律法规：如 GDPR、CCPA 等数据保护法规
• 防止业务损失：避免因安全问题导致的经济损失

常见错误示例

// 反面教材：直接拼接 HTML 字符串
function renderUserInput() {
  const userInput = document.getElementById('user-input').value;
  // 危险！直接将用户输入插入到 DOM 中
  document.getElementById('output').innerHTML = userInput;
}

// 反面教材：不安全的 API 调用
function login() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  // 危险！在前端存储敏感信息
  localStorage.setItem('username', username);
  localStorage.setItem('password', password);
  // 危险！明文传输密码
  fetch('https://api.example.com/login', {
    method: 'POST',
    body: JSON.stringify({ username, password })
  });
}

// 反面教材：使用不安全的第三方库
{
  "dependencies": {
    "some-old-library": "1.0.0" // 存在已知安全漏洞
  }
}

安全实践建议

// 正确的做法：使用安全的 DOM 操作
function renderUserInput() {
  const userInput = document.getElementById('user-input').value;
  // 安全！使用 textContent 或 createElement
  document.getElementById('output').textContent = userInput;
  // 或者使用 DOMPurify 净化 HTML
  // const sanitizedInput = DOMPurify.sanitize(userInput);
  // document.getElementById('output').innerHTML = sanitizedInput;
}

// 正确的做法：安全的 API 调用
function login() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  // 安全！使用 HTTPS 传输
  fetch('https://api.example.com/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
    .then(res => res.json())
    .then(data => {
      // 安全！使用 token 而不是存储密码
      localStorage.setItem('token', data.token);
    });
}

// 正确的做法：防止 CSRF 攻击
function submitForm() {
  // 获取 CSRF token
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': csrfToken // 添加 CSRF token
    },
    body: JSON.stringify({ data: 'some data' })
  });
}

// 正确的做法：定期更新依赖
{
  "dependencies": {
    "some-library": "^2.0.0" // 使用最新版本，避免已知漏洞
  },
  "scripts": {
    "security": "npm audit" // 定期检查安全漏洞
  }
}

<!-- 正确的做法：实现内容安全策略 (CSP) -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' https://trusted-cdn.com; img-src 'self' https://trusted-cdn.com data:; connect-src 'self' https://api.example.com; frame-src 'none';">

总结

• 输入验证：使用 textContent 或 DOMPurify 净化用户输入
• HTTPS 传输：确保所有 API 调用使用 HTTPS
• 敏感信息保护：不在前端存储密码等敏感信息
• 依赖管理：定期更新依赖，避免已知安全漏洞
• 内容安全策略 (CSP)：限制资源加载来源，防止 XSS 攻击
• CSRF 防护：使用 CSRF token 防止跨站请求伪造
• 安全头部：设置适当的安全相关 HTTP 头部
• 定期安全审计：使用工具检查代码中的安全漏洞

前端安全不是选择题，而是必答题！