前端安全核心实践：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', {
    : ,
    : .({ username, password })
  });
}