How to Restrict Access to a Static File in Angular/NGINX Server by Direct URI Access

We have an Angular application deployed on an NGINX server. Inside the assets folder, I have a subfolder named configuration which contains a file named configuration.json.

We load this configuration.json file into my Angular application using an HTTP call. However, the issue arises in the production environment:

The HTTP call appears in the Network tab of the browser's developer tools. If someone copies the request URL and pastes it into the browser, they can directly access the configuration.json file.

Requirement:

• We want to restrict access to this configuration.json file such that:
• The file can only be accessed by my Angular application through its HTTP call. Direct access to the file via a browser by pasting the URL should be blocked.

Environment:

• Frontend Framework: Angular 18
• Server: NGINX

What is the best approach to secure this file? Can it be achieved using NGINX configurations, or another method?

Thank you in advance for your help!

This depends on what production means for you or your organisation:

• if you are on a closed network/known computers then you can easily control access through nginx (using Hadrien Valet answer above).

• Otherwise since Angular is a framework for client-side rendering, it means if the application needs to make and api call, you wont be able to prevent the same call from being made from the browser manually (since Angular is also running on the browser), you could set some special header (e.g. access-control-allow-origin) to block direct browser request but nothing prevents the user from faking the origin and sending the same request although it would be much harder.