Nginx secure serve static file

Question

im buildin a MEAN stack application, and i just found out that it's a best practice to let Nginx serve static file (Currently my node is serving static file) and use reverse proxy. so i was able to serve a static file and reverse proxy on Nginx, my question is, is there a way to secure the access to the static file?

This is my Nginx code

server {
    listen 80;


    location /static {
    alias /var/www/project/public;
    autoindex off;
} 

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Under the public folder, i have style.css so when i go to the url localhost/static/style.css , i could see my code, so i imagine lets say i deployed my website to the public and have it's domain name, the users could access my static files by just going to www.domainname.com/static/style.css Is this normal? or there's a way to just limit the access to NodeJS server? being the only thing could access the static file? or im getting this wrong.

Thanks! sorry im new to this web development world, but im learning.

Answer 1

You can limit access using nginx by adding the following to your location definition:

#This would be the IP of the server you want to have access to your protected file
allow 123.123.123.123/32;
deny all;

But in this case, you don't want to restrict access to your static files. The user loading the web page needs access to the css files to display it correctly. If you were to watch the network traffic of when you loaded a web page, you would see that your browser downloads all the client side CSS, JS, and HTML files it needs to run properly. So it is completely normal for people to be able to just look at CSS files that are hosted statically. Usually a backend NodeJS server has no use for CSS files.