はじめに

・補足：
この記事で紹介している手順は、私自身はまだすべて実施していません。状況に応じて適切な方法を選んで試してみてください。

Google ChromeでローカルのHTMLファイルを開こうとした際に「サイトが安全に接続できません」というエラーが表示されることがあります。

この問題は、Chromeのセキュリティ設定や拡張機能の影響によるものです。本記事では、その解決策を詳しく解説します。

書こうと思ったきっかけ

筆者自身がVS CodeのエクスプローラーからGoogle ChromeにHTMLファイルをドラッグ＆ドロップした際にこの問題に直面しました。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

同じように困っている方がいるのではと思い、対処方法をまとめました。

Chromeはセキュリティ上の理由で、ローカルファイル (file://) のスクリプトやリソースの読み込みをブロックすることがあります。

その場合、Chromeの起動オプションを変更することで解決できるかもしれません...（未実施）。

以下のコマンドを実行してChromeを起動する。

Windows の場合

chrome.exe --allow-file-access-from-files

Mac の場合

open -a "Google Chrome" --args --allow-file-access-from-files

Linux の場合

google-chrome --allow-file-access-from-files

セキュリティ系の拡張機能（例: Adblock, Privacy Badger など）がローカルファイルの読み込みをブロックしている可能性があります。

ローカルのHTMLファイルが https:// で開こうとして失敗している場合、以下の手順で試してください。

Chromeのセキュリティ制限を回避するために、ローカルサーバーを立てて http://localhost から開くのが最も確実な方法です。

VS Code の Live Server 拡張機能を使う

または、手動でPythonの簡易サーバーを起動することもできます。

Python 3 の場合

python -m http.server 8000

その後、ブラウザで http://localhost:8000/ にアクセス。

以上の方法を試してみて、うまくいかなかったらエラーメッセージなど詳しく調査してみてください！