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

概述

前端安全并非后端专属，而是全栈开发中不可或缺的一环。忽视前端安全可能导致用户数据泄露、网站声誉受损甚至违反法律法规（如 GDPR、CCPA）。

常见误区与风险

许多开发者存在以下认知偏差：

• "我只是个前端，安全关我什么事？" —— 结果遭遇 XSS 攻击，用户信息泄露。
• "我用了框架，应该很安全吧？" —— 结果框架漏洞被利用。
• "我的网站小，没人会攻击的" —— 结果成为黑客练手目标。

反面案例

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

// 危险：明文存储敏感信息
function login() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  localStorage.setItem('password', password);
  
  // 危险：未强制 HTTPS
  fetch('http://api.example.com/login', {
    method: 'POST',
    body: JSON.stringify({ username, password })
  });
}

// package.json
{
  "dependencies": {
    : 
  }
}