<p>I have made a full stack web application using MERN and is deployed using Kubernetes cluster.</p>
<p>The application is runs fine except one issue. And that is, I (as a user), am able to access the API from the browser like <em><strong>www.domain-name/api/orders</strong></em> which gives me the JSON response.</p>
<p>Which I do not want. I need this to be hidden/restricted.</p>
<p>I am using the NGINX-INGRESS for routing as :</p>
<pre class="lang-yaml prettyprint-override"><code>apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
    name: ingress-service 
    annotations: 
        kubernetes.io/ingress.class: nginx 
        nginx.ingress.kubernetes.io/use-regex: 'true'
spec: 
    rules: 
        - host: shopify.dev 
          http: 
            paths:
                - path: /api/users/?(.*) 
                  backend: 
                    serviceName: auth-srv 
                    servicePort: 3000
                - path: /api/orders/?(.*)
                  backend: 
                    serviceName: orders-srv
                    servicePort: 3000
                - path: /?(.*) 
                  backend: 
                    serviceName: client-srv
                    servicePort: 3000 
</code></pre>
<p>Since both the requests /api and the /* (frontend) are being routed VIA nginx-ingress, is this how this is supposed to work?
What is the solution to this?</p>

<p>Your client app, which is running in the browser, is supposed to be able to fetch the data from the API, therefore it is obvious that whether your app makes the request or you (as a user) make the request from the same browser (or another rest client), it will pass through (assuming the same authentication procedure is followed).</p>
<p>It is impossible to prevent it completely and it should not be required because the user will still have the access to the same data, whether though the app or directly.</p>
<p>But, if you want to hide it because you don't want regular users to see some strange json response when they expect a nice looking frontend app (because they randomly typed an incorrect url? you wouldn't intentionally navigate them to such endpoint in your app), you can implement that logic into your app.</p>
<p>The way you could do that is to include some custom HTTP header in all the request that are made by your fronend app (in axios/fetch calls) and then implement a filtering logic on your backed that will parse this header to see whether the call has been made from the frontend app or directly (possibly a middleware that would redirect the user to root page if it sees a request without this header). I have used this solution before and it works fine.</p>
<p>But again, note that this has nothing to do with security as your data is already available in your frontend app. Also, it has nothing to do with kubernetes itself and any advanced user will be able to forge such request that will bypass this solution. Your data should be protected by authentication, not by some html document.</p>
<p>For example, if you are using <code>axios</code>, you can set up that custom header globally for all request like this (on frontend).</p>
<pre><code>axios.defaults.headers.common['fromApp'] = true 
</code></pre>
<p>And on your backend, you can create a middleware</p>
<pre><code>const isFrontendRequest = (req, res, next) =&gt; {
  const h = req.get('fromApp') // get the header
  if (!h) {
    // handle the request not originating from your app and return
  }
  next() // custom header was present if we are here, continue normally
}
</code></pre>
<p>Which you can then apply globally in front of every incoming request.</p>
<pre><code>app.use(isFrontendRequest)
</code></pre>
