Workshop Angular
Security

Agenda

• Duration: 8 hours
• Online

1. 01

   SPA security foundations (1h 30min)

   • Browser security model – same-origin policy, CORS, HTTPS and why they matter specifically for SPAs
   • Authentication vs. authorisation – mental models, roles, route guards and HTTP interceptors in Angular
   • Cookies, sessions and tokens – HttpOnly, Secure, SameSite attributes; when to use what; common pitfalls
   • Key web security risks for Angular apps – mapping the most relevant OWASP risks to frontend and Angular-specific patterns
2. 02

   XSS, CSRF and Angular's defences (2h)

   • How Angular prevents XSS – sanitization, security contexts, interpolation vs. innerHTML vs. bypassSecurityTrust*
   • XSS pitfalls developers create – unsafe use of DomSanitizer, template injection risks, SSR-specific attack surface
   • CSRF mechanics and mitigations – how the attack works, SameSite cookies, Angular HttpClient's built-in XSRF support
   • Other injection risks – open redirects, HTML injection in dynamic content, what Angular does and doesn't protect you from
3. 03

   OAuth 2.0, OIDC and session management (2h)

   • Auth flows for SPAs – Authorization Code + PKCE, why older flows were deprecated, common mistakes in implementation
   • Secure token storage – localStorage vs. memory vs. HttpOnly cookies; what each approach protects against and what it doesn't
   • Backend-for-Frontend (BFF) pattern – why it's the recommended architecture for secure Angular apps and how to apply it
   • Token lifecycle – refresh token rotation, silent renew, session expiry, logout and token revocation
4. 04

   CSP and Trusted Types (1h)

   • Content Security Policy for Angular – nonce-based scripts, deploying CSP without breaking your app, common misconfigurations
   • Trusted Types – enforcing safe DOM sinks, integrating with Angular's DomSanitizer, what it protects against
   • Security headers awareness – which headers protect your Angular app, how to verify they're set correctly, and who on the team is responsible
5. 05

   Angular vulnerabilities and supply chain (1h)

   • Real Angular security advisories – documented XSS vulnerabilities in Angular's template compiler and ecosystem libraries; how they were discovered and fixed
   • Third-party npm risk – how vulnerable transitive dependencies affect your app, evaluating library trustworthiness, lock file discipline
   • Staying current – reading Angular security advisories, automated update strategies with ng update, understanding end-of-life risks
6. 06

   Security automation and CI/CD (30min)

   • Dependency vulnerability scanning – automated tooling (npm audit, Snyk, Socket.dev); integrating checks into your CI pipeline
   • Static code analysis – using linting rules and automated tooling to catch security-sensitive patterns before they reach production
   • Building a security checklist – pre-deployment checks, making security part of your team's definition of done

Takeaways

1. 

   Understand the SPA security landscape

   Learn how browser security fundamentals - same-origin policy, HTTPS, CORS - apply to Angular apps. Understand the difference between authentication and authorization, and why SPAs require a different security mindset than traditional server-rendered apps.

2. 

   Stop XSS, CSRF and injection attacks

   Know exactly what Angular sanitizes for you - and where it doesn't. Understand security contexts for HTML, URLs and styles, when bypassSecurityTrust* creates real risk, and how CSRF works with both cookie and token-based auth.

3. 

   Learn from real Angular security advisories

   Study documented vulnerabilities in Angular itself - including XSS bypasses in the template compiler's sanitization schema - and in ecosystem libraries. Understand how they were introduced, how Angular patched them, and why keeping dependencies current is a security decision.

4. 

   OAuth 2.0 and OpenID Connect correctly

   Move beyond ad-hoc session handling to modern token flows. Understand Authorization Code + PKCE for SPAs, token storage trade-offs, and the Backend-for-Frontend (BFF) pattern that closes the most critical security gaps.

5. 

   Content Security Policy and Trusted Types

   Go beyond sanitization with defence-in-depth at the browser level. Learn to configure a strict CSP for Angular with nonce-based scripts, avoid common policy mistakes, and use Trusted Types to prevent entire classes of DOM-based attacks.

6. 

   Automate security into your CI/CD pipeline

   Build a security net that runs on every commit. Use automated dependency vulnerability scanning (npm audit, Snyk, Socket.dev) and establish an update workflow so your team never unknowingly ships known vulnerabilities to production.

Your Trainer

Mateusz Stefańczyk

Google Developer Expert

For 9 years, Mateusz has been developing web applications with Angular. He has performed dozens of audits for Angular projects worldwide. Mateusz actively participates in the angular.love community, writing expert articles, and sharing his knowledge at Angular meetups in Poland, Norway, Germany, and the UK.

Get your tickets

Join us for an online Modern Angular workshop. Secure your spot today!

FAQ