Modifying request responses leading to unauthorized access?

Question

I have been developing some applications lately where the content on the web app is rendered based on the request's response. For example, a user with a "free" plan has limited access, whereas the user with a "premium" plan has access to paid features.

I noticed with Burpsuite that I could modify the request's response by changing "free" to "premium" and getting access to premium features.

I noticed this issue in several single-page applications built on modern frameworks like React, Vue etc.

What do you call this type of security vulnerability? I believe the possible fixes are adding a second check in the backend API to minimise the attack, but this cannot be the case with front-end dependent websites like graphics, image editing, etc.

Also, where can I read more about this vulnerability?

Default response:

{
"user": "John",
"plan": "free"
}

Altered Response using burp feature 'Modify response to this request:

{
"user": "John",
"plan": "premium"
}

Answer 1

This is a plain ol' run-of-the-mill Broken Access Control

Bypassing access control checks by modifying the URL...

This type of problem is #1 in OWASPs Top 10 list

Solution: Authentication and access control should be done server-side and not by trusting anything coming from the client.