FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点

Slide 1

Slide 1 text

FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点株式会社オルターブース木村健一郎

Slide 2

Slide 2 text

自己紹介株式会社オルターブースクラウドソリューション部副部長木村健一郎(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

Slide 3

Slide 3 text

• App Service(WebApps/Functions)の前段にFrontDoorやApplication Gatewayなどのリバースプロキシを置くときはリダイレクト処理に注意しましょう • よくあるケースはOIDCやEasyAuthでの認証 • 根本的な問題は「App Serviceが、自身が何というドメイン名で動いていると認識しているか」 • 解決方法は3つ • アプリを改修する(OIDCの場合) • App Serviceの設定をリソースエクスプローラーで変更する(EasyAuthの場合) • カスタムドメインを使う(万能) 本日の結論 Copyright © Alterbooth Inc. All Rights Reserved. 3

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

サンプルケース Copyright © Alterbooth Inc. All Rights Reserved. 7 よし、社内用のWebアプリできたからWebAppsにデプロイしよう本番に備えてちゃんと前段にはFrontDoor置いてね！ WebAppsへの直接アクセスも禁止して。 FrontDoor置いてWebAppsの設定変えて動作チェックも完了・・っと社員だけがアクセスできるようにEntra IDで認証かけてね！

Slide 8

Slide 8 text

サンプルケース Copyright © Alterbooth Inc. All Rights Reserved. 8 よし、社内用のWebアプリできたからWebAppsにデプロイしよう本番に備えてちゃんと前段にはFrontDoor置いてね！ WebAppsへの直接アクセスも禁止して。 FrontDoor置いてWebAppsの設定変えて動作チェックも完了・・っと社員だけがアクセスできるようにEntra IDで認証かけてね！ EasyAuthでEntra IDの認証使おう・・・よし、設定完了

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Copyright © Alterbooth Inc. All Rights Reserved. 11 EasyAuthやOIDCは、以下のような動作をします。 • 未認証のユーザからアクセスされると、認証サーバにユーザをリダイレクトする • この時、戻って来て欲しいURL(主に自分自身)をredirect_uriというパラメータで渡す • 認証サーバはユーザを認証したら認証結果をつけてredirect_uriにリダイレクトする

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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&*****

Slide 14

Slide 14 text

EasyAuthの場合、WebAppsが設定しています。 OIDCの場合はアプリケーションまたは認証フレームワークが設定しています。この時、WebAppsやアプリケーションは「自分自身がどういうドメイン名で動いているか」を知っていて、それをredirect_uriに設定します。 redirect_uri、誰が設定している？ Copyright © Alterbooth Inc. All Rights Reserved. 14

Slide 15

Slide 15 text

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だな

Slide 16

Slide 16 text

この時、アプリ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にしよう

Slide 17

Slide 17 text

ここで、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へ転送すればいいな

Slide 18

Slide 18 text

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にしよう

Slide 19

Slide 19 text

特に指定しない場合はアクセスする際にDNSに問い合わせる名前とHostヘッダは一致しますが、これを変更することもできます。 • DNS上の名前は「これからアクセスするリソースのIPアドレスを取得するため」に使う • つまりOSI参照モデルで言えばL3 • HostヘッダはWebサーバ(WebApps)やリバースプロキシー(FrontDoor)に、「これからどういうWebリソースにアクセスしたいか」を指示するために使う • つまりOSI参照モデルで言えばL7 DNS名とHostヘッダ Copyright © Alterbooth Inc. All Rights Reserved. 19

Slide 20

Slide 20 text

Slide 21

Slide 21 text

リバースプロキシのホスト名は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にしよう

Slide 22

Slide 22 text

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にしよう

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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でアクセス

Slide 26

Slide 26 text

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でアクセス

Slide 27

Slide 27 text

• 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