Cài đặt SSL cho localhost bang OpenSSL trên XAMPP

Khi bạn develop web app trên môi trường local với https, bạn cần tạo một chứng chỉ SSL trên môi trường Local. Thấy có nhiều hướng dẫn trên mạng tôi có check thử nhưng không chạy được. Nay tôi log lại cách tôi làm như sau.

Nếu bạn chưa cài đặt SSL trên loca, có thể bạn sẽ gặp trường hợp như sau:

Các bước cài đặt:

Giả sử tôi cài đặt XAMPP tại C:\xampp\

1. Bước 1

- Trong thư mục C:\xampp\apache\conf (Thư mục có chưa file openssl.cnf), tạo 2 file:
1.1. cert.conf

[ req ]
default_bits        = 2048
default_keyfile     = server-key.pem
distinguished_name  = subject
req_extensions      = req_ext
x509_extensions     = x509_ext
string_mask         = utf8only 
[ subject ]
countryName                 = Country Name (2 letter code)
countryName_default         = VN
stateOrProvinceName         = State or Province Name (full name)
stateOrProvinceName_default = HCM
localityName                = Locality Name (eg, city)

localityName_default        = Ho Chi Minh

organizationName            = Organization Name (eg, company)

organizationName_default    = Example, CNS

commonName                  = Common Name (e.g. server FQDN or YOUR name)

commonName_default          = {your domain}

emailAddress                = Email Address

emailAddress_default        = test@example.com

[ x509_ext ]

subjectKeyIdentifier   = hash

authorityKeyIdentifier = keyid,issuer

basicConstraints       = CA:FALSE

keyUsage               = digitalSignature, keyEncipherment

subjectAltName         = @alternate_names

nsComment              = "OpenSSL Generated Certificate"

[ req_ext ]

subjectKeyIdentifier = hash

basicConstraints     = CA:FALSE

keyUsage             = digitalSignature, keyEncipherment

subjectAltName       = @alternate_names

nsComment            = "OpenSSL Generated Certificate"

[ alternate_names ]

DNS.1       = {your domain}

Thay thế {your domain} băng domain local của bạn. Ex: test.local

1.2. make_SSL.bat

@echo off
set /p domain="Enter Domain: "
set OPENSSL_CONF=openssl.cnf

if not exist .\%domain% mkdir .\%domain%

..\bin\openssl req -config cert.conf -new -sha256 -newkey rsa:2048 -nodes -keyout %domain%\server.key -x509 -days 365 -out %domain%\server.crt

echo.
echo -----
echo The certificate was provided.
echo.
pause

Chạy file make_SSL.bat

Thực mục  {your domain} sẽ được tạo ra. Bạn config local domain của bạn như sau:

<VirtualHost {your domain}:443>


  ServerName {your domain}


  DocumentRoot "{your source code}"


  DirectoryIndex index.php

  

  SSLEngine on


  SSLCertificateFile "conf/{your domain}/server.crt" 


  SSLCertificateKeyFile "conf/{your domain}/server.key" 


  <Directory "{your source code}">


    AllowOverride All


    Require all granted


  </Directory>


</VirtualHost>

2. Bước 2 Khai báo chứng chỉ trên windows

Open file {your domain}/server.crt > Click "Install Certificatr..." > Next , trong cửa sổ mở ra:

Chọn "Trusted Root Certification Authorities"  > OK > Next > Finish

Chờ một lúc sẽ có 1 cửa sổ "Sercurity Warning" > Yes

3. Bước 3
Bước này app dụng cho trình duyệt Chrome
Nhập : chrome://flags/#allow-insecure-localhost
Cấu hình như: