一、XSS攻击的本质
跨站脚本攻击（XSS）是Web安全领域最普遍的漏洞之一，攻击者通过注入恶意脚本代码到网页中，当其他用户浏览该页面时，恶意脚本将在用户浏览器执行，实现：
会话劫持（窃取Cookie）网络钓鱼伪造键盘记录非法重定向等攻击
二、XSS攻击三大类型详解
类型攻击流程危害等级典型案例反射型XSS恶意脚本通过URL参数注入→服务器直接返回含脚本的页面→用户执行脚本★★☆☆☆https://victim.com?search=存储型XSS恶意脚本提交到数据库→其他用户访问时从服务端加载→批量用户执行脚本★★★★★评论区注入脚本影响所有访问者DOM型XSS前端JS直接操作URL参数/客户端数据→动态生成DOM时注入可执行代码★★★★☆location.hash被innerHTML解析执行
三、XSS漏洞扫描工具
自动化扫描工具
Acunetix WVS（商业级）OWASP Zap（开源）W3af（Kali内置）
渗透测试平台
Kali Linux（集成Burp Suite、Vega等）手动测试工具
Burp Suite（Repeater/Scanner模块）
四、XSS防御策略体系
（一）基础防护原则
（二）关键防御手段
内容安全策略（CSP）
Content-Security-Policy: script-src 'self'; style-src 'unsafe-inline'
核心指令：script-src/style-src/img-src禁止内联脚本：'unsafe-inline'禁止eval：'unsafe-eval'
安全DOM操作
// 危险操作 ❌
element.innerHTML = userInput;
// 安全操作 ✅
element.textContent = userInput;
document.createElement('div');
XSS过滤库
npm install dompurify # 推荐DOMPurify
import DOMPurify from 'dompurify';
const cleanHTML = DOMPurify.sanitize(dirtyHTML);
会话安全加固
Set-Cookie: sessionID=xxx; HttpOnly; Secure; SameSite=Strict
五、深度剖析：跨页面参数传递的安全陷阱
▶ 场景描述
用户正在A页面填写含手机号的表单，开发者试图通过URL参数将手机号传递给B页面自动填充：
https://b.com?phone=13800138000
▶ 安全问题分析
DOM型XSS攻击入口
// 不安全的B页面实现
const phone = new URLSearchParams(location.search).get('phone');
document.getElementById('phone').value = phone;
当攻击者构造恶意URL：
https://b.com?phone=">
若B页面使用innerHTML或未过滤引号，则注入成功。
数据篡改风险
即使使用textContent，攻击者仍可伪造参数值：
https://b.com?phone=攻击者号码 → 诱导用户提交错误数据
▶ 问题归类
此场景属于 DOM型XSS攻击，根源在于：
URL参数作为非受信数据源被直接使用敏感数据暴露在客户端可修改区域
▶ 安全解决方案
方案实现方式安全等级服务端会话存储A页提交数据→服务端存session→B页从session加载★★★★★加密参数传递AES加密URL参数：https://b.com?data=ENCRYPTED_DATA→B页解密校验★★★★☆PostMessage通信window.postMessage({phone: '138xxx'}, 'https://b.com', [targetOrigin])★★★☆☆Input值二次确认B页填充时显示“已预填手机号，请确认”并强制用户手动验证★★★☆☆
✨ 最佳实践建议：
禁止通过URL明文传输敏感数据！ 对于手机号、身份证号等PII数据，必须使用服务端会话存储或加密传输。
六、总结思考
XSS防御本质是建立对非受信数据的零信任体系：
所有用户输入、URL参数、第三方数据均视为潜在威胁源严格执行 “输出上下文编码”原则CSP策略需强制执行script-src 'self'采用现代化的安全开发框架（如React/Vue的自动转义机制）
项目合理运用防御策略（输入过滤+输出转义+CSP+安全编码），对于预防恶意攻击有前瞻性意义。