js实现xss
XSS攻击原理
XSS（跨站脚本攻击）是通过向网页注入恶意脚本实现的攻击方式。攻击者利用网站对用户输入过滤不严的漏洞，将恶意代码注入到网页中，当其他用户访问该页面时，恶意脚本会在其浏览器中执行。
反射型XSS示例
反射型XSS需要诱骗用户点击恶意链接，攻击代码不存储在服务器上：
// 假设存在漏洞的URL参数
const maliciousUrl = 'http://vulnerable-site.com/search?query=<script>alert("XSS")</script>';存储型XSS示例
存储型XSS将恶意代码永久存储在目标服务器上：
// 评论表单提交的恶意内容
const maliciousComment = '<img src=x onerror=alert("XSS")>';DOM型XSS示例
不依赖服务器响应，完全在客户端执行的XSS：
// 漏洞代码示例
eval(location.hash.substring(1));
// 恶意URL示例
http://victim-site.com#alert('XSS')常见XSS注入方式
// 使用HTML标签
'<script>alert(1)</script>'
// 使用HTML属性
'" onmouseover="alert(1)"'
// 使用JavaScript伪协议
'javascript:alert(document.cookie)'
// 使用事件处理器
'<img src=x onerror=alert(1)>'防御XSS攻击
对用户输入进行HTML实体编码：
function encodeHTML(str) {
return str.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}使用Content Security Policy (CSP)头：
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'使用HttpOnly标记保护cookie：
Set-Cookie: sessionid=123; HttpOnly; Secure现代前端框架防护
现代框架如React/Vue/Angular内置XSS防护，但需注意危险API：
// React中危险的做法
<div dangerouslySetInnerHTML={{__html: userInput}} />
// Vue中危险的做法
<div v-html="userInput"></div>测试XSS漏洞
使用无害的测试payload验证防护措施：
// 基本测试
'<script>alert(1)</script>'
// 绕过过滤测试
'<scr<script>ipt>alert(1)</script>'
// Unicode编码测试
'\u003cscript\u003ealert(1)\u003c/script\u003e'
