Nginx¶

Rule¶

Add the default security headers and hide the nginx version, you need to edit your rs-route.conf.template file :

server {
    listen 80;

    server_name localhost;
    server_tokens off;

    set $csp_nonce $request_id;
    sub_filter_once off;
    sub_filter CSP_NONCE $csp_nonce;

    add_header Content-Security-Policy "default-src 'self'; img-src 'self'; connect-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'nonce-$csp_nonce' https://fonts.googleapis.com; script-src 'self' 'nonce-$csp_nonce'";
    add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
    add_header Referrer-Policy strict-origin-when-cross-origin;
    add_header X-Frame-Options "DENY" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    root /usr/share/nginx/html;

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

    location ~ /index.html {
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    }

    location /rs/ {
      proxy_http_version 1.1;
      proxy_pass $BACKEND_URL;
    }
}

Integration¶

Angular¶

Add the ngCspNonce option on the app-root element:

index.html

<!doctype html>
<html lang="fr">
  <body>
    <app-root ngCspNonce="CSP_NONCE"></app-root>
  </body>
</html>

React (Vite)¶

vite.config.ts

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return {
    plugins: [react()],
    html: {
      cspNonce: "CSP_NONCE",
    },
  };
});