前端安全概述
常见误区
前端安全？这不是后端的事吗？
"我只是个前端，安全关我什么事？"——结果网站被 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 })
});
}
{
: {
:
}
}
