Write-Up — JavaScript / Webpack

Context

At the beginning of the challenge, I didn't even know what Webpack was. So the first thing I did was research it.

What is Webpack?

Webpack is a JavaScript module bundler.

Bundles multiple JavaScript files into one (or a few) files
Manages dependencies (imports / exports)
Minifies and optimizes code
Commonly used with frameworks like Vue.js

Instead of serving many readable JS files, a production build typically generates files like:

app.xxxxx.js
vendor.xxxxx.js
manifest.xxxxx.js

Note: The resulting code is minified and optimized for performance, making it harder to read — but Webpack does not provide any security. The code is still fully accessible to users.

Accessing the Challenge

Challenge URL:

http://challenge01.root-me.org/web-client/ch27/#/

After inspecting the page (F12 → Elements / Sources), I noticed three interesting JavaScript files:

DevTools showing the three JS bundle files

Accessing the JavaScript File Directly

I copied the following URL into the browser address bar:

http://challenge01.root-me.org/web-client/ch27/static/js/app.a92c5074dafac0cb6365.js

Browsing to the JS bundle directly in the address bar

JavaScript files loaded by a website are publicly accessible. Accessing them directly allows analysis of the raw bundle without using the web interface.

Why put the JS file in the URL?

This is a common CTF technique: when you see interesting JS files in the network or sources panel, navigating to them directly gives you the full bundle immediately, without needing to interact with the page UI.

Analyzing app.js

Inside the file, I saw something like:

webpackJsonp([0],{ ... })

This is a typical structure generated by Webpack. I could see compiled Vue components, render functions, router configuration, and component definitions — confirming the app was built with Webpack + Vue.js.

Discovering the Source Map

At the bottom of the JavaScript file, I noticed:

//# sourceMappingURL=app.a92c5074dafac0cb6365.js.map

A .map file is a source map. When Webpack builds an application, it transforms, minifies, and bundles the original code. A source map links the minified code back to the original readable source code.

Source maps are generated when the devtool option is enabled in the Webpack config. They are very useful in development, but dangerous if exposed in production.

Exploitation

I accessed the .map file directly in the browser:

app.a92c5074dafac0cb6365.js.map

This downloaded the source map file. Then I searched for the keyword Flag inside it and immediately found:

Did you know that comment are readable by the end user ?
// Well, this because I build the application with the source maps enabled !!!

// So please, disable source map when you build for production

// Here is your flag : BecauseSourceMapsAreGreatForDebuggingButNotForProduction

Conclusion

This challenge demonstrates a common security mistake: never deploy source maps in production.

They expose internal application logic
They reveal original source code
They may contain sensitive comments or secrets
They make reverse engineering significantly easier

Flag

BecauseSourceMapsAreGreatForDebuggingButNotForProduction

Have a good day! — @Swif2D