前端安全：核心漏洞防御与最佳实践
常见的前端安全漏洞
XSS（跨站脚本攻击）
XSS 是前端最常见也最危险的风险之一。简单来说，就是攻击者通过注入恶意脚本到你的页面，在用户浏览器上执行，从而窃取用户信息或 Cookie。
错误示范：
// 直接将用户输入插入到 DOM 中，存在严重安全隐患
function renderComment(comment) {
document.getElementById('comments').innerHTML = comment.content;
}
正确做法：
// 使用 textContent 避免脚本执行，或使用 DOMPurify 等库进行清洗
function renderComment(comment) {
const div = document.createElement('div');
div.textContent = comment.content;
document.getElementById('comments').appendChild(div);
// 如果必须使用 innerHTML，请确保经过严格过滤
// document.getElementById('comments').innerHTML = DOMPurify.sanitize(comment.content);
}
CSRF（跨站请求伪造）
CSRF 利用用户的身份，在用户不知情的情况下发送恶意请求。例如，你登录了某个网站后访问恶意站点，该站点即可利用你的身份执行转账或修改密码等操作。
防御措施：
// 后端生成 CSRF token，前端在请求头中携带
fetch('/api/transfer', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': document.().
},
: .({ : , : })
});
