【问题解决】发现Web应用程序源代码泄露模式

1. 漏洞描述

AppScan扫描软件的安全报告中，有一类漏洞被描述为：“发现Web应用程序源代码泄露模式”。

该类问题指的是在服务器端，Web应用程序的开发者工具(Devtools)中的Sources面板中可以看到前端build构建之后的相关源代码，包括HTML、CSS和JavaScript。在生产环境中如果能查看前端项目build后的代码，这样会存在泄漏应用程序逻辑以及用户名和密码之类的敏感信息的风险。

2. 解决方案

可以通过对JavScript代码进行混淆和压缩，以减少通过查看源代码来理解它的可能性。混淆能够使得代码变得难以阅读和理解，提升源代码的安全性和难以阅读性。前端项目代码中，目前可以使用插件UglifyJsPlugin混淆Js代码，该插件主要用于压缩JavaScript代码，它会删除空格、注释以及其他不必要的字符，从而减小文件大小，提高加载速度。除了压缩，UglifyJsPlugin还可以对代码进行混淆，这意味它会重命名变量和函数，使代码更难以理解。

在React项目中，需要在webpack.config.js文件中对UglifyJsPlugin进行配置，配置代码示例如下：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpackBaseConfig = require('./webpack.base.config.js');

module.exports = {
  // ...其他Webpack配置...

   webpackBaseConfig.optimization.minimizer = [
    new UglifyJsPlugin({
		cache: true,
		parallel: false,//并行优化构建
		sourceMap: true,
        uglifyOptions: {
            output: {
                comments: false  //删除注释
            },
            warnings: false,
            compress: {
                drop_debugger: true,//打包删掉debugger
                drop_console: true,//打包删掉console.log
            },
            mangle:{//使用mangle选项，将变量名和函数名重命名为难以理解的名称，以减少代码的可读性
                toplevel: true,//toplevel为true时，可以混淆全局作用域下的变量名
                reserved:['React','ReactDOM']//保留不想被混淆的变量名，通常保留React和ReactDOM等全局变量以确保React应用正常运行
            }
        }
    })
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

配置项解释：
cache: true：此选项启用 UglifyJS 结果的缓存。缓存可以通过在源代码未更改时重复使用以前缩小的代码来加快构建过程。

parallel: false：此选项禁用了优化期间的并行处理。当设置为 true 时，UglifyJS 可以使用多个 CPU 核心以加速缩小过程。

sourceMap: true：此选项生成源映射。源映射对于调试很有用，因为它们将缩小的代码映射回原始源代码，从而更容易识别源代码中的问题。

uglifyOptions：此对象包含了 UglifyJS 优化器的各种设置。

output：一个指定缩小输出选项的对象。

comments: false：此选项从缩小的代码中删除注释。通常在生产构建中执行此操作以减小文件大小。
warnings: false：此选项禁用 UglifyJS 警告。

compress：一个包含代码压缩设置的对象。

drop_debugger: true：当设置为 true 时，此选项会从代码中删除所有 debugger 语句。debugger 语句通常用于调试，通常会在生产构建中移除。

drop_console: true：当设置为 true 时，此选项会从代码中删除所有 console.log 语句。这通常在生产构建中执行，以防止控制台消息出现在输出中。