前端安全实战：防御 XSS、CSRF 及敏感信息保护

最佳实践方案

1. 安全的 DOM 操作

避免使用 innerHTML 直接渲染用户输入，推荐使用 textContent 或 DOMPurify 净化 HTML。

function renderUserInput() {
  const userInput = document.getElementById('user-input').value;
  document.getElementById('output').textContent = userInput;
  // 或使用 DOMPurify
  // const sanitizedInput = DOMPurify.sanitize(userInput);
  // document.getElementById('output').innerHTML = sanitizedInput;
}

2. 安全的 API 调用

• 强制使用 HTTPS 传输。
• 不在前端存储密码，仅存储 Token。

function login() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  
  fetch('https://api.example.com/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  }).then(res => res.json())
  .then(data => {
    localStorage.setItem('token', data.token);
  });
}

3. 依赖管理与 CSP

• 定期更新依赖，运行 npm audit 检查漏洞。
• 实施内容安全策略 (CSP) 限制资源加载。

<!-- 在 HTML 头部添加 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com;">

4. CSRF 防护

提交表单时携带 CSRF Token。

function submitForm() {
  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' })
  });
}

核心总结

前端安全是系统性工程，需从多方面入手：

• 输入验证：使用 textContent 或 DOMPurify。
• HTTPS 传输：确保所有 API 调用加密。
• 敏感信息保护：不存储密码等敏感凭证。
• 依赖管理：定期更新依赖，避免已知漏洞。
• 内容安全策略 (CSP)：限制资源加载来源。
• CSRF 防护：使用 Token 防止跨站请求伪造。
• 安全审计：定期使用工具检查代码漏洞。