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!

Continue reading...