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

js安全开发1

打包器-WebPack-使用&安全

1
2
3
参考：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。
1
2
3
4
5
使用：
1、创建需打包文件
2、安装 webpack 库
3、创建 webpack 配置文件
4、运行 webpack 打包命令

创建一个加法js，减法js

count.js

1
2
3
export default function count(x,y){
    return x-y;
}

sum.js

1
2
3
export default function sum(x,y){
    return x+y;
}

main.js

1
2
3
4
5
import count from "./js/count";
import sum from "./js/sum";

console.log(count(2,1));
console.log(sum(2,1));

这里这个main.js包含了sum和count这两个js文件。然后这里调用这两个函数进行传参。

Snipaste_2025-06-08_16-43-39

到浏览器的控制台可以看到js的输出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>
</body>
</html>

全局安装webpack

1
npm i webpack-cli -g
创建webpack.config.js(配置文件)（最好不要改名）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path'); // 引入path模块
// entry：输入是src下的mian文件
// output: 输出在dist文件夹下额bundle.js
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        clean: true,
    },
    mode:"development",			//这个是开发模式，源码会泄露
    //mode:"production",		//这个是生产模式，看不见源码
    
};

进行打包

1
npx webpack

Snipaste_2025-06-08_16-54-11

如果没有使用打包器的话，这里就要一条一条的进行引用，这里使用打包器之后，只需要引用打包器生成的js文件即可。

Snipaste_2025-06-08_16-55-05

Snipaste_2025-06-08_16-57-09

development模式

Snipaste_2025-06-08_16-57-40

这个模式是可以直接看到源码的

production模式

Snipaste_2025-06-08_16-59-33

这里切换模式。

Snipaste_2025-06-08_16-59-40

这里在对这个文件进行查看，发现只输出了结果。

Snipaste_2025-06-08_17-00-33

在前端同样是看不到源码的

真实案例—顺丰快递

Snipaste_2025-06-08_17-01-09

PacketFuzzer

项目地址：https://github.com/rtcatc/Packer-Fuzzer

Snipaste_2025-06-08_17-02-22

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

下载：https://www.jq22.com/jquery-info122

有问题的版本：https://research.insecurelabs.org/jquery/test/

Snipaste_2025-06-08_17-03-53

CVE-2020-11022/CVE-2020-11023

参考文章：https://blog.csdn.net/weixin_44309905/article/details/120902867

jQuery框架漏洞全总结及开发建议：https://cloud.tencent.com/developer/article/1516331

Snipaste_2025-06-08_17-09-40

点击上图按钮，这里就会弹窗1：

Snipaste_2025-06-08_17-09-44

Snipaste_2025-06-08_17-14-39

Snipaste_2025-06-08_17-15-18

Snipaste_2025-06-08_17-16-13

但是这里将版本进行切换：

Snipaste_2025-06-08_17-18-33

Snipaste_2025-06-08_17-20-28

以及不弹窗了。语句还是正常的插入到div标签中。

说明jquery有内置的过滤。

1
2
3
4
5
6
7
8
本身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

能够造成漏洞的原因：

内置过滤：https://blog.csdn.net/axxxwo/article/details/120586585