Web安全核心：跨站脚本攻击（XSS）原理、分类与防御实战

前言

跨站脚本攻击（XSS，Cross-Site Scripting）属于Web应用中常见的一类安全漏洞。攻击者通过在受信任的网站中注入恶意脚本（通常为JavaScript），诱导其他用户在浏览过程中执行这些代码。此类攻击可能引发用户敏感信息泄露、身份被冒用、网页内容被篡改，甚至导致恶意软件传播等严重后果。

XSS 的类型

XSS攻击主要可划分为以下几种类型：

1. 存储型 XSS（Stored XSS）

存储型XSS被视为风险最高的一类。攻击者将恶意脚本提交并存储于服务器端，当其他用户访问包含该脚本的页面时，脚本会在其浏览器中自动执行。

示例：

• 攻击者可能在留言板或评论区域插入恶意脚本：

  <script>alert('Your account is hacked!');</script>
  

• 服务器将攻击者提交的恶意脚本保存至数据库中。

• 其他用户浏览该留言时，系统从数据库读取并执行脚本，可能导致浏览器弹出警告框或执行其他预设操作。

危害：

• 由于恶意脚本长期驻留服务器，可能影响大量访问用户，给网站带来严重的安全隐患。
• 攻击者可在用户无感知的情况下窃取身份信息或执行敏感操作。

2. 反射型 XSS（Reflected XSS）

反射型XSS通过URL参数将恶意脚本发送至服务器，服务器将该脚本直接嵌入响应页面并返回，最终在用户浏览器中执行。

示例：

• 攻击者构造包含恶意脚本的链接：

  https://example.com/search?q=<script>alert('XSS!');</script>
  

• 用户点击链接后，服务器将 q 参数的值直接嵌入页面响应中：

  <h1>Search Results for: <script>alert('XSS!');</script></h1>
  

• 用户浏览器执行该脚本，触发弹窗。

危害：

• 此类攻击通常在特定情境下触发（如用户点击恶意链接），攻击者常通过邮件、社交网络等渠道诱导用户点击。
• 恶意脚本执行的后果通常包括窃取用户信息或进行恶意重定向。

3. DOM 型 XSS（DOM-based XSS）

DOM型XSS不依赖服务器返回的数据，而是直接通过客户端JavaScript操作页面的DOM（文档对象模型）。攻击者利用前端JavaScript代码中未充分处理用户输入的部分注入恶意脚本。

示例：

• 攻击者构造包含恶意脚本的链接：

  https://example.com/page#<script>alert('XSS!');</script>
  

• 页面中的JavaScript代码直接从URL哈希部分读取内容，并将其插入到DOM中：

  javascript
  
  
  复制编辑
  document.body.innerHTML = location.hash.substring(1);
  

• 恶意脚本被注入页面并执行。

危害：

• DOM型XSS依赖客户端JavaScript逻辑，若前端未对URL参数进行适当清理，攻击者可利用此点进行攻击。
• 由于该攻击不依赖服务器，有时比反射型XSS更难检测和防范。

XSS 的危害

XSS攻击可能造成以下几方面的危害：

• 窃取用户敏感信息：
  • 恶意脚本可以窃取用户的Cookie、会话令牌、输入的数据等敏感信息。
  • 通过执行脚本，攻击者可以获取到用户的身份认证信息，进行账户劫持。
• 冒充用户行为：
  • 攻击者可以利用XSS执行用户操作，伪造用户行为。例如，发送消息、转账、修改账户信息等，造成经济损失。
• 伪造页面内容：
  • 攻击者可以修改页面的内容，显示虚假的信息，例如篡改银行账户余额、伪造订单详情等，欺骗用户进行进一步的操作。
• 传播恶意软件：
  • 恶意脚本可以强制用户下载恶意软件，或将用户重定向到钓鱼网站，进一步感染用户设备或窃取个人信息。

防御 XSS 攻击的方法

1. 输入验证和清理

对用户输入的数据进行严格的验证和清理，防止恶意代码的注入。拒绝包含HTML元素、JavaScript代码或特殊字符的非法输入。

示例：

• 使用专门的库进行数据转义（如 DOMPurify、html.escape）。
• 对用户输入的字符如 <, >, &, ", ' 等进行转义。

let safeInput = DOMPurify.sanitize(userInput);

2. 输出转义

在将用户输入的内容输出到页面时，进行适当的转义处理，防止用户输入的代码被执行。确保对HTML、JavaScript、CSS和URL等输出进行转义。

示例：

• 对HTML输出进行转义：

  <h1>Search Results for: {{ user_input | escape }}</h1>
  

• 使用模板引擎时，使用自动转义功能，避免直接插入用户输入的内容。

3. 使用内容安全策略（CSP）

内容安全策略（CSP）是一种通过HTTP头部限制网页加载资源（如JavaScript）的机制。通过配置CSP，可以防止恶意脚本的加载，减少XSS攻击的风险。

示例：

• 设置CSP头部，限制脚本来源：

  Content-Security-Policy: script-src 'self' https://trusted-scripts.example.com;
  

• 限制不受信任的脚本执行，从而避免执行外部的恶意脚本。

4. 避免直接使用用户输入

尽量避免将用户输入直接插入到HTML、JavaScript、CSS等代码中。尤其是动态构建页面时，应该使用DOM操作来生成内容，而不是直接使用 innerHTML。

示例：

• 使用 textContent 或 setAttribute() 来插入内容，而不是 innerHTML：

  let elem = document.createElement("div");
  elem.textContent = userInput;
  document.body.appendChild(elem);
  

5. 禁用危险的 HTML 功能

前端代码中避免使用危险的DOM操作方式，如 innerHTML、document.write() 等，这些方法允许注入HTML或JavaScript，容易导致XSS攻击。

6. Cookie 的安全设置

通过配置Cookie的安全属性，防止恶意脚本窃取Cookie数据。

• 设置 HttpOnly 属性，防止JavaScript访问Cookie：

  Set-Cookie: sessionid=abc123; HttpOnly;
  

• 设置 SameSite 属性，防止跨站请求携带Cookie：

  Set-Cookie: sessionid=abc123; SameSite=Strict;
  

7. 使用 HTTP Only 和 Secure 属性

通过设置Cookie的 HttpOnly 和 Secure 属性，确保Cookie只能通过服务器访问，防止恶意JavaScript获取敏感Cookie。

Set-Cookie: sessionid=abc123; HttpOnly; Secure;

其他防护建议

• 定期审计和渗透测试：进行定期的安全审计和渗透测试，发现并修复XSS漏洞。可以使用自动化工具如 OWASP ZAP 来进行安全扫描。
• 教育开发人员和用户：定期培训开发人员，增强其对XSS攻击的防范意识。用户也应了解不要随意点击可疑链接，避免遭遇社交工程攻击。
• 使用现代框架和库：许多现代框架（如React、Angular、Vue等）默认实现了XSS防护机制，开发时应优先选择这些框架，以减少XSS攻击的风险。

总结

本文介绍了Web网络安全中跨站脚本攻击（XSS）的相关知识，包括其类型、危害及防御方法。更多相关内容可参考本站其他文章。