Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io
2. @ManfredSteyer @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer OAuth2 Folie▪ 5 Client Authorization-Server Resource-Server
6. @ManfredSteyer OAuth2 Folie▪ 6 Client Authorization-Server Resource-Server 1. Redirection 2. Redirection w/ Access-Token 3. Access-Token One central user account Only Auth-Svr. sees the Password Auth. decoupled from Client Tokens provide flexibility No Cookies: No XSRF
7. @ManfredSteyer
8. @ManfredSteyer
9. @ManfredSteyer Manfred Steyer
10. @ManfredSteyer
11. @ManfredSteyer @ManfredSteyer
12. @ManfredSteyer Implicit Flow Folie▪ 12 Client Authorization-Server Resource-Server 1. Redirection 2. Access-Token 3. Access-Token
13. @ManfredSteyer OpenId Connect Folie▪ 13 Client Authorization-Server Resource-Server 1. Redirection 2. Access-Token and Id-Token 3. Access-Token User Info Endpoint (OIDC) Format: JSON Web Token (JWT)
14. @ManfredSteyer
15. @ManfredSteyer @ManfredSteyer
16. @ManfredSteyer @ManfredSteyer
17. @ManfredSteyer Current Best Practices Documents Advice Against Implicit Flow
18. @ManfredSteyer Implicit Flow Folie▪ 18 Client Authorization-Server Resource-Server 1. Redirection 2. Access-Token 3. Access-Token
19. @ManfredSteyer
20. @ManfredSteyer
21. @ManfredSteyer Code Flow w/ OIDC Folie▪ 21 Client Authorization-Server Resource-Server 1. Redirection 2. Redirection w/ Code
22. @ManfredSteyer Code Flow w/ OIDC Folie▪ 22 Client Authorization-Server Resource-Server 3. AJAX Code 4. Redirection w/ Access-Token and Id-Token 5. Access-Token
23. @ManfredSteyer Code Flow + PKCE w/ OIDC Folie▪ 23 Client Authorization-Server Resource-Server 1. Redirection + Hash(verifier) 2. Redirection w/ Code Hash(verifier)
24. @ManfredSteyer Code Flow + PKCE w/ OIDC Folie▪ 24 Client Authorization-Server Resource-Server 3. AJAX Code + verifier 4. Response w/ Access-Token and Id-Token 5. Access-Token Hash(verifier)
25. @ManfredSteyer @ManfredSteyer
26. @ManfredSteyer DEMO
27. @ManfredSteyer
28. @ManfredSteyer @ManfredSteyer
29. @ManfredSteyer Why Token Refresh? Short living tokens increase security Users don't want to login over and over again
30. @ManfredSteyer Refresh w/ Cookie Folie▪ 30 Client Authorization-Server Resource-Server 1. Redirection 2. Redirection w/ Code
31. @ManfredSteyer Alternative: Silent Refresh Folie▪ 31 Client Authorization-Server Resource-Server 1. Redirection in hidden iframe 2. Redirection w/ Code
32. @ManfredSteyer Folie▪ 32 Client Authorization-Server Resource-Server 1. Redirection 2. Code for Access-Token und Id-Token and Refresh-Token Refresh Token
33. @ManfredSteyer Refresh Token Folie▪ 33 Client Authorization-Server Resource-Server 3. Refresh-Token 4. Code for Access-Token und Id-Token and new Refresh-Token
34. @ManfredSteyer * in specific situations …
35. @ManfredSteyer Refresh-Token and Browsers • OAuth 2.0 Security Best Current Practice allows it under specific circumstances • Security Audit (XSS!) • Refresh Token needs to be one-time token • After Refresh: Client gets new refresh toke
36. @ManfredSteyer DEMO
37. @ManfredSteyer
38. @ManfredSteyer
39. @ManfredSteyer Client Gateway Authorization-Server Resource-Server Access-Token Id-Token Refresh-Token HTTP-only Cookie Static Files (SPA) + XSRF Token SameSite +
40. @ManfredSteyer Client Gateway Authorization-Server Resource-Server 1 Access-Token Id-Token Refresh-Token HTTP-only Cookie Static Files (SPA) Resource-Server 2 ⁉️
41. @ManfredSteyer
42. @ManfredSteyer
43. @ManfredSteyer
44. @ManfredSteyer
45. @ManfredSteyer // 1. Register Services var builder = WebApplication.CreateBuilder(args); […] builder.Services .AddAntiforgery([…]) .AddSession([…]) .AddAuthentication([…]) .AddCookie([…]) .AddOpenIdConnect([…]); YARP 101
46. @ManfredSteyer // 2. Add Middleware app.UseSession(); app.UseAuthentication(); app.UseAuthorization(); app.UseCookiePolicy(); app.UseXsrfCookie(); app.UseGatewayEndpoints(); app.MapReverseProxy([…]); // 3. Start Sever app.Run("http://+:8080"); YARP 101
47. @ManfredSteyer
48. @ManfredSteyer Demo • SPA: https://purple-flower-021fa1b03.azurestaticapps.net/home • SPA behind Security Gateway: https://demo-auth-gateway.azurewebsites.net/home • Source Code for Gateway: https://github.com/manfredsteyer/yarp-auth-proxy • Source Code for Auth in SPA: https://github.com/manfredsteyer/auth-gateway- client/blob/main/apps/flight-app/src/app/shared/auth.service.ts
49. @ManfredSteyer Conclusion Browser: No Safe Place for Tokens Gateway: Generic Implementation Token Refresh Easier + More Secure
50. @ManfredSteyer
51. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops