Analyzing Web Apps with Chrome’s DevTools (Hacking API’s)

Analyzing Web Apps with Chrome’s DevTools (Hacking API’s)

Chrome’s DevTools is a suite of developer tools built into the Chrome browser that allows you to view what your web browser is running from a web developer’s perspective. DevTools is an often-underrated resource, but it can be very useful for API hackers. We’ll use it for our first interactions with target web applications to discover APIs; interact with web applications using the console; view headers, previews, and responses; and analyze web application source files.

To install Chrome on Linux, which includes DevTools, run the following commands:

$ sudo wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
$ sudo apt install ./google-chrome-stable_current_amd64.deb

You can launch Chrome through the command line with the google-chrome command. Once you have Chrome running, navigate to the URL you want to investigate and launch DevTools by using either CTRL-SHIFT-I or F12 or navigating to SettingsMore Tools and selecting the Developer Tools menu. Next, refresh your current page to update the information in the DevTools panels. You can do this by using the CTRL-R shortcut. In the Network panel, you should see the various resources requested from APIs.

DevTools Panel Sections

  • The Elements panel lets you inspect and edit the HTML and CSS of your page. With the Elements panel, you can make changes to your code and see those changes immediately reflected on the page.
  • The Console panel lets you run JavaScript code on your page. With the Console, you can test code snippets or debug your code.
  • The Sources panel lets you view and edit your page’s JavaScript and CSS code. With the Sources panel, you can set breakpoints, step through code, and see the values of variables.
  • The Network panel lets you see how your page is loading. With the Network panel, you can see what resources are being loaded and how long each resource takes to load.
  • The Performance panel lets you see how quickly your page is loading and rendering. With the Performance panel, you can find bottlenecks in your code and optimize your page for better performance.
  • The Memory panel lets you see how much memory your page is using. With the Memory panel, you can track down memory leaks and optimize your code for better memory usage.
  • The Application panel lets you inspect the application state of your page. With the Application panel, you can view and edit localStorage, cookies, and sessionStorage.

When we first begin interacting with a web application, we’ll usually start with the Network panel to get an overview of the resources that power the web application. Using the Network panel, you can drill down into each request to see the request method that was used, the response status code, the headers, and the response body. To do this, click the name of the URL of interest once under the Name column. This will open up a panel on the right side of the DevTools. Now you can review the request that was made under the Headers tab and see how the server responded under the Response tab.

Diving deeper into the web application, you can use the Sources panel to inspect the source files being used in the app. In capture-the-flag (CTF) events (and occasionally in reality) you may find API keys or other hardcoded secrets here. The Sources panel comes equipped with strong search functionality that will help you easily discover the inner workings of the application.

The Console panel is useful for running and debugging the web page’s JavaScript. You can use it to detect errors, view warnings, and execute commands. You will get an opportunity to use the Console panel in the lab in Chapter 6.

The Performance panel is mainly used to improve a website’s speed, but we could also use it to observe at what point a web application interacts with an API.

Capturing and Modifying Requests with Burp Suite

Burp Suite is a magnificent set of web application–testing tools developed and continuously improved on by PortSwigger. All web app cybersecurity professionals, bug bounty hunters, and API hackers should learn to use Burp, which allows you to capture API requests, spider web applications, fuzz APIs, and so much more.

Spidering, or web crawling, is a method that bots use to automatically detect the URL paths and resources of a host. Typically, spidering is done by scanning the HTML of web pages for hyperlinks. Spidering is a good way to get a basic idea of the contents of a web page, but it won’t be able to find hidden paths, or the ones that do not have links found within web pages. To find hidden paths, we’ll need to use a tool like Kiterunner that effectively performs directory brute-force attacks. In such an attack, an application will request various possible URL paths and validate whether they actually exist based on the host’s responses.

As described by the OWASP community page on the topic, fuzzing is “the art of automatic bug finding.” Using this attack technique, we’d send various types of input in HTTP requests, trying to find an input or payload that causes an application to respond in unexpected ways and reveal a vulnerability. For example, if you were attacking an API and discovered you could post data to the API provider, you could then attempt to send it various SQL commands. If the provider doesn’t sanitize this input, there is a chance you could receive a response that indicates that a SQL database is in use.

Burp Suite Pro, the paid edition of Burp, provides all the features without restrictions, but if using the free Burp Suite Community Edition (CE) is your only option, you can make it work. However, once you’ve obtained a bug bounty reward or as soon as you can convince your employer, you should make the jump to Burp Suite Pro. This chapter includes a “Supplemental Tools” section that will help replace the functionality missing in Burp Suite CE.

Burp Suite CE is included standard with the latest version of Kali. If for whatever reason it is not installed, run the following:

$ sudo apt-get install burpsuite

Setting Up FoxyProxy

One of Burp Suite’s key features is the ability to intercept HTTP requests. In other words, Burp Suite receives your requests before forwarding them to the server and then receives the server’s responses before sending them to the browser, allowing you to view and interact with those requests and responses. For this feature to work, we’ll need to regularly send requests from the browser to Burp Suite. This is done with the use of a web proxy. The proxy is a way for us to reroute web browser traffic to Burp before it is sent to the API provider. To simplify this process, we’ll add a tool called FoxyProxy to our browsers to help us proxy traffic with a click of a button.

Web browsers have proxy functionality built in, but changing and updating these settings every time you want to use Burp would be a time-consuming pain. Instead, we’ll use a browser add-on called FoxyProxy that lets you switch your proxy on and off with a simple click of a button. FoxyProxy is available for both Chrome and Firefox.

Follow these steps to install FoxyProxy:

Navigate to your browser’s add-on or plug-in store and search FoxyProxy.
Install FoxyProxy Standard and add it to your browser.
Click the fox icon at the top-right corner of your browser (next to your URL) and select Options.
Select Proxies▶Add New Proxy▶Manual Proxy Configuration.

Add 127.0.0.1 as the host IP address.
Update the port to 8080 (Burp Suite’s default proxy settings).
Under the General tab, rename the proxy to Hackz (I will refer to this proxy setting throughout the labs).
Now you’ll only need to click the browser add-on and select the proxy you want to use to send your traffic to Burp. When you’ve finished intercepting requests, you can turn the proxy off by selecting the Disable FoxyProxy option.

Adding the Burp Suite Certificate

HTTP Strict Transport Security (HSTS) is a common web application security policy that prevents Burp Suite from being able to intercept requests. Whether using Burp Suite CE or Burp Suite Pro, you will need to install Burp Suite’s certificate authority (CA) certificate. To add this certificate, follow these steps:

Start Burp Suite.
Open your browser of choice.

Using FoxyProxy, select the Hackz proxy. Navigate to http://burpsuite, and click CA Certificate. This will initiate the download of the Burp Suite CA certificate.

Save the certificate somewhere you can find it.
Open your browser and import the certificate. In Firefox, open Preferences and use the search bar to look up certificates. Import the certificate.
In Chrome, open Settings, use the search bar to look up certificates, select More▶Manage Certificates▶Authorities, and import the certificate (see Figure 4-4). If you do not see the certificate, you may need to expand the file type options to “DER” or “All files.”

Save the certificate somewhere you can find it.

Open your browser and import the certificate. In Firefox, open Preferences and use the search bar to look up certificates. Import the certificate.
In Chrome, open Settings, use the search bar to look up certificates, select More▶Manage Certificates▶Authorities, and import the certificate. If you do not see the certificate, you may need to expand the file type options to “DER” or “All files.”
Now that you have the PortSwigger CA certificate added to your browser, you should be able to intercept traffic without experiencing issues.

Navigating Burp Suite

The Dashboard gives you an overview of the event log and scans you have run against your targets. The Dashboard is more useful in Burp Suite Pro than in CE because it will also display any issues detected during testing.

The Proxy tab is where we will begin capturing requests and responses from your web browser and Postman. The proxy we set up will send any web traffic destined for your browser here. We will typically choose to forward or drop captured traffic until we find the targeted site that we want to interact with. From Proxy we will forward the request or response to other modules for interaction and tampering.

In the Target tab, we can see a site’s map and manage the targets we intend to attack. You can also use this tab to configure the scope of your testing by selecting the Scope tab and including or excluding URLs. Including URLs within scope will limit the URLs being attacked to only those you have authorization to attack.

While using the Target tab, you should be able to locate the Site Map, where you can see all the URLs Burp Suite has detected during your current Burp Suite session. As you perform scans, crawl, and proxy traffic, Burp Suite will start compiling a list of the target web applications and discovered directories. This is another place you can add or remove URLs from scope.

The Intruder tab is where we’ll perform fuzzing and brute-force attacks against web applications. Once you’ve captured an HTTP request, you can forward it to Intruder, where you can select the exact parts of the request that you want to replace with the payload of your choice before sending it to the server.

The Repeater is a module that lets you make hands-on adjustments to HTTP requests, send them to the targeted web server, and analyze the content of the HTTP response.

The Sequencer tool will automatically send hundreds of requests and then perform an analysis of entropy to determine how random a given string is. We will primarily use this tool to analyze whether cookies, tokens, keys, and other parameters are actually random.

The Decoder is a quick way to encode and decode HTML, base64, ASCII hex, hexadecimal, octal, binary, and Gzip.

The Comparer can be used to compare different requests. Most often, you’ll want to compare two similar requests and find the sections of the request that have been removed, added, and modified.

If Burp Suite is too bright for your hacker eyes, navigate to User options▶Display and change Look and Feel to Darcula. Within the User Options tab, you can also find additional connection configurations, TLS settings, and miscellaneous options to learn hotkey shortcuts or configure your own hotkeys. You can then save your preferred settings using Project Options, which allows you to save and load specific configurations you like to use per project.

Learn is an awesome set of resources to help you learn how to use Burp Suite. This tab contains video tutorials, the Burp Suite Support Center, a guided tour of Burp’s features, and a link to the PortSwigger Web Security Academy. Definitely check these resources out if you are new to Burp!

Under the Dashboard you can find the Burp Suite Pro Scanner. Scanner is Burp Suite Pro’s web application vulnerability scanner. It lets you automatically crawl web applications and scan for weaknesses.

The Extender is where we’ll obtain and use Burp Suite extensions. Burp has an app store that allows you to find add-ons to simplify web app testing. Many extensions require Burp Suite Pro, but we will make the most of the free extensions to turn Burp into an API hacking powerhouse.

Intercepting Traffic

A Burp Suite session will usually begin with intercepting traffic. If you’ve set up FoxyProxy and the Burp Suite certificate correctly, the following process should work smoothly. You can use these instructions to intercept any HTTP traffic with Burp Suite:

Start Burp Suite and change the Intercept option to Intercept is on

In your browser, select the Hackz proxy using FoxyProxy and browse to your target, such as https://twitter.com. This web page will not load in the browser because it was never sent to the server; instead, the request should be waiting for you in Burp Suite. This should let you know that you’ve successfully intercepted an HTTP request.

Once you’ve captured a request, you can select an action to perform with it, such as forwarding the intercepted request to the various Burp Suite modules. You perform actions by clicking the Action button above the request pane or by right-clicking the request window. You will then have the option to forward the request to one of the other modules, such as Repeater.

The Repeater module is the best way to see how a web server responds to a single request. This is useful for seeing what sort of response you can expect to get from an API before initiating an attack. It’s also helpful when you need to make minor changes to a request and want to see how the server responds.

Altering Requests with Intruder

We’ve already mentioned that Intruder is a web application fuzzing and scanning tool. It works by letting you create variables within an intercepted HTTP request, replace those variables with different sets of payloads, and send a series of requests to an API provider.

Any part of a captured HTTP request can be transformed into a variable, or attack position, by surrounding it with § symbols. Payloads can be anything from a wordlist to a set of numbers, symbols, and any other type of input that will help you test how an API provider will respond.

Leave a Reply

Prev
How to Use Jupyter Notebook: A Beginner’s Tutorial
How to Use Jupyter Notebook: A Beginner’s Tutorial

How to Use Jupyter Notebook: A Beginner’s Tutorial

In the data science community, Jupyter notebook is a popular tool with strong

Next
Why you should learn Data Science in 2023
Why you should learn Data Science in 2023

Why you should learn Data Science in 2023

Data science is an emerging field that has the potential to revolutionize the

You May Also Like