项目经Terser混淆后仍可在浏览器查看源码的问题求助

使用Webpack的Terser Plugin对项目代码进行混淆处理后，本地构建产物已变为不可读的乱码，但部署后在浏览器中能看到未压缩、未混淆的完整代码及文件夹结构，需要解决代码保护问题，怀疑与Sourcemap有关，但不确定具体处理方式。

技术环境细节 #

• 项目通过Create React App（CRA）创建，使用craco修改原生Webpack配置
• Webpack配置代码：

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = (argv) => {
    const webpack = {
        alias: {
            components: path.resolve(__dirname, "src/components"),
            context: path.resolve(__dirname, "src/context"),
            hooks: path.resolve(__dirname, "src/hooks"),
            router: path.resolve(__dirname, "src/router"),
            services: path.resolve(__dirname, "src/services"),
            utilities: path.resolve(__dirname, "src/utilities"),
            uiKit: path.resolve(__dirname, "src/components/uiKit"),
        },

        optimization: {
            runtimeChunk: "multiple",
            splitChunks: {
                chunks: "all",
            },
        },
        entry: {
            index: {
                import: path.resolve(__dirname, "src/index.jsx"),
            },
        },
    };
    if (argv.env && argv.env === "production") {
        webpack.optimization = {
            ...webpack.optimization,
            minimize: true,
            nodeEnv: "production",
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        format: {
                            comments: false,
                        },
                        compress: true,
                    },
                    extractComments: false,
                }),
            ],
        };
    }

    return webpack;
};

• package.json中的构建脚本：

"start": "npx env-cmd -f config/dev.env craco start",
"build:test": "npx env-cmd -f config/test.env craco build",
"build:prod": "npx env-cmd -f config/prod.env craco build"

• 本地混淆后代码截图：
• 浏览器中显示的源码截图：

解决方案 #

1. 禁用Sourcemap #

你的猜测正确，浏览器能还原源码的核心原因是Sourcemap文件被部署到了服务器。CRA默认在生产构建时生成Sourcemap，这些.map文件会和构建产物一起输出，浏览器加载后会自动还原源码。

方法一：在craco配置中禁用

module.exports = (argv) => {
    const webpack = {
        // ... 现有配置
    };

    if (argv.env && argv.env === "production") {
        // ... 现有optimization配置
        // 添加禁用Sourcemap的配置
        webpack.devtool = false;
    }

    return webpack;
};

方法二：通过环境变量禁用

修改package.json的构建命令，添加GENERATE_SOURCEMAP=false：

"build:prod": "GENERATE_SOURCEMAP=false npx env-cmd -f config/prod.env craco build"

2. 增强Terser混淆强度 #

当前Terser仅开启了基础压缩和注释移除，可通过以下配置提升混淆力度：

new TerserPlugin({
    terserOptions: {
        format: {
            comments: false,
        },
        compress: {
            drop_console: true, // 移除所有console语句
            drop_debugger: true, // 移除debugger断点
            pure_funcs: ['console.log'] // 指定强制移除的函数
        },
        mangle: {
            toplevel: true, // 混淆顶层作用域的变量名
            keep_classnames: false, // 不保留类名称
            keep_fnames: false // 不保留函数名称
        },
        sourceMap: false // 确保Terser不生成Sourcemap
    },
    extractComments: false,
})

3. 检查部署流程 #

• 确认部署脚本中排除了.map文件，避免将其上传到服务器
• 检查服务器静态文件服务配置，禁止对外暴露.map文件的访问路径

额外建议 #

前端代码无法做到绝对不可破解，混淆仅能提高逆向成本。若核心逻辑需要更强保护，可考虑：

• 将核心业务逻辑迁移到后端，通过API提供服务
• 使用专业混淆工具（如Obfuscator.io、JSDefender）进一步增强代码保护

内容的提问来源于stack exchange，提问作者Alihan Keskin