背景

SHOWROOM関連の自作Chrome拡張ツールでDBデータを取るためにajax通信を行う必要がある。
MAMPテスト環境はhttpのままで、apiは拡張ツールを使用するドメインはSSL化されておりMixed Contentが発生する。
対策としてMAMPの環境をSSL化してDBデータの取得を試みる

実施事項

windows opensslをダウンロード

windows opensslからダウンロード
※Win64 OpenSSL v1.1.1i Lightをダウンロードする
opensslにパスを通す(C:\Program Files\OpenSSL-Win64\bin)

秘密鍵ファイル（server.key）の作成

C:\MAMP\conf\apache に keysフォルダを作成する
C:\MAMP\conf\apacheをカレントディレクトとしコマンドプロンプトで下記を実行する

openssl genrsa 1024 > server.key

証明書署名要求(CSR)の作成

コマンドプロンプトで下記を実行する

openssl req -new -key server.key > server.csr

SSL サーバ証明書の作成

コマンドプロンプトで下記を実行する

openssl x509 -req -days 3650 -signkey server.key < server.csr > server.crt

httpd-ssl.conf 作成

MAMPは"C:\MAMP\bin\apache\conf\original\extra"にhttpd-ssl.confが存在するので"C:\MAMP\conf\apache\extra"にコピーする

httpd.confでhttpd-ssl.confをインクルードする

# Secure (SSL/TLS) connections
Include "C:\MAMP\conf\apache\extra\httpd-ssl.conf"

httpd-ssl.confの設定

#SSLSessionCache        "shmcb:/Apache22/logs/ssl_scache(512000)"
SSLSessionCache        "shmcb:c:\mamp\logs\ssl_scache(512000)"
------------------------------中略--------------------------------
# DocumentRoot "/Apache22/htdocs"
# ServerName www.example.com:443
# ServerAdmin admin@example.com
# ErrorLog "/Apache22/logs/error.log"
# TransferLog "/Apache22/logs/access.log"
DocumentRoot "c:\MAMP\htdocs"
ServerName local-set-tsuko.com
ServerAdmin admin@local-set-tsuko.com
ErrorLog "c:\mamp\logs\ssl_error.log"
TransferLog "c:\mamp\logs\ssl_access.log"
------------------------------中略--------------------------------
# SSLCertificateFile "/Apache22/conf/server.crt"
SSLCertificateFile "C:\MAMP\conf\apache\keys\server.crt"
------------------------------中略--------------------------------
# SSLCertificateKeyFile "/Apache22/conf/server.key"
SSLCertificateKeyFile "C:\MAMP\conf\apache\keys\server.key"
------------------------------中略--------------------------------
# <Directory "/Apache22/cgi-bin">
#     SSLOptions +StdEnvVars
# </Directory>
<Directory "C:\MAMP\cgi-bin">
    SSLOptions +StdEnvVars
</Directory>
------------------------------中略--------------------------------
#CustomLog "/Apache22/logs/ssl_request.log" \
CustomLog "c:\mamp\logs\ssl_request.log" \
          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
-----------------------------以下略--------------------------------

httpd-vhosts.confのバーチャルホスト設定

# <VirtualHost *:80>
#     DocumentRoot "C:\MAMP\htdocs\set_tsuko"
#     ServerName local-set-tsuko.com
#     <Directory "C:\MAMP\htdocs\set_tsuko">
#         AllowOverride all
#     </Directory>
# </VirtualHost>

<VirtualHost *:443>
    DocumentRoot "C:\MAMP\htdocs\set_tsuko"
    ServerName local-set-tsuko.com
    SSLEngine on
    SSLCertificateFile "C:\MAMP\conf\apache\keys\server.crt"
    SSLCertificateKeyFile "C:\MAMP\conf\apache\keys\server.key"
    <Directory "C:\MAMP\htdocs\set_tsuko">
        AllowOverride all
    </Directory>
</VirtualHost>

local-set-tsuko.comの安全でないコンテンツを許可するに設定する

証明書がオレオレ証明書なので上記を実施する
ブラウザの『サイトの設定』で設定する

結果

保護されていない通信と表示されるが、Mixed Contentの発生はなくなり目的のajax通信が可能となった

参考記事

Mac で MAMP に SSL（https://）を設定を参考に
httpdの設定（ssl.conf）※httpd-ssl.confの設定

MAMPにSSLを設定する

背景