All 5 Angular Security (XSS, Sanitization & CSP) questions
More in Angular Security (XSS, Sanitization & CSP)
What is cross site scripting, often called XSS, and how does Angular protect against it by default? Why should you avoid storing sensitive information, like an authentication token, directly in an Angular app's local storage? What is Angular's DomSanitizer service and when would you need to use it? How would you safely display user generated HTML content, such as a rich text comment, without exposing your app to XSS attacks?
Advertisement
Back to results for “Angular Security (XSS”
Angular › Angular Security (XSS, Sanitization & CSP)

What is a Content Security Policy, often shortened to CSP, and how does it add another layer of protection to an Angular app?

Intermediate

Answer

A Content Security Policy is a set of rules, usually sent as an HTTP header from the server, that tells the browser exactly which sources of scripts, styles, and other content are allowed to load on a page. Even if an attacker somehow manages to inject a malicious script, a properly configured CSP can prevent that script from actually running or from communicating with an unapproved server.
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com

// This tells the browser to only allow scripts from the app's own origin
// and one specific trusted content delivery network
Real-world example A financial services company configures a strict Content Security Policy on their Angular app's server, ensuring that even if an unexpected vulnerability were exploited, any injected malicious script would be blocked from executing or sending data anywhere.

Common follow-ups: How would you configure a CSP to work correctly with Angular's own generated inline styles?;What tools can help you test whether a CSP is configured correctly?

HTTP Client & Interceptors;Build Environments & Deployment
All 5 Angular Security (XSS, Sanitization & CSP) questions