How do I protect my backend from receiving requests that do not come from the frontend? - rest

Question

I'm using Strapi API for my CMS/backend which has a path localhost:1337/products.
I have a Vue frontend that makes a graphql POST to the backend whenever the user accesses localhost:3000/products and uses the information to render the products page and, if the user is logged in, the prices of said products.
In order for this method to work I must grant access to the /products path to the user, which means they can also directly access localhost:1337/products.
How do I restrict access to the backend while still allowing the frontend to make requests to it?
This is how my frontend looks:
<template>
<div>
<div v-for="product in filteredList" v-bind:key="product">
<router-link :to="{ name: 'product-id', params: { id: product.id }}" tag="a">
<h3>{{ product.name }}</h3>
</router-link>
<div v-if="username">{{ product.price.toFixed(2) }}</div>
<div v-else>
Sign in to see price!
</div>
</div>
</div>
</template>
<script>
import productsQuery from '~/apollo/queries/product/products'
export default {
data() {
return {
products: [],
query: ''
}
},
apollo: {
products: {
prefetch: true,
query: productsQuery
}
},
computed: {
// Search system
filteredList() {
return this.product.filter(product => {
return product.name.toLowerCase().includes(this.query.toLowerCase())
})
},
username() {
return this.$store.getters['auth/username'] ||this.$store.getters['auth/email']
},
}
}
</script>

Answer 1

I assume users do not actually access localhost:3000 from their browser but use the IP address or hostname of your server. If so, then either:
Configure the CMS to accept only connections from within the server. Often a service accepts connections on all network interfaces (all IP addresses) by default but you can normally configure it to listen only on the localhost interface (IP address 127.0.0.1).
Configure the firewall on the server to only allow access on port 3000.

Answer 2

You really can't. Any API calls your client makes to your backend can be made by any computer on the Internet if they have the endpoint, credentials, etc.. Backends are agnostic to the source making the call. Even though the backend can determine the origin of the call, any hacker can still fake it to look like your own client app.