結論から
HTTPS は、ブラウザとサーバーの間の通信を暗号化し、途中で読まれたり書き換えられたりしないようにする仕組みです。ブラウザのアドレス欄の「鍵マーク」がそれです。鍵が無い（http://）ページでは、入力したパスワード・カード番号・住所が、同じ Wi-Fi にいる人や途中の機器からそのまま読めます。Google Chrome は2026年10月のバージョン154から、HTTPS でない公開サイトを開く前に警告を出す設定を全員に有効にします。「鍵が無い」は、もはや「普通」ではありません。
この記事で伝えたいのは、この一点だけです。AI で作って Vercel・Netlify・Cloudflare に置いたアプリは、最初から HTTPS です。だから「自分は関係ない」で済む人が多い。ただし、①自分でドメインを付けたとき、②画像や API の URL が `http://` のとき、③Cookie に `Secure` が無いとき、の3か所で「せっかくの鍵」が外れます。 この3つだけ確認してください。
- 何が起きるか：カフェの Wi-Fi で
http://のログイン画面にパスワードを入れると、同じ Wi-Fi の攻撃者がそれを読める。あるいは、通信の途中で広告や偽のフォームを差し込まれる - なぜ：HTTP は「はがき」、HTTPS は「封筒」。はがきは運ぶ人が全員読める。封筒は宛先しか開けられない
- 直す：ホスティングの HTTPS を有効にする（Vercel 等は自動）。全ページを HTTPS に転送する。ページ内の
http://リンク・画像・API をhttps://に直す。Cookie にSecureを付ける。HSTS ヘッダを付ける - 確かめる：自分のアプリを
http://で開いてhttps://に自動で変わるか。開発者ツール → Console に「Mixed Content」の警告が無いか。Cookie にSecureがあるか
動画版（約2分半）は本文の上に埋め込んであります。
① 何が起きるのか：はがきに書いたパスワード
例として、AI で作った予約アプリのログイン画面があるとします。佐藤さんがカフェの Wi-Fi でそれを開き、メールとパスワードを入れました。
もしそのページが http://（鍵なし）なら、ブラウザからサーバーへ送られる内容は暗号化されていません。「メール：minami.sato@…、パスワード：sakura2024」という文字列が、そのまま電波に乗ります。同じ Wi-Fi につないでいる誰かが、無料のツールでそれを拾えます。カフェ側のルーター、その先の回線を運ぶ機器でも同じです。これが「盗聴」です。
もう1つ、「改ざん」があります。通信の途中にいる人が、返ってくるページの中身を書き換える。たとえば、あなたのアプリのログイン画面に、攻撃者の入力欄を差し込む。佐藤さんは本物のアプリだと思って入力しますが、送り先は攻撃者です。かつて一部の公衆 Wi-Fi や回線業者が、HTTP のページに勝手に広告を差し込んでいたのは、これと同じ技術です。
はがきと封筒の違いです。HTTP ははがき。運ぶ人全員が読めるし、書き足せる。HTTPS は封筒。宛先しか開けられず、途中で開けられたら分かる。
ブラウザは、この違いを利用者に見せてきました。Chrome は2018年（バージョン68）から、HTTP のページ全部に「保護されていない通信」と表示しています。そして 2026年10月のバージョン154から、HTTPS でない公開サイトを開く前に警告画面を出す設定（Always Use Secure Connections）を、全ユーザーの初期値にすると発表しています。あなたのアプリが http:// なら、利用者は「本当に開きますか？」という画面を先に見ることになります。
② なぜ「自分は関係ない」で済まないのか：鍵が外れる3か所
AI で作ったアプリを Vercel・Netlify・Cloudflare Pages・Supabase に置いたなら、最初から HTTPS です。証明書（鍵の本体）も自動で発行・更新されます。ここは、本当に何もしなくていい。
問題は、その後に自分で触る3か所です。
① 自分のドメインを付けたとき。 myapp.vercel.app から myapp.jp に変えた。このとき、DNS の設定とホスティング側の「ドメイン追加」の両方が要り、証明書の発行が終わるまで https://myapp.jp は開けません。設定を途中でやめると、http:// だけが開く状態になります。また、http://myapp.jp を https:// に自動転送する設定（多くのホスティングは初期値で有効）が切れていないかも確認します。
② ページの中に `http://` が混ざっているとき。 ページ自体は HTTPS でも、その中で読み込む画像・スクリプト・API の URL が http:// だと、ブラウザは「Mixed Content（混在コンテンツ）」として、その部分をブロックするか、鍵マークを外します。AI が外部の画像 URL や古いサンプルコードを http:// のまま書くことがあります。
③ Cookie に `Secure` が無いとき。 セッション Cookie に Secure 属性が無いと、何かの拍子に http:// でアクセスされたとき、ブラウザは Cookie を平文で送ります（→ セッションハイジャックの記事）。Secure があれば、HTTPS でしか送りません。
AI はどう書くか。 ホスティングの HTTPS は AI が触らないので壊れません。②は、AI が「動くサンプル」を優先して http:// の URL を書くことがあります。③は、AI が Cookie を自前で発行する場合に、Secure を付け忘れることがあります。認証サービス（Supabase Auth など）を使っていれば付いています。
③ どう直すのか：AIに「3か所」を頼む
以下をそのまま AI ツールに貼ってください。
「このプロジェクトについて、①ホスティング（Vercel / Netlify / Cloudflare 等）の設定で、HTTPS が有効で、http:// から https:// への自動転送が有効になっているか確認する手順を示してください。カスタムドメインを使っている場合は、証明書が発行済みかの確認方法も示してください。②ソースコード内の http:// で始まる URL（画像・スクリプト・API・リンク）をすべて列挙し、https:// に変更できるものは変更してください。変更できないものは理由を説明してください。③セッション Cookie に Secure 属性が付いているか確認し、無ければ付けてください。あわせて、Strict-Transport-Security（HSTS）ヘッダを追加する設定を示してください。」
ポイントは、②の「すべて列挙」。Mixed Content は1か所でも鍵が外れます。
④ 直ったかを確かめる：http:// で開いてみる
- ブラウザで `http://自分のドメイン` を開く。自動で
https://に変わり、鍵マークが出れば ◯。http://のまま開いたら ✗ - 鍵マークをクリックして「この接続は保護されています」と出るか。「保護されていない通信」「一部が安全ではありません」なら ✗
- 開発者ツール → Console に
Mixed Contentという警告が無いか。あれば、その URL をhttps://に直す - 開発者ツール → Application → Cookies で、セッション Cookie の
Secureにチェックが入っているか - カスタムドメインを付けた直後は、数分〜数十分待ってから上を確認する（証明書の発行に時間がかかる）
- 分からなければ、AIに「本番 URL に
http://でアクセスしたとき 301 でhttps://に転送されることと、レスポンスに HSTS ヘッダがあることを確認するテストを書いて」
自分で直せないとき：エンジニアに送る一文
「本番サイトで http:// が自動転送されない／Mixed Content の警告が出ます。HTTPS の強制転送、ページ内の http:// の一掃、Cookie の Secure 属性、HSTS の設定をお願いします。」
よくある質問
Vercel に置いています。本当に何もしなくていいですか。
*.vercel.app のままなら、何もしなくていいです。カスタムドメインを付けた場合は、Vercel の Domains 画面で「Valid Configuration」と出ているか、1度だけ確認してください。あとは②③です。
ローカル開発（`localhost`）は `http://` ですが、大丈夫ですか。
大丈夫です。localhost はブラウザが特別扱いしますし、通信がパソコンの外に出ません。Chrome の新しい警告も、ローカルや社内アドレスは対象外です。
HTTPS なら、通信の中身は絶対に安全ですか。
「途中で読まれない・書き換えられない」は保証されます。「サーバーに届いた後」（→ SQL インジェクション、認可）や「ブラウザの中」（→ XSS）は別の話です。HTTPS は「運ぶ途中」だけを守ります。
HSTS とは何ですか。付けないとだめですか。
「このサイトは今後 HTTPS でしか開かないで」とブラウザに覚えさせるヘッダです。最初の1回だけ http:// で開いてしまう隙を無くします。必須ではありませんが、1行なので付けておくのが定石です。
