Why Secure APIs Mistrust Front-End Applications

Preventing the misuse of APIs is critical. If APIs are not secured correctly, there is the potential for significant data leakage. According to IBM Security and the Ponemon Institute, the average total cost of a data breach is almost 4 million dollars worldwide and over 8 million dollars in the United States.¹ Don’t let your API be at the center of a data breach.

When APIs are built for use by a front-end application, it is easy for developers to focus only on how the APIs will be used by that application. Front-end applications that render on the client-side (e.g. React, Vue), however, do not have a special tunnel to the API that is secured from misuse. All the requests to and from the API happen in the browser. So even if the APIs are not officially public, all a bad actor has to do to get ahold of the APIs is to pull up the developer tools in their browser of choice and look at the network calls being made by the application. Because of this, APIs should not rely on the front-end application for any security enforcement, as the front-end itself can be circumvented.

For example, let’s say you’re building a bank website with a React front-end and an API back-end. When a customer John Doe logs in to the website, he should only see the bank accounts that belong to him. To achieve this, the front-end retrieves the list of accounts that belong to John from an API endpoint and displays only those accounts on the screen for John to select from.

When John selects an account, the front-end then retrieves detailed account information from a different API endpoint and displays the information on the screen. This endpoint must verify that John has access to the account before providing the requested information, even though from the front-end point-of-view this account will most definitely always belong to John. Otherwise, John can manipulate the request to pass a different account ID and make off with bank account info for other customers.

Granted, this is a farfetched example as I’m sure that banks, given their high-profile status, take significant measures to keep vulnerabilities like these at bay. Nevertheless, it demonstrates the impact that such a simple oversight can have. Therefore, when it comes to API security, don’t take the happy path. For each endpoint that you build, think about who should have access to the data and more importantly, who should have access to manipulate the data. Implement all those restrictions at the API layer even if the restrictions are also implemented in the front-end application. This will ensure that bad actors cannot exploit the API for nefarious purposes.

---

¹ https://www.ibm.com/downloads/cas/ZBZLY7KL