js实现xss

XSS 攻击简介

XSS（跨站脚本攻击）是一种安全漏洞，攻击者通过注入恶意脚本到网页中，使其在用户浏览器中执行。XSS 通常分为三类：存储型、反射型和 DOM 型。

存储型 XSS

恶意脚本被永久存储在目标服务器（如数据库），当用户访问受影响的页面时，脚本从服务器加载并执行。

// 攻击者提交恶意内容到评论区
<script>alert('XSS')</script>

反射型 XSS

恶意脚本作为请求的一部分发送到服务器，服务器将其反射回响应中，用户点击构造的恶意链接时触发。

// 构造恶意 URL
http://example.com/search?q=<script>alert('XSS')</script>

DOM 型 XSS

完全在客户端触发，通过修改 DOM 环境执行恶意代码，无需服务器参与。

// 假设页面从 URL 中读取参数并动态写入 DOM
const userInput = new URL(location.href).searchParams.get('input');
document.write(userInput); // 输入 <script>alert('XSS')</script> 时触发

防御方法

输入过滤与转义
对用户输入进行转义，将特殊字符（如 <, >, &）转换为 HTML 实体。

function escapeHtml(str) {
  return str.replace(/[&<>'"]/g, tag => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    "'": '&#39;',
    '"': '&quot;'
  }[tag]));
}

使用 CSP（内容安全策略）
通过 HTTP 头限制脚本来源，防止内联脚本执行。

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

避免动态生成 HTML
优先使用 textContent 替代 innerHTML，防止字符串被解析为 HTML。

// 安全写法
element.textContent = userInput;
// 危险写法
element.innerHTML = userInput;

框架内置防护
现代前端框架（如 React、Vue）默认对动态内容进行转义。

// React 自动转义
<div>{userInput}</div>

测试与验证

使用工具（如 OWASP ZAP、Burp Suite）扫描漏洞，或手动尝试注入常见 XSS 载荷（如 <img src=x onerror=alert(1)>）。

注意事项

• 仅用于合法安全测试，未经授权的攻击行为违法。
• 定期更新依赖库，避免已知漏洞。