0

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!

Improve this question
1
  • Based on what you’ve described, since you see the request for the configuration.json file in the DevTools Network tab, it’s most likely being requested by your app using an AJAX call (either via the XMLHttpRequest or fetch API). As @Jensen already mentioned, you cannot prevent users from reverse-engineering the requests made by your app and manually accessing the contents of this file. Because the request originates from the user’s IP address, you cannot block such requests using nginx allow/deny directives. What I can say is that this reflects poor application design. Commented Dec 20, 2024 at 22:44

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

To limit access to the URL, you have to write this:

location /configuration.json {
   ...
   deny IP ADDRESS;
   ...
}
Improve this answer

6 Comments

Thanks for your answer, What does mean by { ... deny IP ADDRESS; ... } could you please elaborate and what would be the value there
You can write: "Deny All;" to deny all IP addresses or just an IP address like 192.168.10.20 to deny an IP address.
What will the impact of that line be on the nginx file? I want those files to be loaded from an HTTP call and not loaded from the browser URI.
The impact of that line into the nginx file, it's to blocked the access of the file by one or all ip address. You can also write an exception just for you ip address !
you have some example here : studytonight.com/nginx-guide/…
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.