Discovering Browser XHR Requests and How to Analyze Them

Browser XHR Requests and How to Analyze Them

Discovering Browser XHR Requests and How to Analyze Them

Are you a web developer or just someone who’s curious about what kind of data your browser sends and receives when you visit a website? If so, you’re in the right place! Today, we’re going to explore browser XHR requests and how to analyze them. XHR stands for XML HTTP Request, and it’s a technique that allows web pages to communicate with servers without having to reload the page. These requests are used for various tasks, like fetching data, uploading files, and sending forms.

We’ll be using two popular tools to dive into XHR requests: Chrome DevTools and Firefox Developer Tools. The best part? They’re built right into the browsers! To access these tools, press F12 or Ctrl+Shift+I on your keyboard, or simply right-click on a page and select “Inspect” or “Inspect Element”.

Chrome DevTools – A Step-by-Step Guide

Ready to examine XHR requests in Chrome DevTools? Follow these easy steps:

  1. Open the website you want to inspect in Chrome.
  2. Bring up Chrome DevTools and click on the “Network” tab.
  3. Type “xhr” in the “Filter” box to display only XHR requests.
  4. Reload the page or take an action that triggers an XHR request, like clicking a button or filling out a form.
  5. You’ll see a list of XHR requests in the “Name” column, along with their status, type, size, time, and initiator.
  6. Click on an XHR request to reveal more details in the “Headers”, “Preview”, “Response”, “Timing”, and “Cookies” tabs.

Screenshot of browser XHR requests

Now, let’s break down what you’ll find in these tabs:

  • “Headers” tab: Displays request and response headers, including the URL, method, content type, cookies, and more.
  • “Preview” and “Response” tabs: Shows the data sent and received in the XHR request, which could be in JSON, XML, HTML, or other formats.
  • “Timing” tab: Provides a breakdown of how long each phase of the XHR request took, such as DNS lookup, connection, request sent, waiting, and content download.
  • “Cookies” tab: Lists the cookies that were sent and received in the XHR request.

Firefox Developer Tools – A Step-by-Step Guide

If you prefer Firefox, here’s how to examine XHR requests in Firefox Developer Tools:

  1. Open the website you want to inspect in Firefox.
  2. Launch Firefox Developer Tools and click on the “Network” tab.
  3. Type “xhr” in the “Filter URLs” box to display only XHR requests.
  4. Reload the page or take an action that triggers an XHR request, like clicking a button or filling out a form.
  5. You’ll see a list of XHR requests in the “File” column, along with their status, method, domain, type, size, and time.
  6. Click on an XHR request to reveal more details in the “Headers”, “Params”, “Response”, “Timings”, and “Stack Trace” tabs.

Here’s a quick overview of the tabs in Firefox Developer Tools:

  • “Headers” tab: Shows request and response headers, including the URL, method, content type, cookies, and more.
  • “Params” tab: Displays the query string or form data sent in the XHR request.
  • “Response” tab: Presents the data received in the XHR request, which could be in JSON, XML, HTML, or other formats.
  • “Timings” tab: Offers a breakdown of how long each phase of the XHR request took, such as DNS lookup, connection, request sent, waiting, and content download.
  • “Stack Trace” tab: Reveals the JavaScript call stack that initiated the XHR request, which can be helpful for debugging purposes.

Let’s have a look at the XHR requests your browser is performing to load the website https://www.scrapethissite.com/pages/ajax-javascript/#2015.

 

We can see this webpage lists the OSCAR movies for the year 2015. Which is displayed as a table. Let’s examine the XHR > network tab in your Developer console.

After opening the developer console, reload the webpage. If you want you can also visit other years data. Then your XHR tab will be populated like this.

JSON payload for XHR request.

This is a simple website that sends only one XHR request for each page. You can see the URL of the 2015 data, the browser is sending this request: https://www.scrapethissite.com/pages/ajax-javascript/?ajax=true&year=2015

and the response is a JSON payload that looks like this

<pre>[
  {
    "title": "Spotlight  ",
    "year": 2015,
    "awards": 2,
    "nominations": 6,
    "best_picture": true
  },
  {
    "title": "Mad Max: Fury Road ",
    "year": 2015,
    "awards": 6,
    "nominations": 10
  },
  {
    "title": "The Revenant   ",
    "year": 2015,
    "awards": 3,
    "nominations": 12
  },
  {
    "title": "Bridge of Spies",
    "year": 2015,
    "awards": 1,
    "nominations": 6
  },
  {
    "title": "The Big Short  ",
    "year": 2015,
    "awards": 1,
    "nominations": 5
  },
  {
    "title": "The Danish Girl",
    "year": 2015,
    "awards": 1,
    "nominations": 4
  },
  {
    "title": "Room   ",
    "year": 2015,
    "awards": 1,
    "nominations": 4
  },
  {
    "title": "Ex Machina ",
    "year": 2015,
    "awards": 1,
    "nominations": 2
  },
  {
    "title": "The Hateful Eight  ",
    "year": 2015,
    "awards": 1,
    "nominations": 2
  },
  {
    "title": "Inside Out ",
    "year": 2015,
    "awards": 1,
    "nominations": 2
  },
  {
    "title": "Amy",
    "year": 2015,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "Bear Story ",
    "year": 2015,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "A Girl in the River: The Price of Forgiveness  ",
    "year": 2015,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "Son of Saul",
    "year": 2015,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "Spectre",
    "year": 2015,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "Stutterer  ",
    "year": 2015,
    "awards": 1,
    "nominations": 1
  }
]

The response for 2014 will look like this

</pre>
<pre>[
  {
    "title": "Birdman",
    "year": 2014,
    "awards": 4,
    "nominations": 9,
    "best_picture": true
  },
  {
    "title": "The Grand Budapest Hotel",
    "year": 2014,
    "awards": 4,
    "nominations": 9
  },
  {
    "title": "Whiplash",
    "year": 2014,
    "awards": 3,
    "nominations": 5
  },
  {
    "title": "The Imitation Game",
    "year": 2014,
    "awards": 1,
    "nominations": 8
  },
  {
    "title": "American Sniper",
    "year": 2014,
    "awards": 1,
    "nominations": 6
  },
  {
    "title": "Boyhood",
    "year": 2014,
    "awards": 1,
    "nominations": 6
  },
  {
    "title": "Interstellar",
    "year": 2014,
    "awards": 1,
    "nominations": 5
  },
  {
    "title": "The Theory of Everything",
    "year": 2014,
    "awards": 1,
    "nominations": 5
  },
  {
    "title": "Ida",
    "year": 2014,
    "awards": 1,
    "nominations": 2
  },
  {
    "title": "Selma",
    "year": 2014,
    "awards": 1,
    "nominations": 2
  },
  {
    "title": "Citizenfour",
    "year": 2014,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "Big Hero 6",
    "year": 2014,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "Crisis Hotline: Veterans Press 1",
    "year": 2014,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "The Phone Call",
    "year": 2014,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "Still Alice",
    "year": 2014,
    "awards": 1,
    "nominations": 1
  },
  {
    "title": "Feast",
    "year": 2014,
    "awards": 1,
    "nominations": 1
  }
]

from the above JSON payloads we can say the content to render the table of data is being delivered though this payload. And this is really an intresting information for data engineers or hackers based on the content of your JSON payload. You can use

Wrapping Up

There you have it! Understanding and analyzing browser XHR requests can give you some valuable insights into the communication between a web page and a server. With browser developer tools like Chrome DevTools and Firefox Developer Tools at your fingertips, examining XHR requests and gaining a deeper understanding of how a website operates behind the scenes has never been easier.

Whether you’re a web developer looking to debug your code or just a curious user eager to learn more about web technologies, being able to analyze XHR requests is a handy skill. It can help you identify potential bottlenecks in your application, enhance your knowledge of web development, and even contribute to creating more efficient and user-friendly web experiences.

So, the next time you’re browsing the web, don’t hesitate to open those developer tools and explore the fascinating world of XHR requests. You never know what new and interesting things you might discover!

Additional reads

You might be also interested in this
Scraping browser XHR requests using Python

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *