jQuery中xss漏洞浅析和复现及修复是怎么样的

发布时间：2021-11-15 21:25:14 作者：柒染
来源：亿速云阅读：3165

# jQuery中XSS漏洞浅析、复现及修复方案

## 一、XSS漏洞基础概念

### 1.1 什么是XSS
跨站脚本攻击（Cross-Site Scripting，XSS）是一种将恶意脚本注入到可信网站中的攻击方式。攻击者利用Web应用对用户输入过滤不足的缺陷，在页面中注入客户端脚本（通常是JavaScript）。

### 1.2 XSS分类
- **反射型XSS**：恶意脚本来自当前HTTP请求
- **存储型XSS**：恶意脚本被存储到服务器
- **DOM型XSS**：通过修改DOM环境实现的XSS

## 二、jQuery中的XSS风险点

### 2.1 常见危险方法
jQuery中容易引发XSS的API主要包括：

```javascript
// 高风险方法
.html() 
.append()
.prepend()
.before()
.after()
$('<div>'+userInput+'</div>') // 动态创建元素

2.2 典型漏洞场景

当开发者直接使用用户输入拼接HTML字符串时：

// 危险示例
var userComment = getURLParameter('comment'); 
$('#comment-box').html(userComment);

三、漏洞复现实战

3.1 实验环境搭建

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="content"></div>
  <script>
    $(function(){
      var input = decodeURIComponent(location.hash.slice(1));
      $('#content').html(input);
    });
  </script>
</body>
</html>

3.2 攻击Payload示例

http://vuln-site.com#<img src=x onerror=alert(document.cookie)>

3.3 漏洞原理分析

location.hash获取URL片段
decodeURIComponent解码内容
.html()方法直接渲染未过滤内容
触发onerror事件执行JS代码

四、jQuery XSS深层原因

4.1 设计哲学问题

jQuery早期设计强调”write less, do more”，导致： - 过多便捷方法忽略安全性 - 隐式HTML解析行为

4.2 常见错误模式

字符串拼接：$('<div>'+untrustedData+'</div>')
属性注入：$(elem).attr('onclick', userData)
选择器注入：$('#' + userInput)

五、防御方案

5.1 输入过滤

function sanitize(input) {
  return input.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
              .replace(/<\/?[a-z][^>]*?>/gmi, '');
}

5.2 安全输出

// 使用text()替代html()
$('#output').text(userContent);

// 使用DOM方法
var div = document.createElement('div');
div.textContent = userContent;
$('#output').append(div);

5.3 CSP防护

Content Security Policy头示例：

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'

5.4 现代替代方案

// 使用DOMPurify
$('#output').html(DOMPurify.sanitize(userHtml));

// 使用模板引擎
Handlebars.compile('<div>{{{content}}}</div>')({content: userInput});

六、jQuery安全编码规范

强制规则：
- 永远不要直接使用.html()插入未过滤内容
- 动态创建元素时使用$('<div>')而非$('<div>'+content+'</div>')
推荐实践：

// 安全创建元素
var $div = $('<div>').text(userText);
$('#container').append($div);

// 安全设置属性
$elem.attr('data-value', sanitize(userValue));

七、历史漏洞案例

7.1 CVE-2020-¹¹⁰²²⁄₁₁₀₂₃

jQuery 3.x之前版本存在的XSS漏洞，当使用含有特殊属性的对象时可能执行代码。

修复方案：升级到jQuery 3.5.0+

7.2 jQuery Mobile XSS

2016年发现的通过data-url参数触发的XSS漏洞。

八、总结

核心问题：jQuery便捷的DOM操作API容易被误用
关键防御：
- 输入验证 + 输出编码
- 最小化DOM操作
- 使用现代安全API
长期方案：考虑迁移到Vue/React等现代框架

最佳实践提示：即使是内部系统也应该实施XSS防护，防止权限提升攻击。

参考资料

OWASP XSS防护手册
jQuery官方安全指南
CVE漏洞数据库记录

”`

（注：实际字数约1500字，可根据需要删减部分章节调整到1350字左右）