浏览器安全机制详解：XSS与CSRF攻击的攻防实战

一、XSS攻击：原理与防范

1. 攻击原理

XSS（Cross-Site Scripting）通过注入恶意脚本到网页中，利用用户浏览器执行非法操作。攻击者常通过以下途径实现：

• 存储型XSS：恶意脚本存储于服务端（如评论区），用户访问时触发。
• 反射型XSS：通过URL参数注入脚本，服务端未过滤直接返回给客户端。
• DOM型XSS：前端脚本直接操作DOM时未校验输入，导致执行恶意代码。

示例：攻击者在表单输入中注入<script>窃取Cookie代码</script>，其他用户浏览时触发恶意行为。

2. 防御策略

• 输入过滤与输出编码：对用户输入进行正则校验（如剔除<script>标签），输出时使用textContent或HTMLEncode转义敏感字符。
• 内容安全策略（CSP） ：通过HTTP头部限制脚本来源，如Content-Security-Policy: script-src 'self'仅允许同域脚本。
• HttpOnly Cookie：设置Set-Cookie: HttpOnly防止JavaScript访问敏感Cookie。
• 框架安全实践：避免React的dangerouslySetInnerHTML和Vue的v-html直接渲染用户输入。

---

二、CSRF攻击：原理与防范

CSRF攻击示意

用户浏览器         恶意网站B            网站A
   |                   |                  |
   |--- 登录A，存Cookie|                   |
   |<------------------|                  |
   |--- 访问B --------->|                  |
   |<-- 返回恶意页面 --|                  |
   |（含<img src="A.com/transfer?to=hacker">）
   |--- 请求A.com -----|------------------>|
   |（携带Cookie，执行转账）

1. 攻击原理

CSRF（Cross-Site Request Forgery）诱导用户浏览器在已认证的网站发起非法请求。典型流程如下：

1. 用户登录网站A，Cookie保存会话凭证。
2. 用户访问恶意网站B，触发隐藏请求（如自动加载伪造的<img src="[https://A.com/transfer ](https://A.com/transfer )?to=hacker">）。
3. 浏览器携带Cookie向网站A发送请求，完成转账等敏感操作。

2. 防御策略

• CSRF Token：服务端生成随机Token，嵌入表单或请求头，验证请求合法性。
• SameSite Cookie：设置SameSite=Strict/Lax限制跨域请求携带Cookie。
• 双重Cookie验证：前端从Cookie读取Token并附加到请求头，服务端对比两者一致性。
• 验证码与Referer检查：敏感操作需验证码，或校验请求来源域名。

---

三、综合防御体系

1. 基础设施加固

• 强制HTTPS：防止中间人攻击，结合HSTS头部确保全站加密。
• 安全响应头：
  • X-Frame-Options: DENY 禁止页面被内嵌为iframe。
  • X-XSS-Protection: 1; mode=block 启用浏览器XSS过滤。

2. 开发实践

• 输入输出全链路控制：从前端表单到服务端存储均需过滤与编码。
• 定期安全扫描：使用工具检测XSS/CSRF漏洞（如OWASP ZAP）。

---

结语

XSS与CSRF是Web安全的“双生威胁”，需通过编码规范、安全策略与基础设施多维度防御。开发者应持续关注OWASP Top 10等安全标准，结合CSP、CSRF Token等机制，构建纵深防护体系。