引言：当你的页面开始“说话”

想象一下，你访问一个熟悉的论坛，却突然弹出莫名其妙的广告，或者你的登录凭证在不知不觉中被发送到了一个陌生服务器。这一切的幕后黑手，很可能就是跨站脚本攻击。XSS攻击的本质是恶意脚本被注入到可信的网站上，并在用户的浏览器中执行。它利用了浏览器对网站内容的天然信任，让攻击者能够“伪装”成网站本身，进行各种恶意操作。

一、 XSS的攻击类型：三种“幽灵”形态

  1. 反射型XSS（非持久化）：​ 恶意脚本作为请求（如URL参数）的一部分发送到服务器，服务器将其直接返回并在页面中执行。通常需要诱导用户点击一个精心构造的链接。案例：​ http://victim-site.com/search?keyword=<script>alert('XSS')</script>。如果网站未对keyword进行过滤就直接输出，脚本就会执行。
  2. 存储型XSS（持久化）：​ 这是最危险的一种。恶意脚本被永久地存储到服务器上（如数据库、评论、论坛帖子中）。每当其他用户浏览到包含该恶意内容的页面时，脚本就会自动执行。案例：​ 攻击者在博客评论区提交一段窃取Cookie的脚本。此后，所有访问该博客页面的用户，其登录Cookie都会被悄无声息地发送到攻击者的服务器。
  3. DOM型XSS：​ 漏洞发生在客户端，不经过服务器。恶意脚本通过修改页面的DOM树来实施攻击。案例：​ 网站使用JavaScript从URL的hash中获取数据并动态写入页面：document.write(location.hash.substring(1));。攻击者构造URL：http://site.com#<img src=x onerror=stealCookie()>，导致恶意脚本执行。

二、 XSS的深远危害：不止于弹窗

  • 盗取用户会话：​ 窃取Cookie，直接登录用户账户。
  • 钓鱼诈骗：​ 在页面上伪造登录框，诱骗用户输入敏感信息。
  • 键盘记录：​ 捕获用户的键盘输入。
  • 篡改页面内容：​ deface网站，散布虚假信息。
  • 与CSRF结合：​ 利用用户的登录状态发起非用户本意的操作。

三、 全面防御XSS：多管齐下，剿灭“幽灵”

1. 对数据进行编码/转义（核心防御）

原则：在将不可信的数据输出到不同上下文时，进行相应的编码。

  • 输出到HTML正文：​ 将 <, >, &, ", '等字符转换为HTML实体（<， >， &， "， '）。大多数现代Web框架（如React， Vue， Angular）默认会对渲染的数据进行转义。
  • 输出到HTML属性：​ 除了HTML转义，还要确保属性值用引号括起来。
  • 输出到JavaScript：​ 使用``对特殊字符进行转义。
  • 输出到URL：​ 进行URL编码。
  • 2. 内容安全策略（CSP）：现代浏览器的强大武器
  • CSP通过HTTP响应头告诉浏览器哪些外部资源是允许加载和执行的，从根本上降低XSS风险。
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; object-src 'none';
上述策略意味着：
  • default-src 'self'：默认只允许加载同源资源。
  • script-src 'self' https://trusted.cdn.com：脚本只允许来自本站和指定的可信CDN。
  • object-src 'none'：禁止加载<object>等插件。即使攻击者成功注入了脚本，如果该脚本的来源不在白名单内，浏览器也会拒绝执行。
  • 3. 输入验证与过滤
  • 对用户输入进行严格的校验，使用白名单原则，只允许符合特定规则的内容通过。例如，对于“姓名”字段，可以只允许字母、数字和少数特定符号。
  • 4. 使用安全的API
  • 避免使用innerHTML, outerHTML, document.write()等危险方法，转而使用textContent或innerText，它们不会解析HTML标签。
  • 5. 设置Cookie的HttpOnly属性
  • 为敏感的会话Cookie设置HttpOnly标志，可以阻止JavaScript通过document.cookie访问它，这样即使发生XSS，攻击者也无法直接窃取Cookie。
Set-Cookie: sessionId=abc123; HttpOnly; Secure

四、 总结

防御XSS是一场发生在“数据输出”环节的战争。我们需要摒弃“用户输入是安全的”这一想法，坚持“输出编码”​ 这一黄金法则。同时，积极采用CSP这一现代防御利器，构建白名单机制，并辅以输入验证、安全API和HttpOnlyCookie等措施，形成立体防御。只有这样，才能将这个在用户浏览器中神出鬼没的“幽灵”彻底剿灭，还用户一个干净、安全的浏览环境。