はじめに
AWS マネジメントコンソールには、ユーザー名や AWS Account ID やクレデンシャルなど、あまり他の方に見られたくない情報が表示されます。技術ブログに投稿するためのスクリーンショットやライブデモなどで、こういった情報を自動的にボカシ・モザイク・マスクを入れることが出来ます。
次のようなユースケースに便利です。
- 技術ブログの執筆のために、手動で AWS Account ID を隠すのが面倒
- デモで画面共有を見せるときに、見られたくない情報をかくしたい
- 動画撮影したいけど、あとからマスク処理するのが面倒
次の URL で、ソラコムのテクノロジー・エバンジェリスト 松下さんが紹介されている方法を参考にしながら、AWS マネジメントコンソールでの動作を確認してみます。
https://blog.soracom.com/ja-jp/2021/08/12/dynamic-masking-webpage-using-css3/
どんな見た目になるのか
例えば、AWS のマネジメントコンソールでは、右上にログインに使った IAM User 名などが表示されます。この動的マスキング機能を使うことで、実際のブラウザ上で自動的にマスクされます。すごい。
それでは手順を確認してみましょう。
Stylus をインストールする
Chrome に次の拡張機能をインストールします。Firefox でも動くらしい。
AWS マネジメントコンソール用 css をインストールする
公開されている GitHub にアクセスします。
https://github.com/ma2shita/stylus-aws-management-console
Getting Started に書かれている、「stylus-aws-management-console.user.css」をクリックします。
Stylus にこの css をインストールする画面に遷移するので、左側のインストールをおします。なお、内容が心配な方は右側に内容が表示されているので確認するとよいでしょう。
CSS のコメントを見ると、いくつかのサービスに対応しているように見えます。
- AWS IoT Core
- AWS Lambda
- Amazon CloudWatch Logs
- Amazon SNS
GitHub で公開されているため、自分の必要なマスクを追加して Pull Request も投げられます。好きなようにカスタマイズしていくのがよいでしょう。
動作確認
これで設定完了です。インストールが非常に簡単でとてもよいですね！それでは、実際に AWS マネジメントコンソールにアクセスしてみると、右上のユーザー名がマスクされています！すごい。
Lambda の ARN がマスキングされています
まとめ
Stylus を使うことで、自動的に AWS のマネジメントコンソールでぼかしが表示されることを確認できました。対応しているサービスでは非常に便利に使っていくことができます。また、より使い方に合わせたぼかしが必要な場合は、簡単にカスタマイズができます。紹介ブログでカスタマイズ方法が記載されているので、次のURL を参考にカスタイマイズしていくのもよいとおもいます。
余談 : 独自 Repository
ソラコム松下さんが所有されている Repository に Pull Request をしておりますが、細かい部分で自分でカスタマイズをやり切りたい部分がでてきたので、Fork して独自追加をしています。こちらも参考にしていただけると良いと思います。