【AWS】Former2をローカルでホストする際のブラウザ(chrome)拡張機能の利用

AWS

概要

既存AWSリソースをスキャンしてCloudFormationテンプレートを生成するOSSツールである”Former2”をローカルでホストする際のブラウザ拡張機能に関するTipsを紹介します。

Former2自体の紹介は、以前ブログ執筆した下記ブログに記載していますのでここでは割愛します。
参考：Former2とは
【AWS】Former2を安全に使うための3つの工夫 - Vの技術ブログ

記載内容

  1. Former2のブラウザ拡張機能
  2. ローカルでホストする際のブラウザ拡張機能の利用
  3. ローカルでホストしたFormer2を複数端末で利用する際のTips

1.Former2のブラウザ拡張機能

Former2の利用形態には、Webサービス(https://former2.com)を利用する形態と、自身のローカル環境にホストして利用する形態があります。 ここでは、まずWebサービスを利用する形態におけるブラウザ拡張機能について紹介します。

Former2で既存リソースをスキャンする際、CORS(Cross-Origin Resource Sharing)が必要なリソース(S3, IAM等)の場合、ブラウザ拡張機能のインストールが必要です。 f:id:VbuiV:20220325221740p:plain 引用：https://former2.com/#section-setup-introduction

Webサービスとして提供されているFormer2を利用する場合は、ブラウザ拡張機能の利用は簡単です。
例えばchromeの場合、chromeウェブストアから追加するだけです。 f:id:VbuiV:20220325221809p:plain 引用：Former2 Helper - Chrome ウェブストア

2.ローカルでホストする際のブラウザ拡張機能の利用

ここではローカルにホストして利用する形態におけるブラウザ拡張機能について紹介します。 ローカルにホストして利用する方法については下記の記事を参照してください。

参考：Former2をdockerでホストする
【AWS】Former2を安全に使うための3つの工夫 - Vの技術ブログ

Former2をローカルにホストして利用する場合の注意点として、公式GitHubには以下の記載があります。

Extension support will also be available if you host on 127.0.0.1 or localhost, otherwise you can modify the extension as needed.
引用:https://github.com/iann0036/former2

上記注意点の通り、Former2を動作させるサーバとアクセス元の端末が異なる場合、chromeウェブストアからではなく、GitHubで公開されているソースからブラウザ拡張機能を読み込む必要があります。

ソースからブラウザ拡張機能を読み込む手順(chrome)

  1. Former2 HelperをGitHubからダウンロードしたうえで、"パッケージ化されていない拡張機能を読み込む"から読み込む。読み込んだ際に生成される"Extension ID"をメモする。 f:id:VbuiV:20220325221831p:plain 参考：Former2 Helper
    GitHub - iann0036/former2-helper: A browser extension to help avoid CORS issues for former2.com

  2. manifest.jsonにURLを追加する。(Former2をホストするサーバと利用端末が異なる場合) f:id:VbuiV:20220325221903p:plain 引用：https://github.com/iann0036/former2/blob/master/HOSTING.md

  3. 先ほどメモしたExtension IDを使ってjs/app.jsを修正する。 f:id:VbuiV:20220325221851p:plain 引用：https://github.com/iann0036/former2/blob/master/HOSTING.md

3.ローカルでホストしたFormer2を複数端末で利用する際のTips

ローカルでホストしたFormer2を複数端末で利用する際、上述の"js/app.jsのExtension IDを修正する"が曲者です。

chromeのExtension IDは読み込んだ際に生成されます。このExtension IDがjs/app.jsに記載したものと異なるとブラウザ拡張機能は利用できません。 これが、一台のサーバにForemr2をホストして複数の端末から利用する場合に問題となります。

f:id:VbuiV:20220325221917p:plain

そこで、複数の端末でExtension IDを揃える方法をここでは紹介します。

パッケージ化されていない拡張機能のExtension IDがどのように生成されているのかを検索した結果、絶対パスのSHAハッシュ値であるという記載を見つけることができました。

参考：アンパックされた拡張機能のChrome拡張機能IDはどのように生成されますか? - CODE Q&A

参考：Chromium Code Search
https://source.chromium.org/chromium/chromium/src/+/main:components/crx_file/id_util.cc

つまり、どの端末でも同じ階層(絶対パス)に格納したうえで拡張機能として登録することで、Extension IDが揃うということになります。 私の手元の複数端末で確認しましたが、絶対パスが同じであれば、常にExtension IDは同じでした。 これで、一つのサーバにFormer2をホストして、複数端末でアクセスする形態にしたとしても、どの端末でもブラウザ拡張機能が利用可能となります。