Javascript for bug bounty hunters — part 1

A simple hello world from ReactJs will not just include your code it will bundle the whole library code with it. Here is an example of built ReactJS application it’s also the same code that will be served to your browser

We will ignore all the files except main.[hash].js since this is the will containing our code. opening it indeed reveals that it’s out hello world code

Our 1 line hello world code produced 17 lines of native javascript code. react tried to optimize and minify the code only strings will be constant however any variables or functions declared will be changed to much smaller and unreadable name this means decompiling and reverse engineering these files is a nightmare.

Chapter 4–1: .map files to the rescue!

The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:

In these situations, it’s much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.

By default, React generates map files and serve them to the browser, most of the developers don’t remove map files from the final build or forget to do so. giving us (as a bug hunters) a way to see and examine the original source code.

Chapter 4–2: Accessing the source code

By using the Chrome DevTools you will notice an orange colored folder appeared containing our original source code, not the minified version

This is because Chrome identified the presence of a map file at the minified source code. How is that? - you ask. This is done by using this micro sourceMappingURL The browser will send a request to the specified URL (usually is the original javascript file path + .map) and decode the map file all that in the background

What if the micro is not present by default at the javascript files? A small tool I created is made to just solve this problem called BitMapper it’ll add the sourceMappingURL micro to every javascript file it sees giving us a way to force the browser to decode the hidden map files.

Using this trick will greatly improve the debugging process giving us a way to focus on the important stuff rather than waste time with understanding the minified code

At the next article, I’ll discuss how ReactJS divides javascript files to chunks and how to remerge them together to access the full source code + writeup and also will take a look at how to attack Meteor.js apps