`aws sso login` をブラウザ側JavaScriptだけで実現しようと10時間格闘した結果、セキュリティを落とさず達成するのは無理だとわかった話

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

`aws sso login` 相当の処理をブラウザつまりクライアントサイドのコードのみで実装しようとしているんだけど、これはだめだ。AWS SSOというか認証周りややこしすぎる。 AWSがOIDCへ寄せてくれたら圧倒的に簡単なんだろうけど、独自ロジックなので自分で理解しないといけないのが辛い。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

docs.aws.amazon.com/AWSJavaScriptS… > This credential provider relies on the AWS CLI to log into an AWS SSO session. Here's a brief walk-through: 分かりづらいんだけど、javascript sdkはaws cliに依存するよ？って書いてある。同じく分かりづらいけど、工程1がcliでのログイン過程だと思う。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

ただ、じゃあ技術的に不可能なのかというと当然中身の実装はAPIなのでできるし、 docs.aws.amazon.com/ja_jp/sdk-for-… を見ると.NETのSDKでは公式にその機能を実装しているように見える。 なので、いらない "配慮" をしてあえて実装していないんじゃないかと思う。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

ドキュメント読んだ感じ、javascript aws sdkの推奨の手段はcognitoを使った権限のproxyなんだけど、AWSのAPIをブラウザから叩けばいいのにcognitoなり噛ませないといけないのは馬鹿げている気がしてやりたくない。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

今、athena用のアプリケーションを作りたくてaws ssoの認証へdeep diveしているんだけど、かけている比率では後者が前者を上回り始めた。 こういうの、楽し言っちゃ楽しいしdクヌースがthe art of programming 書くためにtex作ったみたいな話もあるんだけど、まあ趣味プロだから許されている感じ。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

github.com/aws/aws-sdk-js… ここ以外にv3 sdkでsso credentialsの話題がないことを見るに、どうやら議論もされていない、気がする。 .NETのSDKを見れば実装方法はわかるから、それを参考に自己実装するか？

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

pkg.go.dev/github.com/aws… > このパッケージのプロバイダーは、AWS SSO ログイン フローを開始または実行しません。SDK プロバイダーは、AWS CLI で「aws sso login」コマンドまたはその他のメカニズムを使用して SSO ログインフローをすでに実行している ことを想定しています。 そうだよな。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

javascriptだけじゃなくて、goもだめか。cliに依存していない.NET SDKが特別なだけの気がしてきた。.NETは外部コマンドの実行が難しいからかな。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

boto3.amazonaws.com/v1/documentati… これを見るとboto3もaws cliなしではaws sso loginできない雰囲気があるが、 repost.aws/questions/QUuC… これを読むに、AWSの中の人が行ける、と回答している。しかも方法まで書かれていて、SSO-OIDC APIを使えばいいと。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

SSO-OIDCは一度どこかで見かけたけど、AWS SSO LOGINでは使えないのだろうと判断して切っていた(AWS IAMをIdPとするSSOアプリケーション用だろうと思っていた)。 これを手がかりにもうちょっと調べてみる。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

dev.to/aws-builders/d… を参考に自分でコードを書いてみてわかった。 ブラウザサイドでのaws sso loginをやっていないの、配慮とかではなくcorsの制限のせいだ。 それはbrowserで動く関数を作らわないわけだ。使えないからね。 pic.twitter.com/LPXvBwcBuk

拡大

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

解決策としては、 1. そこだけAPI(サーバサイド実装)にしてしまう 2. alias server的なproxyを建てる 2は docs.localstack.cloud/user-guide/int… を参考にドメイン変えれば行けそうな気はするけど、証明書周りが怪しい。あとドメイン名の中のリージョン文字列をどうするかというのがある。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

1は絶対にできる。 できるが、ここまでSSGへこだわっていたのにサーバサイドで実装するのか・・・。 READMEへSSGかつCSPでAWSドメイン以外許可していないからcredentialsの盗聴はほぼ不可能って書こうとしていたんだけど、それが破れてしまう。 辛い。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

気になってAWSのどのAPIはcors制約があるのか調べてみたけど、athenaのlistDataCatalogsは `Access-Control-Allow-Origin:*` になっている。一方でaws sso oidc registerはないらしい。 docs.aws.amazon.com/athena/latest/… docs.aws.amazon.com/singlesignon/l… APIドキュメントにはその辺りのことが書いていない。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

github.com/aws/aws-sdk-js… > CORS が有効になっているサービスの場合は、`cors:true` になります。 マジかよ、undocumentedでSDK内で変数として宣言されているだけなのか。 これ見ると半分ぐらいのサービスがサポートしているのかな。 pic.twitter.com/TzVGfgrnOv

拡大

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

corsの有効化なんて10分でできる仕事なので、あえてやっていないという背景がありそう。 この人、開発チームに作業を依頼していると書いているがその後の進捗もなさそうだし、待てば解決するという安易な希望は捨てたほうが良い。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

zenn.dev/sohhakasaka/ar… なるほど、proxyサーバやはりこんな感じか。corsに関わるヘッダーだけ書き換えて再送・転送する感じかな。 github.com/Rob--W/cors-an… これが★も多いので良さそう。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

改めて見ると docs.aws.amazon.com/ja_jp/sdk-for-… このページ最悪すぎる。 このページへたどり着いた人が探している情報は twitter.com/k_bigwheel/sta… なわけなんだけど、1文字もそれが書かれておらず書かれている内容はトンチンカンで一般的なCORSの話がわざわざ図まで書いて説明してある。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

CORS の設定が必要ですか、のセクションも最低すぎる。 ここで一番説明するべきはローカルないしサーバサイドのnodejsで実行した場合はCORSの制約に引っかからないよ、という話なのに、なぜかS3 website hostingとかいう超特殊ケースを引っ張り出してその後もその説明に3スクロール分使ってる。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

このページの情報を書いた人間はあれか、AWS退職間近でAWSに恨みでもあったんか。惑わすだけだからないほうが良いだろこのページ。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

というか、よく考えるとIAMサービスのcorsが有効なのに github.com/aws/aws-sdk-js… identity centerのcorsが無効なの一貫しとらんやろ。 github.com/aws/aws-sdk-js… セキュリティ考えるならまずIAMサービスのcors無効化しろ。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

GitHub 認定資格の一般提供が開始されました - GitHub ブログ github.blog/2024-01-08-git… AWSみたいに資格になったらしい。確かにGitHubかなり複雑で大きな権限のあるサービスになったので必要なタイミングなのかも。 4区内なら3箇所、あとリモートでも行けるっぽい。 pic.twitter.com/Z1O7NCtbVZ

拡大

拡大

拡大

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

ただ、リモートは良し悪しあって。 なれていないとトラブルが置きがち、というのがあるので(まじである。相手が日本人じゃないし基準に緩みがないから、カメラの解像度が低い、部屋が汚くてカンニングの可能性があるとかでリスケになる)、なるべくオンサイトが良いとは思う。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

github.com/aws/aws-sdk-js… 考え直してみたけど、これやっぱだめじゃん。sigv4にホスト名が入っているから基本的にリバースプロキシ戦略が使えない(サイン時に使用するホスト名がリバプロのものなので検証に失敗する)。逆に github.com/awslabs/aws-si… これは認証情報をproxy側で持たせる必要がある。

西田和史(k.bigwheel) 開発基盤EM @k_bigwheel

つまり、先述のコメントではリバプロ使えばいいじゃんって書いてあるけど実はその方法では全く実現できない、ということ。 もはや、WASMでaws cli立ち上げて内部でリクエスト投げて取り出したトークンをlocal storage経由で取り出す、とかしかないか？(できるかしらない)