Source Maps Not Mapping to Original Source After Javascript Obfuscation #19264

Bradeep · 2025-02-28T13:47:12Z

Bradeep
Feb 28, 2025

Context

I'm working on a project where I'm using Webpack for bundling, Terser for minification, and JavaScriptObfuscator for obfuscation.

Everything works fine, and the final bundle contains obfuscated code. However, when I enable source maps, they do not work as expected. In Chrome DevTools:

Without obfuscation, source maps correctly map to the original source files.
After obfuscation, source maps only map to the bundled file rather than the original source code.

Obfuscation Configuration
I'm applying obfuscation after Terser, and my JavaScriptObfuscator configuration is as follows:

const obfuscationResult = JavaScriptObfuscator.obfuscate(fileContent, {
    identifierNamesGenerator: "hexadecimal",
    renameGlobals: true,
    transformObjectKeys: false,
    stringArray: true,
    stringArrayThreshold: 0.5,
    rotateStringArray: false,
    splitStrings: false,
    controlFlowFlatt
8000
ening: false,
    deadCodeInjection: false,
    selfDefending: false,
    debugProtection: false,
    unicodeEscapeSequence: true,
    sourceMap: true,  
    sourceMapMode: 'separate',
    sourceMapSourcesMode: 'sources-content' 
}); 

const obfuscatedCode = obfuscationResult.getObfuscatedCode();
const sourceMap = generateSourceMaps ? obfuscationResult.getSourceMap() : '';
const obfuscatedCodeWithMap = generateSourceMaps 
    ? `${obfuscatedCode}\n//# sourceMappingURL=${fileName}.map` 
    : obfuscatedCode;

Webpack Plugin Configuration

The obfuscation step is applied after Terser, during the processAssets stage:

compiler.hooks.thisCompilation.tap('WebpackObfuscator', (compilation) => {
    compilation.hooks.processAssets.tapAsync(
        {
            name: 'WebpackObfuscator',
            stage: webpack.Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING, // Runs after Terser
        },
        (assets, callback) => {
          // Pass the following jsFiles to the obfusctor for obfuscation . 
           const jsFiles = Object.keys(assets)
                                .filter(file => file.endsWith('.bundle.js') && !file.includes('.obfuscated.js')); 
          
           // Some logics to interact with obfuscte-workers

          // Recieving the obfuscatedContent and sourceMap from Obfusctor and updating/emitting the assets
            compilation.updateAsset(
                msg.fileName,
                new webpack.sources.RawSource(msg.obfuscatedContent)
            );

            // Emit source maps alongside obfuscated files
            const sourceMapFileName = `${msg.fileName}.map`;
            compilation.emitAsset(
                sourceMapFileName,
                new webpack.sources.RawSource(msg.sourceMap)
            );
        }
    );
});

Apart from the above configurations, I have given devtool: source-map and optimization as

optimization: {
    minimize: true,
    minimizer: [
	new TerserPlugin({
	    terserOptions: {
		compress: {
		    drop_console: true,
		},
		mangle: true,
		sourceMap: true,
		output: {
		    comments: false,
		}
	    },
	    parallel: 3,
	})
    ],
    usedExports: true,
}

Issue & Expected Behavior

Current Behavior:
- Source maps generated after obfuscation only map to the bundled file (post-Terser) rather than the original source files.
- This makes debugging difficult since the mappings do not trace back to the actual source code.
Expected Behavior:
- Source maps should correctly map all the way back to the original source files before bundling.

Questions

How can I correctly configure JavaScriptObfuscator and Webpack so that the source maps retain mappings to the original source code?
Is there an additional processing step required to merge Webpack’s source maps with the obfuscation source maps?
Has anyone successfully achieved correct source mapping with Webpack, Terser, and JavaScriptObfuscator together?

Any guidance or best practices would be greatly appreciated! 🙌

alexander-akait · 2025-02-28T14:26:42Z

alexander-akait
Feb 28, 2025
Maintainer

You should use SourceMapSource instead RawSource for maps, there is an example how to work with them - https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/src/index.js#L601

2 replies

Bradeep Mar 4, 2025
Author

Thanks for the quick response! Your insights on using SourceMapSource really helped—I can generate source maps now. But I’m still struggling to properly map the obfuscated code back to the original source

What's Happening
I attempted to manually inject the source code into the final bundle, but the debugger is not working with the injected source code. This might be because the mappings between the obfuscated code and the original source code are incorrect due to the manual injection.

Changes I Made
I modified my implementation to merge Webpack's original source map with the one generated by JavaScriptObfuscator. Here’s the key change:

const existingAsset = compilation.getAsset(msg.fileName);
const originalSource = existingAsset.source;
const originalSourceMap = originalSource.map(); // Get Webpack's source map

// Emit source maps alongside obfuscated files
    const sourceMapFileName = `${msg.fileName}.map`;
    const obfuscatedSourceMap = JSON.parse(msg.sourceMap);

    // Create a modified source map that preserves original sources
    const modifiedSourceMap = {
        ...obfuscatedSourceMap,
        file: msg.fileName,
        sources: originalSourceMap.sources,      // Preserve original file paths
        sourcesContent: originalSourceMap.sourcesContent,  // Preserve original source content
        names: [...new Set([
            ...originalSourceMap.names,          // Original variable/function names
            ...obfuscatedSourceMap.names         // Obfuscated names
        ])],
        mappings: originalSourceMap.mappings,
    };

    // Add sourceRoot if it exists in original source map
    if (originalSourceMap.sourceRoot) {
        modifiedSourceMap.sourceRoot = originalSourceMap.sourceRoot;
    }

    compilation.updateAsset(
        msg.fileName,
        new webpack.sources.SourceMapSource(
            msg.obfuscatedContent,    // Obfuscated code
            msg.fileName,             // Asset name
            modifiedSourceMap,        // New source map combining both
            originalSource.source(),  // Original source code
            originalSourceMap,        // Original source map
            true                      // Should compose source maps
        )
    );

Despite merging the source maps, the debugger still does not correctly map the obfuscated code to the original source code. I suspect this might be due to an incorrect transformation between the obfuscation and source map composition.

Any guidance on how to ensure proper source map mapping between the obfuscated and original source code? Thanks again for your help!

alexander-akait Mar 4, 2025
Maintainer

You should not change source maps manually, you should pass source maps from webpack to obfuscate and then create SourceMapSource:

const { input, inputSourceMap } = inputSource.sourceAndMap();
const { obfuscateOutput,  obfuscateSourceMap} = obfuscate(...);
            
new SourceMapSource(
  obfuscateOutput,
  assetNamename,
  obfuscateSourceMap,
  input,
  inputSourceMap,
  true
 );

If you still have problems with source maps make sense to report about this problem to the obfuscate package, maybe bug on their side...

triangletrianglesquareplusx · 2025-08-13T10:40:06Z

triangletrianglesquareplusx
Aug 13, 2025

is

optimization: {
    minimize: true,
    minimizer: [
	new TerserPlugin({
	    terserOptions: {
		compress: {
		    drop_console: true,
		},
		mangle: true,
		sourceMap: true,
		output: {
		    comments: false,
		}
	    },
	    parallel: 3,
	})
    ],
    usedExports: true,
}

this way you've written out TerserPluging correct? Specifically sourceMap: true? The documentation puts it inside the terserOptions?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack

Source Maps Not Mapping to Original Source After Javascript Obfuscation #19264

Uh oh!

{{title}}

Uh oh!

Current Behavior:

Expected Behavior:

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

webpack

Source Maps Not Mapping to Original Source After Javascript Obfuscation #19264

Uh oh!

Bradeep Feb 28, 2025

Context

Webpack Plugin Configuration

Issue & Expected Behavior

Current Behavior:

Expected Behavior:

Questions

Replies: 2 comments · 2 replies

Uh oh!

alexander-akait Feb 28, 2025 Maintainer

Uh oh!

Bradeep Mar 4, 2025 Author

Uh oh!

alexander-akait Mar 4, 2025 Maintainer

Uh oh!

triangletrianglesquareplusx Aug 13, 2025

Bradeep
Feb 28, 2025

Replies: 2 comments 2 replies

alexander-akait
Feb 28, 2025
Maintainer

Bradeep Mar 4, 2025
Author

alexander-akait Mar 4, 2025
Maintainer

triangletrianglesquareplusx
Aug 13, 2025