Getting Famaliar with nginx …

a typical nginx.conf be like

server {
    listen 80;
    server_name localhost;

    # security heading
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    
    # static file setting
    root /usr/share/nginx/html;
    index index.html;

    # gzip for performance
    gzip on;
    gzip_types text/plain text/css application/json \\
    application/javascript text/xml application/xml \\
    application/xml+rss text/javascript;
    

    location / {
        try_files $uri $uri/ /index.html;
    }

    # API Proxy
    location /api/ {
        # Proxy to backend
        proxy_pass <http://backend:8000/>;
        
        # Proxy headers
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # Timeout
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
        
        # set buffering
        proxy_buffering on;
        proxy_buffer_size 128k;
        proxy_buffers 4 256k;
    }
    
    # health check
    location /health {
        proxy_pass <http://backend:8000/health>;
        access_log off;
    }
}

Server

Think of a server block in Nginx like a virtual host or a specific website that Nginx is responsible for. It tells Nginx, "Hey, when a request comes in that matches these conditions, here's how to handle it."

listen 80; tells Nginx to listen for incoming connections on port 80, which is the standard port for unencrypted web traffic (HTTP).

And server_name localhost; means this server block will handle requests where the Host header in the incoming request is localhost. You're exactly right that it wouldn't respond to localhost:3000 because of the port or other domain names because of the server_name.

→

Some Security Settings

X-Frame-Options "SAMEORIGIN"

specifically designed to prevent Clickjacking.

Clickjacking is a cyber attack that someone embed an invisible <iframe> to the page and trick users to click something on the page and attempt malicious attack.

X-Content-Type-Options "nosniff" short for “no sniffing”

sometimes the browser “sniffs” the file and interpret ignoring the settings in server conf. Ex. I wanted to deploy as a static file but browser treated it as JavaScript. This can lead to Cross-Site Scripting vulnerabilities.

So, X-Content-Type-Options "nosniff" is essentially telling the browser: "Trust what I, the server, say the content type is. Do not try to guess or 'sniff' it." This forces the browser to strictly follow the Content-Type header provided by Nginx, which helps prevent certain types of attacks.

X-XSS-Protection "1; mode=block" specifically designed to deal with Cross-Site Scripting (XSS) attacks. So, when you see X-XSS-Protection "1; mode=block", the "1" means "enable the XSS filter in the browser." And mode=block tells that filter: "If you detect an XSS attack, don't try to clean it up and continue. Instead, just block the entire page from rendering."