前端安全防护指南：XSS、CSRF、点击劫持的防御措施

# 前端安全防护指南：XSS、CSRF、点击劫持的防御措施

前端安全威胁中，XSS、CSRF与点击劫持最为常见，需通过针对性措施构建防御体系。

## XSS：跨站脚本攻击的防御
XSS利用注入恶意脚本窃取cookie或篡改页面。**原理**是攻击者将脚本注入用户可控输入（如评论框），未经处理的内容被浏览器执行。
**防御措施**：
– 输入过滤：用`DOMPurify`净化HTML输入，过滤`<script>`等危险标签；
– 输出编码：渲染数据时对特殊字符转义（如`&`→`&amp;`）；
– 安全策略：启用CSP（Content-Security-Policy）限制脚本来源，禁止`unsafe-inline`；
– 隔离存储：用`HttpOnly`标记cookie阻止JS访问，`SameSite=Strict`限制跨站发送。

## CSRF：跨站请求伪造的拦截
CSRF诱导用户在已登录状态下执行非预期操作（如转账）。**原理**是利用用户身份凭证（cookie）自动携带的特性，伪造请求。
**防御措施**：
– 令牌验证：请求携带随机CSRF Token（如放在表单隐藏域或请求头），服务端校验；
– 同源检测：检查`Origin`/`Referer`头，拒绝跨域请求；
– 双重确认：敏感操作（如支付）增加验证码或密码二次验证；
– 退出机制：实现及时登出功能，缩短身份凭证有效期。

## 点击劫持：视觉欺骗的破解
点击劫持通过透明层覆盖恶意按钮，诱导用户点击。**原理**是用`iframe`嵌套目标页面，通过CSS定位伪装交互区域。
**防御措施**：
– X-Frame-Options：响应头设置`DENY`（禁止嵌套）或`SAMEORIGIN`（仅同源可嵌）；
– CSP frame-ancestors：更灵活地限制iframe父级域名；
– 脚本防御：页面嵌入`top === self`检测，非顶级窗口时跳转或隐藏内容；
– 视觉混淆：关键按钮添加随机位置验证码，增加欺骗难度。

前端安全需“多层防御”：结合输入验证、输出编码、HTTP头策略与用户交互设计，形成从数据处理到行为拦截的全链路防护，同时定期通过安全工具扫描潜在漏洞。