前端安全实战：防范 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(, {
: ,
: .({ username, password })
});
}
{
: {
:
}
}
