Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
Manfred Steyer
PRO
May 18, 2022
Programming
0
200
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
Manfred Steyer
PRO
May 18, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022
manfredsteyer
PRO
0
360
Better Angular Architectures: Architectures with Standalone Components @DWX2022
manfredsteyer
PRO
1
390
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
300
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
manfredsteyer
PRO
0
350
Angular-basierte Micro Frontends mit Module Federation @API Summit
manfredsteyer
PRO
0
150
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
170
Sustainable SPAs with Strategic Design: A Wonderful Friendship?
manfredsteyer
PRO
0
150
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
manfredsteyer
PRO
0
280
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
1
370
Other Decks in Programming
See All in Programming
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
1901drama
0
180
AWS Config Custom Rule、ノーコードでできるかな?
watany
0
250
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
160
FutureCon 2022 FlutterアプリのPerformance測定
harukafujita
0
130
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
540
パラメタライズドテスト
ledsun
0
220
20220706_Google Apps Scriptを実演で学ぶ~ GAS × Slack ~
apachan
2
620
アジャイルで不確実性に向き合うための開発タスクの切り方
tanden
4
1.1k
Scaling Productivity- How we have improved our dev experience
sockeqwe
1
120
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
350
段階的な技術的負債の解消方法.pdf
ko2ic
2
910
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
tamago3keran
1
160
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
Building Your Own Lightsaber
phodgson
95
4.7k
Web Components: a chance to create the future
zenorocha
303
40k
The Cult of Friendly URLs
andyhume
68
4.8k
Thoughts on Productivity
jonyablonski
44
2.4k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
560
Making Projects Easy
brettharned
98
4.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
Side Projects
sachag
450
37k
Transcript
@ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer Folie▪ 2 Client Authorization-Server Resource-Server
@ManfredSteyer Folie▪ 3 Client Authorization-Server Resource-Server 1. Redirection 2. Redirect
w/ (Code for) Access-Token 3. Access-Token
@ManfredSteyer Folie▪ 4 Client Authorization-Server Resource-Server 1. Redirection 2. Redirect
w/ (Code for) Access-Token and Id-Token 3. Access-Token User Info Endpoint (OIDC)
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Several suggestions for using OAuth 2 in a more
secure way
@ManfredSteyer Example: Using Code Flow + PKCE instead of Implicit
Flow
@ManfredSteyer Remaining Problem: XSS -> Stealing Tokens
@ManfredSteyer
@ManfredSteyer Why Token Refresh? Short living Tokens increase Security Users
don't want to login over and over again
@ManfredSteyer Folie▪ 23 Client Authorization-Server Resource-Server 1. Redirection 2. Code
for Access-Token und Id-Token and Refresh-Token
@ManfredSteyer Folie▪ 24 Client Authorization-Server Resource-Server 3. Refresh-Token 4. Code
for Access-Token und Id-Token and new Refresh-Token
@ManfredSteyer * in specific situations …
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Client Gateway Authorization-Server Resource-Server Access-Token Id-Token Refresh-Token HTTP-only Cookie
Static Files (SPA) + XSRF Token SameSite +
@ManfredSteyer Client Gateway Authorization-Server Resource-Server 1 Access-Token Id-Token Refresh-Token HTTP-only
Cookie Static Files (SPA) Resource-Server 2 ⁉️
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer // 1. Register Services var builder = WebApplication.CreateBuilder(args); builder.Services.AddReverseProxy()
.LoadFromConfig(builder.Configuration.GetSection("ReverseProxy")); […] builder.Services .AddAntiforgery([…]) .AddSession([…]) .AddAuthentication([…]) .AddCookie([…]) .AddOpenIdConnect([…]); YARP 101
@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
@ManfredSteyer
@ManfredSteyer DEMO
@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/
@ManfredSteyer Conclusion Browser: No Safe Place for Tokens Gateway: Generic
Implementation Token Refresh & Exchange Easier + More Secure
@ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops