Introduction

Modern day web applications typically use JavaScript frameworks such as React, Vue, and Angular when developing the frontend portion of an application. As an ethical hacker, penetration tester, bug bounty hunter, or some other offensive security professional, you will need to know the tips and tricks when testing these types of applications. 

One of my go-to techniques is to look for source map files that can be used to disclose the original source code of the application. Since this is for the frontend, some companies might not consider this a vulnerability. However, as a tester, having access to this information makes understanding the application’s logic a whole lot easier and you might be able to find hard-coded passwords and API keys hidden in the original source code.

React JS

According to Google, “React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.” As a security professional, all you need to know is that React JS is a very popular frontend programming language, so you will most likely encounter it at some point.

Transpilers

Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. React JS is a programming language; but while browsers don’t understand React, they do understand JavaScript. This means that in order for the browser to understand the React JS code, a transpiler must first be used to turn the React code into native JavaScript code.

As shown above, the generated code is not very human-friendly, which makes sense because it was generated by a machine. However, your browser can understand this perfectly and it allows your React code to run in the browser.

Source Maps

One of the problems when dealing with machine-generated code arises when developers try to debug their code. Any errors thrown by the browser will correspond to the generated JS file, not the original React source code. So if the browser says there's an error on line 300, the developer has no way of corresponding that line number to the original React code. To combat this, source maps were introduced and can be used to link back to the original source code. If a source map is found, Google Chrome will automatically compile the original source code as shown below:

As you can see above, we now have access to the original source code. As a security professional, this is 100 times easier to work with than the compiled source code.

The Attack

Now that we understand a little bit more about the React JS compilation process, we can leverage some of the functionalities to our advantage. The main goal of this technique is to expose the front end source code so we can have an easier time analyzing the application. 

The first step is to identify a site running ReactJS. Once you have identified this site, you will want to look in the HTML source code for the following:

As shown above, we are looking for a JavaScript file call “/static/js/main.chunk.js”, note I’ve also seen the file named “/static/js/main.<RANDOM-STRING>.chunk.js” with the word “<RANDOM-STRING” being replaced by a random string such as “aa7788371d”.

Once you have identified the JavaScript file, try appending “.map” and see if it looks like the following:

If you see something like the image above, you know the site has source mapping enabled which means you will be able to view the original source code. When analyzing the source code, you can treat it like a source code analysis engagement looking for:

• Hard coded API keys
• Hard coded passwords
• Logic Flaws
• XSS
• Ect

Automation

Here at Red Sentry, we build next-gen offensive security tools for enterprise customers. We do this by automating anything and everything. Looking at the workflow below, you can picture how this whole attack can be completely handled through automation:

This is exactly what Red Sentry does. We automate the process so you don't have to worry about it. All you have to do is type in a domain or CIDR range, and the external scanner will do the rest.

Everything is automated and the asset will be continuously monitored by the platform unless disabled. The Red Sentry platform handles the recon, fingerprinting, exploitation, and reporting phase of an engagement. If you would like to learn more, feel free to reach out.

Conclusion

With new technologies come new misconfigurations. React JS is a rising programming language for developing front end applications, and if you're not careful, you might end up exposing sensitive information. If an application ships with source maps included, those files can be leveraged by attackers to generate the original source code, giving them an easier crack at the application. As offensive security professionals, you can leverage these same files to perform a successful engagement.