前端安全防护手册：对抗XSS、CSRF、点击劫持等攻击

你的网站防线，可能比想象中更脆弱。

在数字化时代，前端不仅是用户交互的窗口，更是网络攻击的首要目标。一次成功的XSS攻击可窃取用户会话，一个精心设计的CSRF请求能悄然完成资金转账，而一次点击劫持则可能让用户在毫无察觉中执行危险操作。这些攻击直接威胁用户数据安全与企业信誉。

本手册从攻击原理到实战防御，系统拆解三大核心威胁的攻防逻辑，为开发者构建坚不可摧的前端防线提供完整方案。

一、XSS攻击：跨站脚本的渗透与防御

攻击原理

XSS（跨站脚本攻击）通过向网页注入恶意脚本（通常为JavaScript），在用户浏览时执行该脚本。攻击者借此窃取Cookie、会话令牌，甚至重定向用户至钓鱼网站。其危害直接体现在数据泄露与用户权限滥用上。

三大攻击类型

反射型XSS ：恶意脚本通过URL参数传递，服务器未过滤直接返回给用户浏览器执行。常见于钓鱼链接，需诱导用户点击触发。例如：
https://example.com/search?q=<script>stealCookie()</script>
存储型XSS：恶意脚本被存储到服务器数据库（如评论区），每次页面加载时自动执行，影响所有访问用户。
DOM型XSS ：完全在客户端触发，通过修改DOM结构执行恶意代码（如document.write()动态插入未过滤内容）。

防御策略

输入过滤与转义 ：对用户输入的特殊字符（如<、>、&）进行HTML实体转义（< → <）。使用白名单机制限制允许的标签和属性。
输出编码 ：根据输出位置（HTML/JS/CSS）采用不同编码规则。避免使用innerHTML，优先选择textContent或框架的自动转义（如React的{ }）。
内容安全策略（CSP） ：通过HTTP头Content-Security-Policy限制脚本来源，禁止内联脚本和未授权资源。例如：
Content-Security-Policy: default-src 'self'; script-src https://trusted.cdn.com
HttpOnly Cookie ：为敏感Cookie添加HttpOnly标记，阻止JavaScript读取会话凭证。

二、CSRF攻击：跨站请求伪造的陷阱

攻击原理

攻击者诱导已登录目标网站的用户访问恶意页面，利用用户的登录状态伪造请求（如转账、改密）。例如在恶意页面嵌入：

html 复制代码

<img src="https://bank.com/transfer?to=attacker&amount=1000">

用户浏览器自动携带Cookie发送请求，服务器误判为合法操作。

防御策略

CSRF Token验证 ：服务端为每个会话生成唯一Token，前端在请求时通过表单隐藏域或请求头（如X-CSRF-Token）携带。服务器校验Token合法性。
SameSite Cookie属性 ：设置Cookie的SameSite=Strict或Lax，限制跨站请求携带Cookie。例如：
Set-Cookie: sessionId=abc123; SameSite=Strict; HttpOnly
同源策略增强 ：后端校验请求头中的Origin或Referer字段，拒绝非白名单域名的请求。
敏感操作二次验证：对资金操作或密码修改等行为，要求用户输入验证码或生物识别信息。

三、点击劫持：视觉欺骗下的操控

攻击原理

攻击者通过透明iframe覆盖合法页面（如银行转账按钮），上层放置虚假按钮（如"点击抽奖"）。用户点击时实际触发隐藏操作。CSS定位是关键工具：

html 复制代码

<iframe src="https://bank.com/confirm-transfer" style="opacity:0; position:absolute; top:100px;"></iframe>
<button style="position:absolute; top:100px;">点击抽奖</button>

防御策略

X-Frame-Options响应头 ：设置DENY完全禁止页面被嵌套，或SAMEORIGIN仅允许同源嵌套：
nginx 复制代码
```
add_header X-Frame-Options "DENY";
```
CSP的frame-ancestors指令 ：更灵活的替代方案，指定可嵌套页面的域名：
nginx 复制代码
```
add_header Content-Security-Policy "frame-ancestors 'self';";
```
JavaScript防御补充 ：通过if (top !== self) top.location = self.location;尝试跳出iframe（但易被绕过，需结合服务端策略）。

四、纵深防御：构建前端安全生态

1. HTTPS全站加密

强制使用HTTPS传输数据，防止中间人窃听或篡改。配置Strict-Transport-Security头强制浏览器使用HTTPS连接。

2. 敏感信息零泄露

避免将API密钥、令牌硬编码在前端代码中。
使用HttpOnly + Secure Cookie替代localStorage存储会话信息。
用户数据展示时脱敏处理（如手机号显示为138****1234）。

3. 第三方依赖安全审计

使用npm audit或Snyk扫描依赖漏洞，定期更新第三方库。

为CDN资源添加Subresource Integrity哈希校验，防止篡改：

html 复制代码

<script src="https://cdn.com/jquery.js" integrity="sha384-xxxx" crossorigin></script>

4. 安全头部强化

组合配置HTTP头部提升整体安全性：

nginx 复制代码

# 禁止MIME类型嗅探
add_header X-Content-Type-Options "nosniff";  
# 启用XSS过滤器（兼容旧浏览器）
add_header X-XSS-Protection "1; mode=block";  
# 控制Referer信息泄露
add_header Referrer-Policy "strict-origin";

结语：安全是持续演进的战场

前端安全没有一劳永逸的解决方案。一个未转义的变量、一个随意拼接的URL、一个遗漏的CSP头，都可能成为整个系统的突破口。

防御的关键在于分层实施：从代码层面（输入过滤、输出编码），到传输层面（HTTPS），再到架构层面（CSP、Token验证），每一层都增加攻击者的成本。

定期使用OWASP ZAP或Burp Suite进行渗透测试，建立漏洞响应流程，将安全实践融入开发全生命周期。唯有将"安全第一"转化为开发习惯，才能守住用户数据的最后一道防线。