1525 字

8 分钟

第31天：安全开发-JS应用

2025-08-07

安全开发

/

JS应用

/

网络安全

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

目录#

知识点
演示案例
为什么使用WebPack
打包器-WebPack-使用&安全
第三方库-JQuery-使用&安全

知识点：#

第三方库-JQuery的使用与安全问题
打包器-WebPack的使用与安全问题

演示案例：#

打包器-WebPack-使用&安全
第三方库-JQuery-使用&安全

为什么使用WebPack#

在传统前端开发中，若JS文件存在依赖关系且引入顺序不当，会导致代码无法正常执行。例如：

创建目录src，并在其中创建1.js和2.js：

1.js

1
function test(){
2
    console.log('test');
3
}

2.js

1
test(); // 依赖1.js中的test函数

创建index.html并引入上述JS文件：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9
<body>
10
    <script src="src/2.js"></script> <!-- 先引入2.js，此时test函数未定义 -->
11
    <script src="src/1.js"></script>
12
</body>
13
</html>

上述代码中，由于2.js先于1.js引入，执行test()时会报错，这体现了传统开发中依赖管理的痛点。

使用WebPack的核心优势：

模块化支持：将代码拆分为独立模块，通过import/export管理依赖，解决顺序依赖问题。
资源打包：将JS、CSS、图片等资源统一打包，减少网络请求次数。
代码分割：支持按需加载代码块，提升初始加载速度。
资源优化：通过插件实现代码压缩、图片优化等，减小文件体积。
开发效率提升：提供热模块替换、源码映射等功能，简化开发流程。

打包器-WebPack-使用&安全#

WebPack是一个静态模块打包器，它会递归分析项目中所有模块的依赖关系，最终打包生成浏览器可直接运行的静态资源。

WebPack核心概念#

入口（entry）：WebPack构建依赖图的起点，通常是一个JS文件（如src/main.js）。
输出（output）：指定打包后文件的输出路径（如dist目录）和文件名（如bundle.js）。
Loader：用于处理非JS文件（如CSS、图片），将其转换为WebPack可识别的模块。
插件（plugins）：扩展WebPack功能，如代码压缩（TerserPlugin）、HTML生成（HtmlWebpackPlugin）等。
模式（mode）：
- development：开发模式，保留源码注释和映射，便于调试。
- production：生产模式，自动启用代码压缩和优化，文件体积更小。

WebPack使用步骤#

1. 准备项目文件#

创建目录结构：

1
project/
2
├─ src/
3
│  ├─ js/
4
│  │  ├─ sum.js
5
│  │  └─ count.js
6
│  └─ main.js  // 入口文件
7
└─ index.html

编写模块代码： sum.js

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

count.js

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

main.js（入口文件，导入其他模块）

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

4
console.log("1 + 2 =", sum(1, 2)); // 输出3
5
console.log("1 - 2 =", count(1, 2)); // 输出-1

2. 安装WebPack#

1
# 全局安装WebPack和命令行工具
2
npm install webpack webpack-cli -g

3. 创建配置文件#

在项目根目录创建webpack.config.js（文件名固定）：

1
const path = require('path');
2

3
module.exports = {
4
    entry: './src/main.js', // 入口文件
5
    output: {
6
        path: path.resolve(__dirname, 'dist'), // 输出目录
7
        filename: 'bundle.js', // 输出文件名
8
        clean: true // 每次打包前清空dist目录
9
    },
10
    mode: "development" // 开发模式（可选production）
11
};

4. 执行打包命令#

1
npx webpack

打包成功后，会在dist目录生成bundle.js。

5. 引用打包文件#

修改index.html，引用打包后的bundle.js：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>WebPack Demo</title>
7
</head>
8
<body>
9
    <script src="./dist/bundle.js"></script>
10
</body>
11
</html>

在浏览器中打开index.html，控制台会输出计算结果。

WebPack安全风险及防护#

1. 源码泄露风险#

风险场景：development模式下，WebPack会生成源码映射（source map），攻击者可通过映射文件还原原始代码，获取敏感信息（如API密钥、逻辑漏洞）。

防护措施：生产环境强制使用production模式，禁用源码映射：

1
module.exports = {
2
    mode: "production",
3
    devtool: false // 禁用source map
4
};

2. 第三方依赖风险#

风险场景：项目依赖的第三方库可能存在漏洞（如XSS、代码执行），被打包后引入项目。
防护措施：
- 使用npm audit检测依赖漏洞。
- 定期更新依赖至安全版本。
- 采用webpack-bundle-analyzer分析打包内容，移除冗余依赖。

3. 自动化安全检测工具#

模糊提取安全检查

Packer Fuzzer：一款针对WebPack等打包器的安全工具，可自动提取API及参数，检测未授权访问、SQL注入等漏洞。
- 项目地址：https://github.com/rtcatc/Packer-Fuzzer
- 功能：支持生成HTML、PDF等格式的扫描报告，简化漏洞分析流程。

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

JQuery简介#

JQuery是一个轻量级JavaScript库，封装了DOM操作、事件处理、Ajax等功能，核心特点是“写得少，做得多”。例如，通过$("div")可快速选取所有div元素，大幅简化代码。

JQuery使用方法#

1. 引入JQuery#

CDN引入（推荐，减少服务器压力）：

1
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

本地引入：下载JQuery文件（官网：https://jquery.com/，其他：https://www.jq22.com/jquery-info122 https://www.w3ccoo.com/jquery/jquery_download.html）放入项目目录后引用：
```
1
<script src="./jquery-3.6.0.min.js"></script>
```

2. 基础使用示例#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>JQuery Demo</title>
6
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
7
</head>
8
<body>
9
    <div id="demo">Hello</div>
10
    <script>
11
        // 选取元素并修改内容
12
        $("#demo").text("Hello JQuery");
13
        // 绑定点击事件
14
        $("#demo").click(function() {
15
            alert("Clicked!");
16
        });
17
    </script>
18
</body>
19
</html>

JQuery安全风险及防护#

1. XSS漏洞（CVE-2020-11022/CVE-2020-11023）#

风险场景：JQuery 3.5.0及以下版本中，$(html)等方法在解析HTML时存在漏洞，攻击者可注入恶意代码。例如：
```
1
// 漏洞版本中，以下代码会执行恶意脚本
2
$("<img src=x onerror=alert('XSS')>");
```
防护措施：
- 升级至JQuery 3.5.1及以上版本（修复了该漏洞）。
- 避免使用$(html)直接解析不可信内容，改用text()方法。