Introducing Web-based API Client (Secure & Open-Source)

An API Client is a powerful tool that allows developers to interact with APIs easily. With API Client, developers can quickly and easily make requests to APIs, get results, and test them. At Requestly, we are trying to simplify the world of front-end developers. We learned that most frontend developers prefer Web-based API clients, but building a Web-based API client is challenging due to CORS issues.

Recently, We’ve rolled out a Web-based API client that is available on https://app.requestly.io/api-client that developers can use after installing the Requestly browser extension (Chrome, Firefox, Edge supported).

In this post, we will cover briefly about Requestly API Client, the different features it offers, how it works and how it is more secure.

Open-Source Web-based API Client

Requestly is available as a browser extension as well as a desktop app on all major platforms. You can Install Requestly from here to start using the API Client. Moreover, Requestly is open-source, and the source code is available on GitHub.

We’ll cover in more detail why browser extension is required in the later part of this article, but the short answer is to bypass CORS Issues. Other Web-based API clients proxy your API request through their internal server. Read more here, but with Requestly API client, your API request is directly sent to your server (A more secure approach)

Try out Requestly API Client on the Web - https://app.requestly.io/api-client

Requestly offers the following additional features

• Import cURL requests
• API Mock Server - For quickly creating mock endpoints
• Override API responses - When you need a different response for a given API endpoint
• Team Workspaces - For faster collaboration between devs

Here’s a GitHub Ticket for API Client feedback - https://github.com/requestly/requestly/issues/720

How Requestly API Client works?

For building a Web-based API client, CORS is a big blocker. Read more about CORS here. Requestly leverages Chrome extension APIs to solve the CORS Issues.

When you hit an API endpoint, we create an HTTP request and send a message to the extension background process, which internally makes the call to the actual API endpoint and returns the response.

You can check the source code here - https://github.com/requestly/requestly/blob/master/app/src/components/common/APIClient/APIClient.tsx

‍

📌 When you hit the API endpoint in Requestly API Client you don’t see any network call in the devtools because the actual request is sent by the background process.

Why is Requestly API Client more secure?

Requestly API Client is more secure for two reasons

1. The request hits your API server directly (without any additional hop through the internal server)
2. Requestly is Open-Source

One of the biggest challenges when building any Web-based API client is the CORS issue, which is when you try to hit an API endpoint that is on another domain (e.g., my-api-server.com) from a different domain (e.g., my-api-client.com)

Browsers don’t allow it due to security reasons, so one of the choices that other Web-based API clients have made is to route the request through their internal server, which might not be secure because your API request can have your auth tokens, cookies, etc.

Requestly leverages Chrome extension APIs, and hence you need to install a browser extension to support the Web-based API client, but that’s a one-time thing and requires no additional setup.

At Requestly, we are committed to building a privacy-first developer tool that improves developer productivity. Try out the API client here - https://app.requestly.io/api-client and share your feedback on the GitHub ticket here.