Javascript for bug bounty hunters — part 1
As of today, I’ll start a series of articles targeting javascript files and it’s importance from a bug hunter perspective I’ll discuss the available attack vectors and problems
Chapter 1: The Technologies
In modern days no one directly uses javascript instead they use a framework especially if you are a company and want to get the work done as fast as possible. There are a lot of frameworks out there however all of them will just get translated back to javascript (with some fancy functions and wrappers). some of the frameworks are
- React
- Vue
- Ember
- Meteor
- Mithril
You may get confused with all the available frameworks. but just know it’s all javascript with some fancy functions.
Chapter 2: Debugging Javascript code
Chrome provides a fast way to debug and inspect javascript code using the DevTools tab
I will not discuss how to use it since there is a lot of videos on the internet that will guide you forward
Chapter 3: Understanding ReactJS
React is one of the most successful libraries out there and it’s developed and maintained by Facebook
A pure hello world in React will look like this
After a fancy work is done on it it will be converted to intermediate javascript code like this
As you can see in itself the code is not pure javascript it still uses the React APIs. keep that in mind while reading the next chapter
Chapter 4: Attacking React.js
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 will contain 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:
- sources are often combined and minified to make delivering them from the server more efficient.
- JavaScript running in a page is often machine-generated, as when compiled from a language like CoffeeScript or TypeScript.
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
//# sourceMappingURL=main.2b0f621f.chunk.js.mapWhat 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
