🔐

VercelでデプロイしたコードでAPI叩いたらHTTPSにしろと言われた話😩

2024/07/03に公開

エラーメッセージ

This request has been blocked; the content must be served over HTTPS.

結論

プライベート認証局が発行した証明書を使うとこのエラーは解決できません。パブリック認証局が発行した証明書を使いましょう。

SSL通信の証明書の流れ

具体的にHTTPS通信の仕組みを知らない人はこちらをお読みください。ある程度知っている人はそのまま読み進めてください。
前提:
皆さんのパソコンには、証明書リストというものがあります。これは、どの認証局から発行されたサイトが安全かを示したリストです。この中には、デフォルトでAmazon(AWS)やGMOがあったりします。

  1. 認証局(パブリック、プライベートどちらも)がサーバー側に対して、サーバー証明書を発行します。
  2. 下の画像のようにみんなは認証局から発行された証明書を使ってSSL通信をします。
    図1:引用サイト
    SSL通信の仕組み

プライベート認証局の問題

仮に、皆さんが自分のパソコンの中にプライベート認証局を作って、証明書を発行できたとしましょう。しかし、上記の前提のところで書いた、証明書リストのところに皆さんが作ったプライベート認証局はありません。(そりゃあ、そうですよね、怪しいですもんw)
そして、証明書リストにない認証局が発行した証明書で通信してきたhttpsに対して、ブラウザは以下のようなエラーを出力します。

cause: Error: unable to verify the first certificate

補足

上記のエラーは"mkcert"を使ってhttpsにしたときに起こったエラーです。ローカルで実行する分には問題あります。なぜなら、自分のパソコンの証明書リストの中に、「自分が作ったプライベート認証局は安全ですからエラー出さないでくださいね」っと記せばいいからです。

参考

https://qiita.com/k_kind/items/b87777efa3d29dcc4467
https://github.com/FiloSottile/mkcert/issues/563

Discussion