Ever felt stuck in building a feature just because there is no API Server ready from which you are supposed to consume the API response? Or tired of saying “It works on my computer” but some API doesn’t populate data on UI for a client machine?
I am talking about the API (Application programming interface) to whom clients request data and seek some response from the API Server to use & populate something out of it.
All these API servers can be built using different programming runtime languages like Java Springboot, and Node.js with packages like Express/Fastify/Hapi-based API or Next.js API, Python Flask/Django API, Go or Rust warp package, or a new startup using PHP Laravel framework. Different programming languages have their packages/libraries to build API with the OpenAPI Specification (or Swagger) helping Tech/Nontech to build API and share the API Specification & Usage guideline with anybody.
A Lot of time I have personally feel blocked on implementing frontend features due to lack of low resource on backend team handling API development or no standard API specification defined by Tech Lead/Architect. Sometimes the backend service API is also dependent on 3rd party API and that could slow down the API development work on backend side if there is a dependency on 3rd party API implementation.
I will discuss the pain of developers, QA testers and Product Manager altogether and see how mock API can help simplify frontend development & feature testing or hardening QA testcases. I will walk you through what, when & why API Mocking is required and how it can help us in various ways.
What is API Mocking
API mocking is nothing but mimicing the original API whether it exists or not. A Simulated environment is created which a client can use to build & test applications with the mock API instead of original API.
You can mock the endpoint url & test with API specification data models to simulate actual API for frontend visual component/page or backend service dependent on 3rd party API.
When & Why to do API Mocking
I always felt having to use mock API in scenarios like:
- Working on frontend feature and finding backend developer is yet to implement the API. But you have the API request/response format and know what your frontend component would render with those fields and mock API can simulate the component rendering without hardcoding response format within the code.
- Backend developer has some 3rd party API usage, however doesn’t have access to 3rd party API or wants to test backend code without using or modifying the original 3rd party API data.
- QA Tester wants to test the frontend or backend code and wants to verify if API specification API request/response data field formats are properly used with validation.
All this additionally help in increasing Faster feedback loop as API mocking removes dependency, reduces wait time & test using the mock api to find & fix bugs or analyze requirements clearly to define correct deadline or time estimation for the feature.
The mock api can also help in doing load testing frontend/backend feature without burning cost on the original API usage terms or DDOSing the API. So you can save a good amount of cost without getting access to original API. For eg. You can use Sandbox API of payment gateways like Paypal, Stripe, Paytm, Netflix Partner streaming API, etc to build feature in Dev Environment with test user.
In terms of Security, You can test your API as per the OpenAI specification and find loopholes/vulnerabilities with mock API and that way you can avoid altering any critical domains data like Financial, Health, Stocks, etc.
This mock has also been quite helpful to QA Testers in testing different negative positive testcases & they can use simulated API response to see how frontend/backend application handles odd data or unknown scenarios. This helps to gain reliability & trust with the help of Mock API. Developers on the other hand can simulate API request response payload, size of data to see performance issues, find bugs & cross-compatability with older version of the frontend/backend service or different device or platforms.
Some more Examples:
- Startup Entrepreneur looking to create a prototype of product but doesnt have enough actual data in database to test. They can simulate different data related scenarios using mock API.
- QA testers can do automation testing & deploy jobs on Jenkin without having to use original API. They can mock 3rd party API responses if there is IP restriction to the 3rd party API.
- APIs are versioned based on its format & new addition of changes. And it makes sense to developer to see if new API version would be compatible with older version by mocking the API locally without having to integrate the latest api version.
- Developers often want to test their applications but do not want to use live data from database or do not have steps to reproduce any bugs. They can gain some useful logs from the loggging service & find the response format for specific request and use it to get simulated API response to actual request done from developer.
How to mock API
1. Using Burp Suite Pentesting Tool
I will discuss about one of my favourite free tool called “Burp Suite”. You can download one of the free community edition and you will get most of the feature support. The paid premium license is only for Professionals mainly relying on this tool for their hardcore penetration testing usecases.
We both will see how we can leverage some of the features of this tool to mock the original API Request endpoint, capture requests & response and alter data to simulate different usecase.
Download Burp Suite Community Edition: https://portswigger.net/burp/communitydownload
On opening up Burp suite, you will find various tabs. I will just give a brief overview on each Tab.
- Dashboard : You can find event logs, running automated tasks/jobs/scans and issue findings in this tab.
- Target: This tab gives more info on issues and sitemap discovered for running website scans.
- Proxy: This is the most helpful tab which has feature to intercept requests, view HTTP history, websockets history and configure proxy setting or use inbuilt proxy pre-configured chromium browser.
- Intruder: This tab can run automated attack jobs on website url string by using templates or payloads from CSV file with concurrency handling.
- Repeater: In this tab, you can paste HTTP format requests and play around the request payload modification.
- Comparer: You can compare responses/data from previous tabs in the Comparer section.
- Logger: You can configure logger to log useful data while running Scans or automated requests.
- Collaborator: Collaborator is a network service that enables you to detect invisible/blind vulnerabilities by trying application to interact with other protocols.
- Sequencer: Sequencer is a tool that analyzes the randomness of a sample of tokens. It can be used to test tokens that are meant to be unpredictable, such as: Session tokens Anti-CSRF tokens Password reset tokens.
- Decoder: You can use this tab to decode/encode data using ASCII,base64, octal, hex, binary,gzip , etc.
- Organizer: You can store specific requests with annotations in this tab.
- Extensions: Its like a marketplace from where you can download other extensions. e.g. HTTP Mock which can mock response from local file.
- Learn: Burp suite related learning resource can be found here.
We will be using Proxy Tab to mock requests.
Further steps as below:
- Click on “Open Browser”. I will give example of API on website: https://dummyjson.com/ . You can open browser devtool and note down the url of the json api which list data : “https://dummyjson.com/products?limit=5&skip=7”
- Go to HTTP History tab and note down the url which you would like to mock the request/response for. You can click on “Add to scope”.
- Now click to Proxy settings, and we will configure to capture request to be intercepted for URL which was added in scope for Request & Response Interception rules. Otherwise, it would keep on intercepting every request/ by default.
- Now enable the Network Intercept by clicking on “Intercept is off” button and it will toggle.
- Hit Reload on the webpage in the browser and then you will related URL request is intercepted. You can modify anything if want to. You can later find response being captured for the same. You can modify response and then click on “Forward” to pass it to browser and it would render data based on modified response.
You can modify the API Response data when you see it showing in the Burp Intercept.
And you can view the modified response on the web-browser page. I just appended “Modified by burp” text in the above response.
You can use Burp Suite extension “HTTP Mock’ for more flexibility on overwriting response from from local files. Learn more about the extension at https://portswigger.net/bappstore/42680f96fc214513bc5211b3f25fd98b
2. Using Browser extension & developer tool
You can close the burp suite chromium browser and now open your normal browser. And open the page in browser and follow below steps:
- Right click on Page-> click on Inspect to open browser devtool and right click on the URL which you require to modify response locally. Click on “Override Content” and browser would popup confirmation to select override directory and permission to store the data.
Now you can override the response content of the url here. I will add “modified using chrome” string in the first title.
You can see the text which I just added. Click Ctrl+S once done and reload the page. 
Once you are done page reloading, you can see the page rendering using the mocked response data in the UI.
Learn more about Chrome Devtool content overriding at https://developer.chrome.com/docs/devtools/overrides
Thats too much learning for today. Let me know in the comment section once you learn & implement mocking data for any of your usecases. If you want me to post a blog on any specific topic, do drop an email at [email protected] or connect on social media handle x.com/akhileshyolo , linkedin.com/in/akhileshyolo or instagram.com/akhileshyolo
Feel free to drop your query in the comment section in case something doesn’t work.
