2022年8月30日

ローカル環境でもHTTPS接続する理由と方法

UI開発者佐竹

Googleから2014年に「HTTPS everywhere（常時SSL化）」が提唱された後、HTTPS接続の重要性の認識が広がりました。2018年にHTTP接続のサイトに対して「この接続ではプライバシーが保護されていません」といった警告を表示する決定がなされた時には、多くのWebサイトでSSL化対応が行われてきました。

しかし、本番環境やステージング環境のSSL化は行っていても、ローカル環境をブラウザで確認する時に、常時 http://localhost のようなHTTP接続を行ってはいませんか？ http://localhost は、基本的にHTTPS接続と同じように動作しますが、場合によって同じように動作しないこともあります。

今回は、ローカル環境でHTTPS接続が必要になるケースと、その対応方法について紹介します。

ローカル環境でHTTPS接続が必要になるケース

ローカル環境でHTTPS接続する目的は、本番の環境に合わせることで本番環境だけで予期しない問題が発生するリスクを減らすことにあります。そのため、次のような場合には http://localhost ではなくHTTPS接続する必要があります。

安全なCookieを設定する
混在コンテンツをデバッグする
HTTP/2以降を使用する
カスタムホスト名を使用する

安全なCookieを設定する

Cookieの設定で Secure 属性を付与するとHTTPS接続の場合にのみリクエストをサーバーに送信します。

Secure 属性は SameSite 属性の属性値に none を指定した時、クッキー名の接頭辞に __Secure- や __Host- を指定した時に一緒に設定する必要があります。

混在コンテンツをデバッグする

混在コンテンツの場合、HTTPS接続では HTTPベースの画像や動画、CDNライブラリなどの読み込みがブロックされますが、 http://localhost ではブラウザによってはブロックされないことがあります。このことから混在コンテンツで本番に近い動作を確認するには http://localhost よりHTTPS接続の方が有効です。

また昨年からChromeでは「HTTPS優先モード」、Firefoxでは「HTTPS-Onlyモード」という設定があります。

Chrome HTTPS優先モードの設定： 設定＞プライバシーとセキュリティ＞セキュリティ＞常に安全な接続を使用する
Firefox HTTPS-Onlyモードの設定： 設定＞プライバシーとセキュリティ＞ HTTPS-Onlyモード

この設定を有効にすると完全に安全な接続を確立しようとします。

そのためHTTPS接続であっても、例えばHTTPで記載されたリンク（SSL未設定サーバーへのリンク）にアクセスするとHTTPからHTTPSのパスに自動で切り替わり、アクセスできないということもあります。

これは制作者の意図した振る舞いではないかもしれませんが、ブラウザによる盗聴や中間者攻撃からユーザーを守るための設定です。可能であれば、ドメイン管理者に連絡してSSLの設定を依頼してみるか、他に代用できるものがないか検討してみてください。

各ブラウザのBlogに以下の記述があるので、今後、設定を有効にした時の振る舞いがデフォルトになりそうです。

Chromium Blogより引用

Based on ecosystem feedback, we'll explore making HTTPS-First mode the default for all users in the future. Mozilla has also shared their intent to make HTTPS-only mode the future of web browsing in Firefox.
Mozilla Security Blogより引用

Once HTTPS becomes even more widely supported by websites than it is today, we expect it will be possible for web browsers to deprecate HTTP connections and require HTTPS for all websites. In summary, HTTPS-Only Mode is the future of web browsing!

HTTP/2以降を使用する

HTTP/2以降で http://localhost はサポートされていないため、ロードパフォーマンスのようなHTTP/2以降に特化した挙動をテスト・再現するにはHTTPS接続する必要があります。

カスタムホスト名を使用する

hostsファイルを編集し、カスタムホスト名を追加してHTTP接続を行った場合は、 http://localhost と違いローカル環境であってもHTTPS接続のような動作はしません。

ローカル環境でカスタムホスト名を使用してHTTPS接続する方法

サーバー証明書を発行し、XAMPPやBrowsersyncでHTTPS接続する方法を紹介します。

動作環境

動作環境は以下です。

OS：Windows10
ブラウザ：Chrome 104、Firefox 104
XAMPP 3.3.0
Browsersync 2.27.9
mkcert 1.4.4

サーバー証明書の発行

ローカル環境でカスタムホスト名を使用してHTTPS接続するには、認証局（CA）によって署名されたサーバー証明書が必要です。サーバー証明書の発行にはmkcertを使用します。

1.mkcertのインストール

Windowsの場合はChocolateyを使用して、次のようにコマンドを実行します。

choco install mkcert

OSごとのmkcertのインストール方法はGitHubのmkcertのページを参照ください。

2.証明局（CA）にmkcertを追加

次のコマンドを実行します。

mkcert -install

これにより認証局が生成されます。mkcertで生成された認証局は使用しているデバイス単位で信頼されるため、ローカル環境ごとに認証局を生成する必要はありません。

Firefoxの場合は、合わせて次の設定を行います。

ブラウザのアドレスバーに「about:config」を入力し、security.enterprise_roots.enabled の設定値を true にする

3.サーバー証明書と秘密鍵を生成

カスタムホスト名を server.name としたい場合、次のコマンドを実行します。

mkcert server.name

server.name.pem ファイル（サーバー証明書）と server.name-key.pem ファイル（秘密鍵）が生成されます。

以降、カスタムホスト名を server.name として説明します。対応時はカスタムホスト名を適宜、読み替えてご使用ください。

ローカル環境を複数作成する場合は、環境ごとにコマンドを実行します。以降、ローカル環境を複数作成する場合のカスタムホスト名を server.name2 や server.name3 とします。

mkcert server.name2
mkcert server.name3

4.サーバー証明書と秘密鍵を配置

XAMPPの場合、3.の手順で生成されたファイルをそれぞれ以下のように配置します。

C:\xampp\apache\conf\ssl.crt\ 配下に server.name.pem ファイルを配置
C:\xampp\apache\conf\ssl.key\ 配下に server.name-key.pem ファイルを配置

Browsersyncの場合、3.の手順で生成された2つのファイルを開発環境のルートディレクトリに配置します。

XAMPPによるHTTPS接続

PHPの設定

設定ファイル： C:\xampp\php\php.ini

対象項目：

extension=php_openssl.dll

対象項目がコメントアウトされていたらコメントアウトを外し、OpenSSLを有効にします。

hostsの設定

設定ファイル： C:\Windows\System32\drivers\etc\hosts

以下のように項目を追加します。 hostsは管理者権限で保存します。

127.0.0.1 server.name

ローカル環境を複数作成する場合は、以下のように項目を追加します。

127.0.0.1 server.name
127.0.0.1 server.name2
127.0.0.1 server.name3

Apacheの設定

設定ファイル： C:\xampp\apache\conf\extra\httpd-vhosts.conf

以下のように項目を追加します。

<VirtualHost *:443>
    DocumentRoot "C:\example\devPassRoot"
    ServerName server.name
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.name.pem"
    SSLCertificateKeyFile "conf/ssl.key/server.name-key.pem"
</VirtualHost>

DocumentRootにローカル環境のパスを設定
SSLCertificateFileにサーバー証明書の発行で発行したサーバー証明書を設定
SSLCertificateKeyFileにサーバー証明書の発行で発行した秘密鍵を設定

ローカル環境を複数作成する場合は、以下のように項目を追加します。

<VirtualHost *:443>
    DocumentRoot "C:\example\devPassRoot"
    ServerName server.name
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.name.pem"
    SSLCertificateKeyFile "conf/ssl.key/server.name-key.pem"
</VirtualHost>

<VirtualHost *:443>
    DocumentRoot "C:\example\devPassRoot"
    ServerName server.name2
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.name2.pem"
    SSLCertificateKeyFile "conf/ssl.key/server.name2-key.pem"
</VirtualHost>

<VirtualHost *:443>
    DocumentRoot "C:\example\devPassRoot"
    ServerName server.name3
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.name3.pem"
    SSLCertificateKeyFile "conf/ssl.key/server.name3-key.pem"
</VirtualHost>

ブラウザで表示確認

ここまで設定したら、XAMPPを再起動します。

ブラウザのアドレスバーに https://server.name/ を入力し、表示確認を行います。

BrowsersyncによるHTTPS接続

npmのBrowsersyncを使用している場合は、以下のようにオプションを設定します。

browserSync.init({
    https: {
        key: 'server.name-key.pem',
        cert: 'server.name.pem'
    },
    host: 'server.name',
});

Browsersyncのスクリプトを実行するとブラウザが起動し、ローカル環境が https://server.name/ で表示されます。

その他の設定や使用方法などはBrowsersyncのDocumentationを参考ください。

まとめ

この記事ではXAMPPとBrowsersyncでHTTPS接続する方法を取り上げました。ローカル環境の作り方はいろいろあるので、参考になった部分やならなかった部分があったかと思いますが、もしローカル環境でHTTPS接続する必要がある場合にはそれぞれの環境にあったHTTPS接続の方法を検討してみてください。

2022年の記事一覧に戻る