Securing an Angular Application: Part 3 — Implementing CSP with Nginx

Continuing my series on hardening Angular applications, Part 3 moves into the actual Nginx server configuration and Content Security Policy (CSP) implementation.

In this part, I walk through the docker-nginx-server.conf configuration used to serve a real Angular application and explain how the different pieces work together.

Some of the topics covered:

• ⚙️ Angular server configuration with Nginx
• 🔀 Angular SPA routing
• 📦 Static asset handling and caching
• 🚫 Blocking hidden and sensitive files
• 🔐 Security headers
• 🛡️ Content Security Policy directives
• 🔑 Dynamic CSP nonce handling
• 🧩 Injecting the nonce into Angular HTML
• ⚠️ Error page handling
• 🔒 Trusted Types and other CSP protections

Rather than using a generic CSP policy, the goal is to understand which resources the Angular application actually needs and how those requirements translate into individual CSP directives.

This part also shows how the CSP nonce is handled using Nginx:

set $csp_nonce $request_id;

sub_filter_once off;
sub_filter '__CSP_NONCE__' '$csp_nonce';

This allows the nonce used by the CSP policy to be injected into the Angular application's HTML for each request.
With the Nginx configuration and CSP in place, the next part moves one layer deeper into the deployment process: Dockerizing the Angular application and packaging the Nginx configuration into a production-ready container.

📖 Read Part 3:
https://medium.com/@jangidamit800/angular-content-security-policy-csp-implementing-the-nginx-server-configuration-c70593b9136a?sharedUserId=jangidamit800

#Angular #AngularSecurity #CSP #ContentSecurityPolicy #Nginx #WebSecurity #DevSecOps #Docker #FrontendSecurity