Approaches To Decompile Electron JS Application

This article was prevously published in medium

Hello, this is Muhammad Lutfi Rahmawan and this is my first article on Medium. Hence this is my first article, I apologize if there are any grammatical mistakes. In this article, I will share a piece of knowledge that I have in reversing executable application.

A few days ago, I participated in the national Capture The Flag (CTF) competition. There were several challenges given to participants in various categories such as cryptography, reverse engineering, web exploitation challenge, and miscellaneous. There was a challenge that entice me. The challenge was a desktop application categorized as miscellaneous, but to solve this challenge participants were required to have reverse engineering skill. The application was built using Electron JS.

Electron JS is a Javascript framework to help developers create their desktop application using web technologies that are rendered using a flavor of the Chromium browser engine, and a backend using the Node JS runtime environment.

The given application was a simple gambling game that asked the participants to reach a certain point to get a flag. Please remember that this is not a write-up for the challenge so we will ignore the way how to get the flag. We will focus on how to decompile the application using different approaches.

Since I know that this app was built using Electron JS, I tried to research in Google how to retrieve the source code from the compiled Electron JS app given. After spending a lot of time I get some interesting information here.

The article stated that compiled Electron JS applications are generally packed using asar and that is a hint that I can unpack it to get the original source code from the application. This is the step to get the source code by .asar file of the application.

cd /Applications/[APP-NAME]/Contents/Resources
mkdir example-sourcecode
asar extract app.asar example-sourcecode

But how do we get .asar file extension in the given application? Where is it located in our computer?

Temporary File

The .asar file can be found easily in the temporary directory during the application is running. What we need to do first is enable ‘Toogle Developer Tools’ by clicking it on the ‘View’ menu bar or by pressing ‘CTRL+Shift+I’.

After the developer tool is opened, go to the ‘Sources’ tab and we will be shown the file structure used by the application.

We will notice that there is ‘app.asar’ in directory C:/Users/WINDOW~1/AppData/Local/Temp/2ECXcaEbb24DsVsv1FgI0vhk95G/resources/app.asar

Get there and unpack the app.asar file using asar extract app.asar DESTINATION_PATH and finally we will get what we want.

Packed Inside Apllication

app.asar can also be found by de-archiving the executable file using 7z. Here are the steps:

After extracting the application we get several files as follows:

The first one is also packed using 7z archiver, so we need to extract again using 7z archiver to see the archived files inside. And these are what we get:

So we remember that app.asar is located in C:/Users/WINDOW~1/AppData/Local/Temp/2ECXcaEbb24DsVsv1FgI0vhk95G/resources/app.asar on previous method. By ignoring C:/Users/WINDOW~1/AppData/Local/Temp/2ECXcaEbb24DsVsv1FgI0vhk95G/ we will get the current path as the root path of the application project. Go to resources folder we will see app.asar where the actual source code are packed. Unpack ‘app.asar’ we will get the source code.