YouTip

# Configuring Content Security Policy (CSP) in Angular: A Comprehensive Guide Content Security Policy (CSP) is a critical security standard designed to prevent Cross-Site Scripting (XSS), clickjacking, and other code injection attacks. By restricting the resources (such as JavaScript, CSS, Images) that the browser is allowed to load for a given page, CSP significantly hardens your application's security posture. In Angular applications, implementing a strict CSP can sometimes be challenging because the framework historically relied on dynamically injecting inline styles (` ``` --- ### Example 2: Static Hosting with `no-inline-styles` If your application is hosted on a static CDN (like AWS S3, Netlify, or GitHub Pages) where you cannot generate dynamic nonces per request, you can use the `no-inline-styles` option. #### Step 1: Configure `index.html` ```html ``` #### Step 2: Configure Angular CLI to Extract Styles To ensure your application styles still load correctly without inline injection, update your `angular.json` configuration to extract component styles into external CSS files during the build process: ```json { "projects": { "my-app": { "architect": { "build": { "options": { "extractLicenses": true, "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false // Disable critical CSS inlining } } } } } } } } ``` *Setting `inlineCritical` to `false` prevents the build system from injecting inline `