Skip to content

Browser Developer Tools for Ethical Hacking

Modern web browsers come equipped with powerful developer tools that are invaluable for ethical hacking and web application security testing. These tools allow you to inspect the DOM, view network traffic, debug JavaScript, and much more. This section will guide you through using these tools to analyze web applications and identify potential vulnerabilities. We will focus on the tools in Chrome/Chromium-based browsers, but most concepts apply to other browsers like Firefox and Safari.

Accessing Developer Tools

There are several ways to open the developer tools:

  • Right-Click -> Inspect: Right-click on any element on the page and select "Inspect" or "Inspect Element."
  • Keyboard Shortcuts:
    • Windows/Linux: Ctrl + Shift + I or F12
    • macOS: Cmd + Option + I
  • Menu: In Chrome, click the three dots in the upper-right corner -> More Tools -> Developer Tools.

Key Developer Tools Tabs

The developer tools provide several tabs, each with its own set of features:

  • Elements: Inspect the HTML structure (DOM) and CSS styles of the page.
  • Console: View JavaScript errors, warnings, and log messages. Execute JavaScript code.
  • Network: Monitor network traffic, including HTTP requests and responses, AJAX/XHR calls, images, and other resources. This is crucial for understanding how the application communicates with the server.
  • Sources: Debug JavaScript code, set breakpoints, and step through code execution.
  • Application: Inspect storage (cookies, local storage, session storage), databases, and other application-specific data.
  • Security: View security information about the current page, such as the SSL certificate and any mixed content warnings.

Inspecting the DOM (Elements Tab)

The Elements tab allows you to examine the HTML structure of the page. This is useful for:

  • Identifying Input Fields: Locate form fields and other input elements that are potential targets for attacks.
  • Analyzing HTML Structure: Understand how the page is organized and identify potential vulnerabilities in the HTML code.
  • Modifying HTML on the Fly: Temporarily change the HTML code to test different scenarios or explore potential attack vectors (changes are not permanent).
  • Examining Event Listeners: See what JavaScript functions are attached to specific HTML elements.

Example:

  1. Open the developer tools and go to the Elements tab.
  2. Right-click on a form field on a website and select "Inspect."
  3. The Elements tab will highlight the corresponding HTML code for that form field.
  4. You can then modify the HTML code, such as changing the type attribute of an input field from text to password or adding attributes like maxlength.

Viewing Fetch/XHR/AJAX Requests (Network Tab)

The Network tab is essential for analyzing the communication between the browser and the server. It allows you to:

  • Monitor HTTP Requests: See all the HTTP requests that are being made by the page, including the URL, method (GET, POST, etc.), headers, and response status code.
  • Inspect Request and Response Headers: Examine the request and response headers to understand how the server is configured and identify potential security issues.
  • View Request and Response Bodies: See the data being sent to the server and the data being returned by the server. This is crucial for analyzing AJAX/XHR requests.
  • Filter Requests: Filter requests by type (XHR/Fetch, CSS, JS, Img, etc.) to focus on specific types of traffic.
  • Replay Requests: Resend requests with modified data to test for vulnerabilities.
  • Inspect WebSockets: View data being sent and received over WebSocket connections.

Example:

  1. Open the developer tools and go to the Network tab.
  2. Perform an action on the website that triggers an AJAX/XHR request (e.g., submitting a form, clicking a button).
  3. The Network tab will display the AJAX/XHR request.
  4. Click on the request to view the request headers, response headers, and request/response bodies.
  5. You can then analyze the data being sent to the server and the data being returned by the server to identify potential vulnerabilities.
  6. Right-click on the request and select "Copy as cURL" to get the request as a cURL command which can then be modified and replayed with curl.
  7. Select Replay XHR to resend the request.

Analyzing API Endpoints:

The Network tab is invaluable for reverse-engineering API endpoints. By monitoring the AJAX/XHR requests, you can identify the URLs, parameters, and data formats used by the API. This information can then be used to test the API for vulnerabilities.

Using the Console Tab

The Console tab is a powerful tool for:

  • Viewing JavaScript Errors and Warnings: Identify JavaScript errors and warnings that may indicate vulnerabilities or other issues.
  • Executing JavaScript Code: Run arbitrary JavaScript code to interact with the page, test for vulnerabilities, or modify the page's behavior.
  • Logging Information: Use the console.log() function to log information to the console for debugging purposes.
  • Interacting with the DOM: Use JavaScript to access and manipulate the DOM.

Examples:

  • Displaying an Alert: 

    alert("Hello, World!");

  • Accessing an Element by ID: 

    var element = document.getElementById("myElement");
console.log(element);

  • Changing the Text of an Element: 

    document.getElementById("myElement").innerHTML = "New Text";

  • Checking Cookie values 

    document.cookie

The Application Tab

The application tab allows you to inspect cookies, local storage, session storage and databases. This is important for understanding how the web application stores data.

Example

  1. Open Dev tools and go to the application tab
  2. Select Cookies, Local Storage or Session Storage to view its values

Security Tab

  • Description: This tab allows you to inspect security information about the current page such as: SSL Certificate, mixed content, HTTPS usage and Certificates

  • Key Uses:

    • SSL Certificate Inspection: View information about the SSL certificate used by the website, including the issuer, validity period, and subject. Ensures that your connections are encrypted.
    • Mixed Content Detection: Identify mixed content warnings, which occur when a secure (HTTPS) page loads insecure (HTTP) resources. Mixed content can weaken the security of the page.
    • HTTPS Usage Analysis: Analyze the website's use of HTTPS and identify potential weaknesses in its security configuration.

Practical Examples for Ethical Hacking

  • Bypassing Client-Side Validation: Use the Elements tab to remove JavaScript validation rules and submit invalid data to the server. Then, use the Network tab to inspect the request and see if the server properly validates the data.
  • Testing for Cross-Site Scripting (XSS): Inject JavaScript code into input fields and see if it is executed by the browser. Use the Network tab to inspect the requests and responses to see how the code is being handled.
  • Analyzing API Endpoints: Use the Network tab to identify API endpoints and then refer to API Analysis Example for a detailed walkthrough.
  • Cookie Manipulation: Use the Application tab to modify cookies and test for vulnerabilities related to session management.
  • Inspecting Hidden Fields: Look for hidden input fields in the Elements tab, as these may contain sensitive information or be used to bypass security checks.

Conclusion

Browser developer tools are an essential part of an ethical hacker's toolkit. By mastering these tools, you can gain a deeper understanding of how web applications work and identify potential vulnerabilities that can be exploited. Remember to use these tools ethically and legally, and only with proper authorization. They provide valuable insights into client-side behavior and API interactions, complementing other security tools and techniques.