毎回無視するボタンを押せばいいんだけどこれも面倒だからエラーが出ないようにしたい
ちゃんとやるなら ドメインに合わせた証明書を自作して信頼されたルート証明機関のところにインポートすればいいんだけどこれが結構面倒
適当なサイトの証明書をダウンロードしてローカルのサーバに設置して hosts を編集してそのサーバへのアクセスを VM とか localhost に向ければ済むような……と思ったけどサーバ側には証明書以外に秘密鍵も必要で秘密鍵はさすがに公開されてないので この方法は無理そう
実在サーバの証明書を使うという方向で考えてみると devtools のローカルオーバーライドが良さそう
以前実装されたときに良さそうと思った割に結局使わず忘れてた
使い方は devtools を開いて Source タブを開く
左側のサイドバーのタブで Overrides を開いて ＋ ボタンを押す
フォルダ選択画面が出るので適当なところにフォルダを作って選択
devtools からそのフォルダへフルアクセスされるって警告が出るので許可
あとはそのフォルダ内にファイルを作れば devtools が開いてるときは本来のレスポンスの代わりに配置したファイルがレスポンスになる
例としてこのブログを使うと 「https://let.blog.jp/foo.html」 は 404 エラーになる
許可したフォルダの中に 「let.blog.jp/foo.html」 というファイルを配置する
<script>
crypto.subtle.digest("SHA-1", new ArrayBuffer()).then(buf => {
alert(buf.byteLength) // 20
})
</script>
配置できたら foo.html の URL にアクセスすると配置した HTML ファイルが開かれ 20 というアラートが表示されるようになる
JavaScript で処理してるハッシュ値計算は https じゃないと使えない機能
これくらいなら適当な https ページで devtools 開いてコンソールにコピペでいいんだけど ちょっと長くなって HTML や JavaScript ファイルを開いて動作確認したいってときには便利
注意するなら localStorage などのデータは本来のサーバのエリアに保存される
オーバーライドしてないページを開いたときの処理で localStorage のデータをサーバに送信するとかあれば ローカル感覚で保存した情報が送信されることはあり得る
あと 本来のページが見えなくなったりもするけど 使うことなさそうなサイトの URL を使ったり そもそも devtools 開かなければいいのでこっちは問題なさそう
この方法だとサーバがいらずにブラウザのみで良くなったという利点はあるけど サーバ側の処理もしたい場合には使えないのが欠点
