虎の穴開発室ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

Chrome拡張機能でGCPの本番プロジェクトを意識しやすくする

はじめに

虎の穴ラボが開発に携わるクリエイター支援プラットフォーム Fantia では、インフラとしてGoogleCloudPlatform(以下、GCP)を利用しています。

運用フローの中で一部、管理画面を通した操作が必要になる場面があり、注意を配らなくてはならない時があります。

GCPはとても綺麗なUIで構築されていてスッキリしているのですが、その反面、緊張が緩んでしまう側面もあります。

f:id:toranoana-lab:20211105114243p:plain

この様な管理画面な為、「開発環境プロジェクトを開いているつもりが……」など、うっかりミスが何度か心配されてきていました。

また、BigQueryの管理画面は開発環境プロジェクトを開いている状態でも、権限さえあれば本番のデータセットの操作が行えてしまいます。

f:id:toranoana-lab:20211105114824p:plain

気の緩みは重大な事件に繋がりかねないため、なにか簡単に改善出来ることは無いかと考えたところ、Chromeの拡張機能を作れば手軽に改善できるのではないかと思いつきました。

★ Chrome拡張に関して、以前にとらラボブログでも紹介しておりますので、ぜひ参考にしてください。

toranoana-lab.hatenablog.com

今回作る内容

今回のポイントは以下の3つになります。

  • 本番プロジェクトを選択している状態を分かりやすくする
  • 開発用プロジェクトを開いている時に、BigQueryで本番のデータセットを選択している状態を分かりやすくする
  • シングルページアプリケーションでのDOM変更を監視する

ファイル構成も最小限で構築しています。

fantia-safe-gcp
  |--main.js
  `--manifest.json

matches はGCPのコンソール画面のみが対象となるようにします。

{
  "name": "fantia-safe-gcp",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "GCPを安全意識を高めるための拡張",
  "content_scripts": [{
    "matches": [
      "https://console.cloud.google.com/*"
    ],
    "js": [
      "main.js"
    ]
  }]
}

画面移動の検知

GCPはシングルページアプリケーションで作られており、画面のローディングが発生しないため、DOMの状態変化を追う必要があります。

今回の内容では、URLのパラメーターを追っていけば要件を満たすことが出来そうなため、こちらを追っていこうと思います。

DOMの変化を検知する上で便利な MutationObserver というインターフェースが WebAPIに定義されています。

developer.mozilla.org

まず初めに、画面の読み込みに合わせて以下の処理をします。

window.addEventListener("load", function () {
  let beforeHref = document.location.href;

  const URLobserver = new MutationObserver(() => {
    if(beforeHref !== document.location.href){
      // 変更が確認されたら過去のURLを更新する
      beforeHref = document.location.href;
    }
  });

  URLobserver.observe(document, {childList: true, subtree: true});

}, false);

現在のURLを取得しておき、document.location.href の変更が検知されるたびに更新しておくことで、これを繰り返しながらURLの変化に対応していきます。

また、 document.location.href でURLを取得したい為、MutationObserverには location を持つ document 本体を渡します。

GCPの画面をわかりやすく変更する

アプリケーションの管理画面でもよくある事例かと思いますが、本番環境では警告色に変更するといった形がベターかと思いますので、一番目立つ位置にあるヘッダーの色を変更していきます。

const updatePlatformBarColor = () => {
  const platformBar = document.querySelector('.cfc-platform-bar-blue');
  const params = new URLSearchParams(document.location.search);
  const project = params.get('project');
  const p = params.get('p');

  if (project === 'production' || p === 'production') {
    platformBar.style.backgroundColor = 'red';
  } else if (project === 'development' || p === 'development') {
    platformBar.style.backgroundColor = 'green';
  }
}

GCPの管理画面のヘッダーバナーの色は .cfc-platform-bar-blue クラスがあたっているようなので、セレクタを頼りに要素を取得します。

URLからパラメーターを取得し、更に projectp の値を利用します。

p は BigQuery管理画面でデータセット選択時に、そのデータセットを所有するプロジェクトのパラメーターになっているので一緒に取得しておき、判定条件として利用します。

条件を満たしていたら、それぞれ redgreen の背景色を設定するだけの簡単な処理を行います。

最後に、追加した処理を初回とURL変更時に実行するようにして完成となります。

const URLobserver = new MutationObserver(() => {
    if(beforeHref !== document.location.href){
      // 追加
      updatePlatformBarColor();
      beforeHref = document.location.href;
    }
  });


  // 追加
  updatePlatformBarColor();
  URLobserver.observe(document, {childList: true, subtree: true});

結果

f:id:toranoana-lab:20211105114333p:plain

かなり目立つようになりました。

流石にここまでギラギラと表示されていれば、慎重に作業を行うようになりそうです。

f:id:toranoana-lab:20211105114844p:plain

BigQuery管理画面の問題点でもあった、権限があれば開発環境プロジェクトを開いていたとしても、本番プロジェクトのデータセットも操作出来てしまう件についてもカバーすることが出来ました。

f:id:toranoana-lab:20211105114402p:plain

開発環境も緑になるよう変更していたため、意識しやすくなりました。

今後の展望

今回は視覚的な部分を改善しましたが、以下のようなことも実装できるともっと安全に利用できそうです。

  • 操作の多い画面で誤った操作をしないよう保護
  • GCP上で確認が任意となっている画面での確認を強制

P.S.

採用情報

■募集職種
yumenosora.co.jp

カジュアル面談も随時開催中です

■お申し込みはこちら!
news.toranoana.jp

■ToraLab.fmスタートしました!

メンバーによるPodcastを配信中!
是非スキマ時間に聞いて頂けると嬉しいです。
anchor.fm

■Twitterもフォローしてくださいね!

ツイッターでも随時情報発信をしています
twitter.com