Zenn
🔓

ローカル開発環境でHSTSを解除する方法

2024/11/26に公開
Chrome
TLS
SSL
https
hsts
tech

HSTSとは

HSTS (HTTP Strict Transport Security)はブラウザが初めに読み込んだ時にHSTSのヘッダーがあればその有効期限内はHTTPのURLが入力されても、強制的にHTTPSを使うという仕組みです。
そのため、開発環境などで間違って設定してしまうと、HTTPが完全に拒絶され、HTTPSで接続しようとして、開発環境でTLS設定していないと「接続できません！」とブラウザに言われます。
これからの対処法はChromeを前提にしています。

対処法１：待つ

HSTSのヘッダには有効期限を秒単位で書くので、その期限が切れるまで待つという方法です。ただし、一年など長く設定していると待ちきれないので、これ以外の方法を使います。

  1. 開発用のサーバーでHSTSを解除します。
  2. ChromeのDevTools [1] などを起動して、リロードマークを右クリック、「キャッシュの消去とハード再読み込み」を押します。これを忘れるとHSTSのヘッダーまでキャッシュされていて、解除されません。
  3. 有効期限が切れるまで待ちます。
  4. 再読み込みするとアクセスできるようになります。

対処法２：ポートを変える

HSTSはオリジンごとなので、ポートを変えると関係なくなります。ポートを変える前にHSTSを解除するのを忘れないでください。

対処法３：ブラウザの設定で変更する

  1. 開発用のサーバーでHSTSを解除します。
  2. 以下のページを開きます。
chrome://net-internals/#hsts
  1. Delete domain security policiesで、オリジン（例：localhost:8800）を入力、Deleteを押します。
  2. 元のページ（例：localhost:8800）に戻り、Devtoolsを起動し、リロードボタンを右クリックして、「キャッシュの消去とハード再読み込み」を押します。これを忘れるとHSTSのヘッダーまでキャッシュされていて、解除されません。
  3. 再読み込みするとアクセスできるようになります。

トラブルシューティング

ChromeのDevtoolsの Networkタブを見ると解決することが多いです。

確認すること

  • Service workerなどでキャッシュしたものを返していないか
  • ヘッダーにStrict-Transport-Securityはないか
  • httpsにレスポンスとしてリダイレクトされていないか
脚注

  1. Mac: Cmd + Option + I, Win: Ctrl + Shift + I ↩︎

Discussion