Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
Search
Ken'ichirou Kimura
April 20, 2024
Technology
1
1.3k
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
2024/04/20に開催されたGlobal Azure 2024(東京会場)の10分セッションの資料です。
https://jazug.connpass.com/event/311408/
Ken'ichirou Kimura
April 20, 2024
Tweet
Share
More Decks by Ken'ichirou Kimura
See All by Ken'ichirou Kimura
Amazon Q Developerで.NET Frameworkプロジェクトをモダナイズしてみた
kenichirokimura
1
190
Alternative GitHub Secret Manager
kenichirokimura
0
74
SORACOMで実現するIoTのマルチクラウド対応 - IoTでのクリーンアーキテクチャの実現 -
kenichirokimura
0
530
How to use Amazon Cognito user pools with custom UI and also OIDC
kenichirokimura
0
280
あなたも今日からIoTと握手! SORACOM/SORACOM UGの紹介
kenichirokimura
1
120
推し活の1つとしての株購入~みんなでソラコムの株主になろう~
kenichirokimura
0
220
SORACOM UGとは? - 2023/11/04 JAWS-UG 佐賀 x SORACOM UG 九州 バルーンフェスタSP版
kenichirokimura
0
150
IoT x 「何か」で生まれる可能性は無限大! SORACOM/SORACOM UGの紹介
kenichirokimura
0
96
App Runnerで始める、AWSでの C#生活
kenichirokimura
0
210
Other Decks in Technology
See All in Technology
ゼロからわかる!!AWSの構成図を書いてみようワークショップ 問題&解答解説 #デッカイギ #羽田デッカイギおつ
_mossann_t
0
1.5k
カップ麺の待ち時間(3分)でわかるPartyRockアップデート
ryutakondo
0
130
今年一年で頑張ること / What I will do my best this year
pauli
1
220
エンジニアリングマネージャー視点での、自律的なスケーリングを実現するFASTという選択肢 / RSGT2025
yoshikiiida
4
3.6k
AWS re:Invent 2024 recap in 20min / JAWSUG 千葉 2025.1.14
shimy
1
100
Formal Development of Operating Systems in Rust
riru
1
420
EMConf JP の楽しみ方 / How to enjoy EMConf JP
pauli
2
150
re:Invent 2024のふりかえり
beli68
0
110
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
240
Building Scalable Backend Services with Firebase
wisdommatt
0
110
生成AI × 旅行 LLMを活用した旅行プラン生成・チャットボット
kominet_ava
0
150
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
110
Featured
See All Featured
Speed Design
sergeychernyshev
25
730
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7.1k
A Tale of Four Properties
chriscoyier
157
23k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
RailsConf 2023
tenderlove
29
970
Done Done
chrislema
182
16k
Documentation Writing (for coders)
carmenintech
67
4.5k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Transcript
FrontDoorとWebAppsを組み合わせた際の リダイレクト処理の注意点 株式会社オルターブース 木村健一郎
自己紹介 株式会社オルターブース クラウドソリューション部 副部長 木村 健一郎(Kenichiro KIMURA) 大学院在籍中に未踏ソフトウェア創造事業に 採択され、その成果を元に設立したスタート アップに20年在籍。
2014年頃からクラウドの世界に触れる中で サーバレスとIoTに魅せられ、JAWS-UG福岡 やSORACOM UG九州のコアメンバーとして コミュニティ活動を行っている。 2020年にオルターブースにジョイン。テッ クリードとしてお客様の支援やプロダクトの 開発に従事している。 家に帰ると6歳の娘と戯れる日々。 AWS Samurai2019受賞 SORACOM MVC2020,2023受賞 Twitter: @show_m001(しょーちゃん) Copyright © Alterbooth Inc. All Rights Reserved. 2
• App Service(WebApps/Functions)の前段にFrontDoorやApplication Gatewayなどのリバースプロキシを置くときはリダイレクト処理に注意しま しょう • よくあるケースはOIDCやEasyAuthでの認証 • 根本的な問題は「App Serviceが、自身が何というドメイン名で動いていると
認識しているか」 • 解決方法は3つ • アプリを改修する(OIDCの場合) • App Serviceの設定をリソースエクスプローラーで変更する(EasyAuthの場合) • カスタムドメインを使う(万能) 本日の結論 Copyright © Alterbooth Inc. All Rights Reserved. 3
サンプルケース Copyright © Alterbooth Inc. All Rights Reserved. 4 よし、社内用のWebアプリできたからWebAppsにデプ
ロイしよう
サンプルケース Copyright © Alterbooth Inc. All Rights Reserved. 5 よし、社内用のWebアプリできたからWebAppsにデプ
ロイしよう 本番に備えてちゃんと前段にはFrontDoor置いてね! WebAppsへの直接アクセスも禁止して。
サンプルケース Copyright © Alterbooth Inc. All Rights Reserved. 6 よし、社内用のWebアプリできたからWebAppsにデプ
ロイしよう 本番に備えてちゃんと前段にはFrontDoor置いてね! WebAppsへの直接アクセスも禁止して。 FrontDoor置いてWebAppsの設定変えて動作チェックも 完了・・っと
サンプルケース Copyright © Alterbooth Inc. All Rights Reserved. 7 よし、社内用のWebアプリできたからWebAppsにデプ
ロイしよう 本番に備えてちゃんと前段にはFrontDoor置いてね! WebAppsへの直接アクセスも禁止して。 FrontDoor置いてWebAppsの設定変えて動作チェックも 完了・・っと 社員だけがアクセスできるようにEntra IDで認証かけて ね!
サンプルケース Copyright © Alterbooth Inc. All Rights Reserved. 8 よし、社内用のWebアプリできたからWebAppsにデプ
ロイしよう 本番に備えてちゃんと前段にはFrontDoor置いてね! WebAppsへの直接アクセスも禁止して。 FrontDoor置いてWebAppsの設定変えて動作チェックも 完了・・っと 社員だけがアクセスできるようにEntra IDで認証かけて ね! EasyAuthでEntra IDの認証使おう・・・よし、設定完了
Copyright © Alterbooth Inc. All Rights Reserved. 9 認証完了したらこの画面になったぞ! 動いてないじゃないか!
彼がやったのは以下の3つです。一体何が悪かったのでしょうか? • FrontDoor経由でWebAppsにアクセスできるようにした • WebAppsへの直接アクセスを遮断した • WebAppsにEasyAuthでの認証を仕掛けた 一体何が起こったのか? Copyright ©
Alterbooth Inc. All Rights Reserved. 10
Copyright © Alterbooth Inc. All Rights Reserved. 11 EasyAuthやOIDCは、以下のような動作をします。 •
未認証のユーザからアクセスされると、認証サーバにユーザをリダイレクトす る • この時、戻って来て欲しいURL(主に自分自身)をredirect_uriというパラメータで渡す • 認証サーバはユーザを認証したら認証結果をつけてredirect_uriにリダイレク トする
Copyright © Alterbooth Inc. All Rights Reserved. 12 Entra IDで認証して、戻ってきたURLがWebAppsへの直接アクセスになってる!!
Copyright © Alterbooth Inc. All Rights Reserved. 13 実際にredirect_uriの値を確認するとWebAppsのURL(ドメイン名)になってます。 FrontDoorのドメイン名でアクセスしてるのに!
https://login.microsoftonline.com/****/oauth2/v2.0/authorize?response_type= code+id_token&redirect_uri=https%3A%2F%2F****.azurewebsites.net%2F.auth %2Flogin%2Faad%2Fcallback&*****
EasyAuthの場合、WebAppsが設定しています。 OIDCの場合はアプリケーションまたは認証フレームワークが設定しています。 この時、WebAppsやアプリケーションは「自分自身がどういうドメイン名で動 いているか」を知っていて、それをredirect_uriに設定します。 redirect_uri、誰が設定している? Copyright © Alterbooth Inc. All
Rights Reserved. 14
WebAppsは基本的にマルチテナントのSaaSなので、1つのインスタンス上で複 数のアプリが動きます。そして、どのHTTPリクエストをどのアプリにルーティ ングするかはホスト名(HTTP Hostヘッダ)で決定されます。 WebAppsはマルチテナントのSaaS Copyright © Alterbooth Inc. All
Rights Reserved. 15 アプリ1 アプリ2 https://site1.azurewebsites.net/ https://site2.azurewebsites.net/ site1.azurewebsites.netはアプ リ1、site2.azurewebsites.net はアプリ2だな
この時、アプリ1は自身がsite1.azurewebsites.netと認識しているし、アプリ2 は自身がsite2.azurewebsites.netと認識してるので、これをredirect_uriに設 定します。 Copyright © Alterbooth Inc. All Rights Reserved.
16 アプリ1 アプリ2 https://site1.azurewebsites.net/ https://site2.azurewebsites.net/ redirect_uriは自分自身を表 すsite1.azurewebsites.netに しよう redirect_uriは自分自身を表 すsite2.azurewebsites.netに しよう
ここで、WebAppsの前段にFrontDoorが入るとこうなります。 FrontDoorが入るとどうなる? Copyright © Alterbooth Inc. All Rights Reserved. 17
アプリ1 アプリ2 https://site1.azurewebsites.net/ https://site2.azurewebsites.net/ site1.azurewebsites.netはアプ リ1、site2.azurewebsites.net はアプリ2だな https://site1.azurefd.net/ https://site2.azurefd.net/ site1.azurefd.netはsite1.azurewebsites.netのWebAppへ、 site2.azurefd.netはsite2.azurewebsites.netのWebAppへ転 送すればいいな
FrontDoorがあってもアプリ1は自分がsite1.azurewebsites.netだと思っている し、アプリ2は自分がsite2.azurewebsites.netだと思っています。 つまり Copyright © Alterbooth Inc. All Rights Reserved.
18 アプリ1 アプリ2 https://site1.azurewebsites.net/ https://site2.azurewebsites.net/ https://site1.azurefd.net/ https://site2.azurefd.net/ redirect_uriは自分自身を表す site1.azurewebsites.netにしよう redirect_uriは自分自身を表す site2.azurewebsites.netにしよう
特に指定しない場合はアクセスする際にDNSに問い合わせる名前とHostヘッダ は一致しますが、これを変更することもできます。 • DNS上の名前は「これからアクセスするリソースのIPアドレスを取得するた め」に使う • つまりOSI参照モデルで言えばL3 • HostヘッダはWebサーバ(WebApps)やリバースプロキシー(FrontDoor)に、 「これからどういうWebリソースにアクセスしたいか」を指示するために使
う • つまりOSI参照モデルで言えばL7 DNS名とHostヘッダ Copyright © Alterbooth Inc. All Rights Reserved. 19
本質的に言えば、WebAppsに「自身のドメイン名がFrontDoorのものと同じで ある」ということを認識させれば良いことになります。 そのためには、3つの方法があります。 どうしたら解決できる? Copyright © Alterbooth Inc. All Rights
Reserved. 20
リバースプロキシのホスト名はX-Forwarded-Hostというヘッダに入っています。 OIDCの場合は、これをredirect_uriに使うようにアプリを改修します。 1.アプリケーションを改修する(OIDCの場合) Copyright © Alterbooth Inc. All Rights Reserved.
21 アプリ1 アプリ2 https://site1.azurewebsites.net/ https://site2.azurewebsites.net/ https://site1.azurefd.net/ https://site2.azurefd.net/ redirect_uriはリバースプ ロキシを表す site1.azurefd.netにしよう redirect_uriはリバースプ ロキシを表す site2.azurefd.netにしよう
EasyAuthの場合はredirect_uriを設定してるのはWebAppsのため、改修はでき ません。WebAppsに「前段にリバースプロキシーがいるよ」ということを教え る必要があります。 2.WebAppsのproxy設定を変える(EasyAuthの場合) Copyright © Alterbooth Inc. All Rights
Reserved. 22 アプリ1 アプリ2 https://site1.azurewebsites.net/ https://site2.azurewebsites.net/ https://site1.azurefd.net/ https://site2.azurefd.net/ リバースプロキシーがいるから redirect_uriはリバースプロキシを 表すsite1.azurefd.netにしよう リバースプロキシーがいるから redirect_uriはリバースプロキシ を表すsite2.azurefd.netにしよう
Copyright © Alterbooth Inc. All Rights Reserved. 23 portalから設定できないので、リソースエクスプローラー (https://resources.azure.com/)
からアクセスします。 該当のリソースのconfig>authSettingsV2にアクセスします。
Copyright © Alterbooth Inc. All Rights Reserved. 24 forwardProxyという設定を「“convention”:“NoProxy”」から 「“convention”:“Standard”」に変えます。
FrontDoorとWebAppsに、同じカスタムドメインを設定します 3.カスタムドメインを設定する Copyright © Alterbooth Inc. All Rights Reserved. 25
アプリ1 アプリ2 https://example.com/ https://example.net/ example.comはアプリ1 のカスタムドメインだ からそちらへ example.netはアプリ2 のカスタムドメイン だからそちらへ site1.azurewebsites.netに Hostヘッダexample.comでアクセス site2.azurewebsites.netに Hostヘッダexample.netでアクセス
FrontDoorとWebAppsに、同じカスタムドメインを設定します 3.カスタムドメインを設定する Copyright © Alterbooth Inc. All Rights Reserved. 26
アプリ1 アプリ2 https://example.com/ https://example.net/ redirect_uriは自分自身 を表すexample.comに しよう redirect_uriは自分自 身を表すexample.net にしよう site1.azurewebsites.netに Hostヘッダexample.comでアクセス site2.azurewebsites.netに Hostヘッダexample.netでアクセス
• example.comやexample.netといったカスタムドメインのDNS設定は、 FrontDoorに向けます • バックエンド設定で、WebAppsに接続する際のHostヘッダをカスタムドメイ ンにします • 接続先ホスト名はWebAppsのドメイン名のままにします • WebAppsにカスタムドメインを設定する際はCNAMEの設定でのドメイン認
証が必要なので、順番としてはWebApps→FrontDoorの順でカスタムドメイ ンを設定します • AppService PlanはB1以上が必要です • この方法だと、WebAppsもアプリケーションも自身のホスト名をカスタムド メインと認識します • Hostヘッダがカスタムドメインになるから Copyright © Alterbooth Inc. All Rights Reserved. 27
• App Service(WebApps/Functions)の前段にFrontDoorやApplication Gatewayなどのリバースプロキシを置くときはリダイレクト処理に注意しま しょう • よくあるケースはOIDCやEasyAuthでの認証 • 根本的な問題は「App Serviceが、自身が何というドメイン名で動いていると
認識しているか」 • 解決方法は3つ • アプリを改修する(OIDCの場合) • App Serviceの設定をリソースエクスプローラーで変更する(EasyAuthの場合) • カスタムドメインを使う(万能) 本日の結論 Copyright © Alterbooth Inc. All Rights Reserved. 28
つまらない世界からもっと刺激のある世界へ変化させよう! Copyright © Alterbooth Inc. All Rights Reserved. 29