How To Reverse Engineer Websites

Know how things are made in an easy way

Photo by Sai Kiran Anagani on Unsplash

Reverse engineering websites is a process of understanding how a website is made. This can be done by looking at the source code of the website. In this article, I will teach you how we can leverage pre-existing browser tools to reverse engineer websites.

There are two major parts required to make a traditional website, i.e. frontend and backend/serverside code. Frontend code is responsible for creating visual elements of the website like positions of a logo, posts, texts, animation, etc. On the other hand, backend code is responsible for handling all the logical aspects of the website like which page to load, how many items to display, etc. Frontend and backend interact with each other using network request calls. When we open a website on the browser, only the frontend code is received on the browser and displayed. Since we can only use the browser to reverse engineer websites, we can only retrieve the frontend code and not the backend code.

The key aspect of reverse engineering a website is to understand the Developer Toolbar provided by the browsers. It allows us to interact and change the local copy of the web page on the fly. To open the DevTools use settings bar from the top right corner and navigate to Developer Tools. You can also use shortcut ‘Ctrl’ + Shift + “I” for most of the browsers like Chrome, Firefox, etc.

fig. Developer tool on Brave browser for the above website

The uppermost tab holds different options provided by the browser. We will first discuss each option in brief.

Elements: Provides the source code of the page displayed along with CSS.

Console: View messages from the server and run the javascript code.

Sources: Source code files of the website(front-end).

Network: View and debug network activity.

Performance: Tools to analyze and improve the performance of websites.

Memory: Analyse memory used by websites and debug memory leaks.

Application: Inspect resources loaded including all databases, cookies cache, etc.

Security: Inspect and analyze Certificate, connection, and resources problems.

To know detailed functionalities of the tools, check Guild on DevTools and Video Guild here.

Among all the above options we will focus on Elements, Sources, and Network tabs as they help us in reverse engineering web pages. Also as a prerequisite, we will briefly discuss how React is used to create websites and basic structuring of websites in production.

React Library

React is a JavaScript library developed by Facebook for building websites. React is used to build single-page web applications. We create a template of the website and put function modules in its codebase. These modules are then separately built and dynamically loaded on the main page whenever they are required. That’s how React makes a single page web application to appear as a full-fledged multi-page website. In React before pushing any website to production, the main code is first converted into production code using React’s ‘build’ option. This option creates a ‘build’ folder which contains correctly bundled React components that optimize the website for best performance. Most of the code in this folder is garbage i.e. not in a readable format. This folder is then deployed as a stand-alone folder in production.

We will use an easy to understand Portfolio Website and try to reverse engineer it. This website is created using the React library. The source code of the website can be found on Github.

fig. bhushankolhe.com main page

Reverse Engineering Steps

1. Open the website bhushankolhe.com.

2. Open the Developer Tools with Elements tab.

• The above code is the main page code. This website is created in React. As we discussed earlier, React build converts the main code into a compact format that looks garbage. This is the reason the above code is not readable.
• We can use the top left corner’s mouse icon button and then click on any website element to see its code.
• This tab is useful to learn how a specific element on the web is written.

3. Open the Sources tab.

fig. Sources tab on DevTools for bhushankolhe.com

• This tab can be used for editing and running CSS & JS files on the fly, creating and running code snippets, persisting changes across page reloads, enabling access to the browser Filesystem, and last but most important, debugging.
• It is important to know that we only pushed the build folder to our production which had garbage like code and yet we can see the ‘Sources’ tab shows all the code in a proper readable manner. This is due to the inbuilt browser’s Debugger.
• When we first load the website, the browser gets the compressed code and converts it back to its original format. This original formatted code is then shown in the ‘Sources’ tab. Browsers perform reverse engineering for us.

Note: The majority of the code gets reverse engineered but not all. Developers can still make the codes in non-readable formats for privacy purposes. For example, Facebook and other big companies make their ‘Sources’ tab code harder to understand or even hide them.

• We can only see front-end code here and not backend/server-side codes.
• This tab is useful to learn how website code was made.

4. Open Network tab.

fig. Network tab on DevTools for bhushankolhe.com

• This tab displays all the network calls(Get, Post, etc) made by the website to the server.
• Calls can be used to get images, videos, new posts, or send new content to the server or ask for new data from the server, etc.
• From the above image, we can see that almost all the calls are made to get the .png or .svg files which are image file extensions. We can see the status(200 means request successfully finished), size, and other related options. We can also see how long a request took and in what sequence the requests were made from the top green colored graph.

Note: When a request is shown in red color, it means that the request was blocked by something, for example, adBlocker.

• By clicking on any request, you can see more information like request header, host, remote address, etc.
• This tab is useful to learn how the network calls are made, what their structure is etc.

In a nutshell, reverse engineering websites is a great way to understand how professional websites are made. It helps us give a fundamental idea of different tools and options we have to see other’s websites or make our own. I hope this article gave you a different perspective on looking at websites.

Thank you for reading and let me know down in the comments if I missed anything. I would love to hear from you.