HTTP Toolkit for Performance Engineers ⚡
Tags: tutorial, testing, performance, webperf
Published: 2021-09-03 14:48:13

<!-- wp:paragraph -->
<p>In this blog post, we are going to deep-dive into the HTTP Toolkit and its features. As a performance engineer, it is our responsibility to learn various tools and technologies. Based on the issue, you need to leverage the right tool to fix the problems, just like plumbers. Let us see HTTP Toolkit for Performance Engineers.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What is HTTP Toolkit?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It is an open-source tool to debug, test, intercept HTTP(S) requests. It can intercept: desktop browsers such as Chrome, Firefox, Edge etc., Android apps, Python, Java, Ruby, and all terminal-based apps, and Electron apps.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you are interested to learn about MITM, you can check my below YouTube series.</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://youtube.com/playlist?list=PLJ9A48W0kpRJeDShJotYMQy-TM_T2DJRO","type":"video","providerNameSlug":"youtube","responsive":true,"align":"center","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtube.com/playlist?list=PLJ9A48W0kpRJeDShJotYMQy-TM_T2DJRO
</div><figcaption>MITM YouTube Playlist</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2>How to install HTTP Toolkit?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>HTTP Toolkit works on Windows, Mac and Linux. Head to https://httptoolkit.tech website and download the relevant package to install it.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":8638,"sizeSlug":"full","linkDestination":"media"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><a href="https://qainsights.com/wp-content/uploads/2021/09/image.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image.png" alt="Download - HTTP Toolkit for Performance Engineers" class="wp-image-8638"/></a><figcaption>Download - HTTP Toolkit for Performance Engineers</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>After successful installation, you can launch HTTP Toolkit. Below is the user interface of HTTP Toolkit.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8639,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-1.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-1-1024x669.png" alt="" class="wp-image-8639"/></a><figcaption>HTTP Toolkit Interface</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>First Interception using HTTP Toolkit</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let us intercept HTTP traffic in the HTTP Toolkit. In this example, let us use the Firefox browser to intercept traffic. HTTP Toolkit intercepts HTTP and HTTPS traffic. The HTTP Toolkit acts as a proxy between the client and server and captures the traffic. Once the requests have been captured, you can view, modify, and deep-dive into it.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Launch HTTP Toolkit</li><li>Click on <strong>Intercept</strong></li><li>Click on <strong>Firefox </strong>as shown below.</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":8640,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-2.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-2-1024x448.png" alt="Intercept Traffic" class="wp-image-8640"/></a><figcaption>Intercept Traffic</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This will launch Firefox and open https://amiusing.httptoolkit.tech/ automatically as shown below. If you are getting below message, then the HTTP Toolkit is working fine.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":8641,"sizeSlug":"full","linkDestination":"media"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-3.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-3.png" alt="Testing the proxy" class="wp-image-8641"/></a><figcaption>Testing the proxy</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, it is time to record our business actions in the browser. For demonstration purpose, let us use https://bank-of-anthos.xyz web app.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once the app is launched, perform the below transactions.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Login</li><li>Send $10 to Alice</li><li>Deposit $10 to External Account</li><li>Sign out</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Once the recording is done, you can close the Firefox window.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Congratulations! You have intercepted the traffic on HTTP Toolkit.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Viewing the intercepted traffic</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To view the intercepted traffic, go back to HTTP Toolkit, click on <strong>View</strong>. In right side, you can see the list of HTTP requests in a table format.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8643,"sizeSlug":"full","linkDestination":"media"} -->
<figure class="wp-block-image size-full"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-4.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-4.png" alt="View HTTP Requests" class="wp-image-8643"/></a><figcaption>View HTTP Requests</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>To view more details about the HTTP request, click on the row. On the right side, you can view the selected request, response, and body as shown below. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":8644,"sizeSlug":"large","linkDestination":"media"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-5.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-5-1024x569.png" alt="View HTTP Request and Response" class="wp-image-8644"/></a><figcaption>View HTTP Request and Response</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Features such as performance and cURL are paid. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Filter the traffic</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As you aware, HTTP Toolkit captures all the traffic between the client and server. We need to remove the noises from the captured traffic. HTTP Toolkit comes with filtering. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>At the bottom, you can filter out using various tags such as status code, method, hostname, headers and more.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>e.g. if we want to filter only bank of anthos traffic, we could enter the following filter.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>hostname=bank-of-anthos.xyz</code></p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":8645,"sizeSlug":"full","linkDestination":"media"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-6.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-6.png" alt="Filtering" class="wp-image-8645"/></a><figcaption>Filtering</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>It supports multiple filters as well.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Rewriting the intercepted traffic</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>HTTP Toolkit supports rewriting the HTTP requests, responses and mocking. This will help us to test various parameters for debugging purpose.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To demonstrate the rewrite, let us redirect from https://bank-of-anthos.xyz to https://example.com.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you are launching a bank of anthos app, it will throw the response of example.com.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As we are using the free version, we are kind of limited in terms of rewrite options.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First, we need to create a rule by going to <strong>Mock </strong>tab.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click on <strong>Add a new rule to rewrite requests and responses.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8646,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-7.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-7-1024x265.png" alt="" class="wp-image-8646"/></a><figcaption> Create a rule </figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Configure the below rule and hit <strong>Save </strong>button.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8647,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-8.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-8-1024x124.png" alt="" class="wp-image-8647"/></a><figcaption>Save a rule</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The above rule pauses the interception if the URL is https://bank-of-anthos.xyz. We need to edit the request/response manually to resume.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Go to <strong>Intercept </strong>and launch the <strong>Firefox </strong>browser.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then, open https://bank-of-anthos.xyz app.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The browser will not open bank of anthos website. If you go to HTTP Toolkit, it will prompt you to take the action as shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8648,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-9.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-9-1024x239.png" alt="Pause the capture" class="wp-image-8648"/></a><figcaption>Pause the capture</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>To rewrite the response, edit the URL to https://example.com and then click on Resume.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":8649,"sizeSlug":"full","linkDestination":"media"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-10.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-10.png" alt="Resume" class="wp-image-8649"/></a><figcaption>Resume</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, if you switch back to Firefox browser, you can see the example.com response, instead of bank of anthos response.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":8650,"sizeSlug":"full","linkDestination":"media"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-11.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-11.png" alt="Rewrite response" class="wp-image-8650"/></a><figcaption>Rewrite response</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Also, in the HTTP Toolkit response body as well, you can see the example.com response.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8651,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://qainsights.com/wp-content/uploads/2021/09/image-12.png"><img src="https://qainsights.com/wp-content/uploads/2021/09/image-12-1024x359.png" alt="" class="wp-image-8651"/></a><figcaption>Validate the response</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Congratulations! You have learned how to capture, intercept, and modify the request/response using HTTP Toolkit.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The HTTP Toolkit is a great utility for debugging, test, intercepting traffic. It has a simple user interface, easy to learn and supports various technologies and platforms. If you want to become a power user, you need to subscribe to the pro features. Alternatively, you can use MITMProxy, which can be ideal for your use.</p>
<!-- /wp:paragraph -->