I. Introduction
A .js.map file is a JavaScript Source Map file. It stores the mapping between compressed/minified code and the original source code. Its main purpose is to help developers debug by restoring compressed code into a readable form, making it easier to locate issues quickly.
During penetration testing, we often encounter numerous websites bundled with Webpack. The loaded JavaScript files are frequently obfuscated with mangled variable names, which makes it difficult for a tester to directly inspect different APIs and debug the web pages.
How can Webpack lead to Vue source code leaks?
- Source Map (.map files) exposing original code
Problem: Webpack generates Source Map files by default for debugging minified code. If these .map files are deployed in production, attackers can use tools (e.g., reverse-sourcemap) to fully reconstruct the original source code.
Example: A bundled file app.js comes with app.js.map. An attacker can run:
bashreverse-sourcemap --output-dir ./stolen_src ./dist/app.js.map
This restores Vue components, API endpoints, encryption logic, and more.
- Uncompressed / Unobfuscated code
Problem: If Webpack is not configured to use compression (e.g., TerserPlugin) or obfuscation (e.g., uglifyjs), the bundled code may still contain readable variable names, comments, or even sensitive data.
Example:
jsconst API_KEY = "sk_live_123456"; // Stripe Stripe production key
An attacker can simply search for keywords such as API_KEY, password, or secret in bundle.js to find sensitive information.
- Webpack's mode: 'production' was not set correctly.
Problem: If mode: 'production' is not configured, it may lead to:
- No code compression or optimization
- Debug code from the development environment (e.g., Vue devtools warnings)
- Exposure of unused code paths (e.g., test APIs, disabled features)
- Third-party dependency leaks
Problem: If the project uses third-party libraries that contain hardcoded sensitive data, they will also be bundled into bundle.js.
Example: Some libraries may include test database passwords or internal API endpoints in their code.
II. Tools
- reverse-sourcemap
A tool used to reconstruct JavaScript or CSS source code from .map files.
Installation
a. Requires Node.js and npm.
b. Install globally with:
npm install --global reverse-sourcemap
c. Verify installation:
reverse-sourcemap -h
Usage
Extract source code into a directory:
reverse-sourcemap --output-dir sourceCode example.js.map
For recursive processing of multiple .map files:
reverse-sourcemap -r --output-dir sourceCode
- SourceDetector (Chrome Extension)
Overview
SourceDetector is a Chrome extension that automatically detects .map files and downloads them locally.
Project URL
https://github.com/LuckyZmj/SourceDetector-dist
Usage
Download the ZIP, extract it, and load the dist folder as a Chrome extension.
When browsing, the extension will automatically detect .map files.
It groups source files by domain and allows you to download all or selected source code files.
III. Real-World Example
During a penetration test, a target site was found:
http://oa.xxxxx.com:2345/login?redirect=%2F
The login page couldn’t be bypassed with standard methods.
A .js.map file was discovered. After decompiling, many APIs were revealed.
Further analysis showed some APIs without proper authorization, but they were not very useful. The login was still not bypassed.
By fingerprinting, a similar test system was found:
http://xx.xx.xx.xx:7777/
Using a super-admin account to log in and reviewing traffic in Burp Suite revealed an API that returned administrator credentials via a token:
/xx/xx/getInfoByToken?token=eyJxx.xx.xx
From Research to Real-World Security
Every article we publish reflects real-world security risks. If you’d like these insights applied to your systems, our team can help with custom penetration testing and security assessments.