AWS SSO 向けの Chrome 拡張機能を作ったお話
Akihiro YAGASAKI3 min readこんにちは。矢ヶ崎です。
AWS Single Sign-On (AWS SSO) って便利ですよね。AWS で複数アカウントを扱う時には、AWS Organizations を使って管理することがよくあるかと思いますが、ログインをどう統合するのか？ってなかなか頭を悩ませる場合があるかと思います。AWS SSO を使うと、ADだIdPだSAMLだとか、なんやかんや難しいことを考えないでも簡単にログインを統合することができます(もちろんちゃんと考えてもっと複雑な認証統合にも使うことができます)。なので、弊社でも便利に使わせていただいております！
いや〜これは便利！とか思いつつも、現時点でちょっと足りないと感じる部分ももちろんあります。
それは、ここ！
AWS コンソールのヘッダ部分です！
簡単にログインできるのは良いのですが、いまどのアカウントを操作しているのか、パッと見でわかりません。。。現在のロールとログインユーザはわかるのですが、「どのアカウント」を操作しているのかがパッとわからないのです！思い込みが激しめのぼくには、これはなかなか危険です。開発アカウントであれこれしているつもりが、実は本番アカウントだった！とかだと事故が起こってしまいます。
そこで、こんな表示になるといいな〜と思いました。
「あ〜 SSO でログイン中なんだな〜。どのアカウントにどんなロールで入ってるんだな〜。ヘッダが赤めになっているっていうことは、本番アカウントだから気をつけないとな〜。」
っていう感じでわかるといいな！と思いました。そこで、今回は Chrome 拡張機能で解決することにしました。
ダウンロードはこちらから：
しかし、「Chrome 拡張機能で大切な AWS コンソールの情報を取られたり操作されたりするのはこわい！だから、こんな得体のしれない拡張機能入れたくない！」っていうのがあるかと思います。
そんな方は、以下にソースコードがありますので、 Clone して、中身を確認して、Chrome の開発者モードで使ってもらえれば得体がわかる状態で安心してお使いいただけます！
yaggytter強い権限を要求してくる得体のしれない Chrome 拡張機能はちゃんと確認してから使いましょう！ということです。
見ていただくとわかりますが、中身はめっちゃ単純です。
・AWS SSO のアプリケーション一覧ページ（AWS アカウントにログインするページ）から DOM を解析して、クリックされた部分の情報をブラウザに記憶します。
content.js で解析をし、 background.js で記憶します
・AWS コンソールにページでは、右上のアカウント情報の部分を、記憶したものをベースに書き換えます。
・もしアカウント名（AWS SSOでつけた名前）に 'Production' が含まれていたら本番アカウントと認識して、ヘッダの色を赤めにします
ただこれだけです！
Chrome 拡張機能は、エンジニアにとってはとっても単純で簡単に作成することができるかと思います。もし、みなさんが大好きなWebサービスやWebページがあって、大好きなんだけどちょっとだけ物足りないな〜、っていう場合には、サービス提供元に要望をフィードバックするとともに、サクッと Chrome 拡張機能を作って自分で便利にしちゃうっていうのもありますよ！個人的にはおすすめですよ！っていうお話でした。
（もちろん、 Firefox 拡張機能など、他のブラウザでも同様です）
こちらからは以上です。