前端安全实战：构建防御体系，规避常见漏洞

依赖管理方面，保持更新并运行安全审计脚本。

// package.json 中的潜在风险
{
  "dependencies": {
    "some-old-library": "1.0.0"
  }
}

最佳实践方案

解决上述问题需要从多个维度入手。对于 DOM 操作，优先使用 textContent 或专门的净化库如 DOMPurify。

// 推荐做法：安全的 DOM 操作
function renderUserInput() {
  const userInput = document.getElementById('user-input').value;
  // 使用 textContent 避免脚本执行
  document.getElementById('output').textContent = userInput;
  
  // 如需渲染 HTML，请先净化
  // const sanitizedInput = DOMPurify.sanitize(userInput);
  // document.getElementById('output').innerHTML = sanitizedInput;
}

API 交互务必使用 HTTPS，且不要在前端缓存密码，改用 Token 机制。

// 推荐做法：安全的 API 调用
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 => {
    // 仅存储 Token，不存密码
    localStorage.setItem('token', data.token);
  });
}

依赖管理方面，保持更新并运行安全审计脚本。

// package.json 优化建议
{
  "dependencies": {
    "some-library": "^2.0.0"
  },
  "scripts": {
    "security": "npm audit"
  }
}

此外，实施内容安全策略（CSP）能有效限制资源加载来源，配合 CSRF Token 可进一步加固表单提交。

<!-- 设置 CSP -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' https://trusted-cdn.com;">

// 防止 CSRF 攻击
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' })
  });
}

核心要点回顾

前端安全是一个系统工程，不能单靠一两个措施。我们需要关注以下几点：

1. 输入验证：使用 textContent 或 DOMPurify 净化用户输入。
2. 传输加密：确保所有 API 调用强制使用 HTTPS。
3. 敏感信息：绝不将密码等敏感信息存储在前端。
4. 依赖管理：定期更新依赖，运行 npm audit 检查漏洞。
5. CSP 策略：限制资源加载来源，抑制 XSS 攻击。
6. CSRF 防护：通过 Token 验证请求合法性。
7. 安全头部：配置适当的 HTTP 响应头。
8. 定期审计：利用工具扫描代码中的安全隐患。

安全不是选择题，而是必答题。时刻保持警惕，跟进最新漏洞动态，才能守住最后一道防线。