前端安全实践：防止 XSS、CSRF 与数据泄露

正确实现方式

// 正确的做法：使用安全的 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);
  });
}

// 正确的做法：定期更新依赖
// package.json
/*
{
  "dependencies": {
    "some-library": "^2.0.0"
  },
  "scripts": {
    "security": "npm audit"
  }
}
*/

// 正确的做法：实现内容安全策略 (CSP)
// 在 HTML 头部添加
/*
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com;">
*/

// 正确的做法：防止 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
    },
    body: JSON.stringify({ data: 'some data' })
  });
}

核心建议

前端安全是一个系统性的工程，不是靠一两个措施就能解决的。需要从输入验证、API 调用、依赖管理等多个方面入手。

所以，别再觉得前端安全不重要了，它可能是你网站的最后一道防线！

总结

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

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