LoginSignup
2
5

More than 1 year has passed since last update.

Chrome/Edgeでlocalhostへhttpsアクセス時に警告表示される動作の回避

Last updated at Posted at 2023-02-11

目的

開発中などにローカルでHTTPサーバーを起動して動作確認することはよくあると思います。
証明書も適当なので、Webブラウザからアクセスすると警告ページが表示されますね。
Google Chrome、または、Chromium ベースのMicrosoft Edge における回避方法をメモしておきます。

確認したバージョン

  • Chrome バージョン: 110.0.5481.78(Official Build) (64 ビット)
  • Microsoft Edge バージョン 110.0.1587.41 (公式ビルド) (64 ビット)

※いずれもWindows11で確認しています

image.png

回避方法1

警告ページで 詳細設定 をクリック、さらに localhostにアクセスする(安全ではありません) をクリックすることで回避できます。
当然ですが、危険の可能性を指摘し、これ以上のブラウジングをやめてもらうための警告ページなので、「ああ、ダメなんだ…」と諦めてしまいそうな表示になっています。
内容をよく読めば危険を理解したうえでアクセスできることが示してあります。

回避方法2

実験的機能設定ページ chrome://flags に、「localhostへのリクエストの場合は無効な証明書を許可する」という、やりたいことそのままの設定がありました。
ただし、flagsの設定は無くなる可能性もあります

Allow invalid certificates for resources loaded from localhost.
Allows requests to localhost over HTTPS even when an invalid certificate is presented. 
#allow-insecure-localhost

下記を開いて該当項目を有効に設定すればOKです。
無効にすれば元の設定になります。簡単ですね。

  • Chrome
    • chrome://flags/#allow-insecure-localhost
  • Edge
    • edge://flags/#allow-insecure-localhost

補足

回避方法1の設定保存場所

回避方法1 を実施した場合、その指示は記憶されます。つまり、一度許可指示すると次は警告ページが表示されません。
毎回表示されるのも面倒なので妥当な挙動とは思いますが、元の設定に戻したい場合はどうすれば良いのでしょうか。

設定ページなどからの操作は見つけられませんでしたが、プロファイルごとの設定ファイルに設定が保持されていることを見つけました。

設定ファイルはWindowsでは通常、下記になると思います。

  • Chrome
    • %LOCALAPPDATA%\Google\Chrome\User Data\Default\Preferences
  • Edge
    • %LOCALAPPDATA%\Microsoft\Edge\User Data\Default\Preferences

※プロファイルを作成している場合は Default 部分が Profile 1 などになります。

ファイルはJSONテキストになっていて、許可したドメインがssl_cert_decisions キー部分に追加されていくようです。
削除対象の設定をエディタなどで削除することで、元の状態を再現することができました。
(ブラウザを終了してから設定ファイルを編集します)

下記は整形してありますが、実際は改行なしのJSONです。

"ssl_cert_decisions": {
  "https://localhost:443,*": {
    "last_modified": "13320488980363510",
    "setting": {
      "cert_exceptions_map": {
        "************************************************": 1
      },
      "decision_expiration_time": "13321093780363497",
      "version": 1
    }
  }
}

もともと何をしようとしていたのか

ローカルでセキュアWebSocket通信を試していたのですが、通信ができず困っていました。
下記のようにエラーになります。

net::ERR_CERT_AUTHORITY_INVALID が共通のエラーコード(?)のようです。
なお、理由は追及していませんが、 Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID という大切な部分が表示されないパターンもあるようでした。

const ws = new WebSocket('wss://localhost:8080');

WebSocket connection to 'wss://localhost:8080/' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

コードでWebSocketした場合は警告ページも表示しようがありませんので対処できず困っていましたが、本記事の回避設定でlocalhost宛てのwssアクセスも許可できました。
WebSocketも HTTP通信ということで、共通の設定を参照するのかなと推察しています。

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5