Question posted in 
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!
2
Answers
Open the NGINX configuration file on you server at this path :
"sudo vi /etc/nginx/nginx.conf"
if you have configured virtual host it’s at this path :
"sudo vi /etc/nginx/sites-enabled/example.conf"
For limit the access to the URL, you have to write this :
location /configuration.json {
…
deny IP ADDRESS;
…
}
Tell me, if this answer work correctly !
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.