Tạo HTTPS cho localhost sử dụng mkcert

Ngày nay nhiều tính năng yêu cầu website của bạn phải có HTTPS để có thể hoạt động như Service Workers hoặc một vài payment gateway sẽ không hoạt động nếu website không có HTTPS. Và việc phát triển trên localhost với HTTP có thể gây ra lỗi khi deploy production sử dụng HTTPS.

mkcert là một CLI tool được build bằng Golang giúp bạn giải quyết các vấn đề trên theo cách đơn giản nhất. Nó có thể tạo HTTPS cho bất kì hostname, IP và kể cả localhost.

mkcert is a simple tool for making locally-trusted development certificates. It requires no configuration.

Cài đặt mkcert

Hiện tại mkcert hỗ trợ đa nền tảng như macOS, Linux, Windows. Các bạn có thể coi cách cài đặt cho từng hệ điều hành trên GitHub repo của mkcert

FiloSottile/mkcert

A simple zero-config tool to make locally trusted development certificates with any names you'd like.

  • Star
    17943
  • Fork
    641
  • Issues
    20
  • Updated
    15-03-2019

Nếu bạn dùng macOS thì có thể cài đặt qua Homebrew

brew install mkcert
brew install nss # if you use Firefox

Sử dụng mkcert

Đầu tiên chúng ta cần phải tạo một certificate authority (CA). CA này sẽ được lưu trên máy tính của chúng ta.

$ mkcert -install
Using the local CA at "/Users/thien/Library/Application Support/mkcert" ✨
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

Tiếp theo, ta sẽ tạo certificate cho host thông qua command mkcert hostname.

Bạn có thể tạo certificate cho nhiều host, IP cùng lúc như sau:

mkcert example.com "*.example.org" myapp.dev localhost 127.0.0.1 ::1

Trong bài viết này, mình sẽ áp dụng cho localhost. Vì vậy, lệnh tạo certificate sẽ như sau:

$ mkcert localhost
Using the local CA at "/Users/thien/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

Sau khi câu lệnh chạy xong, bạn sẽ thấy 2 file là localhost.pemlocalhost-key.pem được tạo ra, chúng sẽ nằm tại thư mục mà bạn đang thực hiện command. Trong trường hợp này là thư mục home /Users/thien trên máy mình.

🤔 Vậy có file .pem rồi chúng ta sẽ làm gì để có thể dùng được HTTPS cho localhost?

Điều này còn tùy vào development của bạn. Mình sẽ ví dụ 2 trường hợp đó là sử dụng Apache web server và một web server bằng Node.js

Cài đặt trên Apache

Apache hay Nginx đều hỗ trợ chúng ta cấu hình SSL cerficates. Đối với Apache, các bạn có thể cấu hình như sau:

<VirtualHost localhost:443>
  ...
  SSLEngine on
  SSLCertificateFile "/Users/thien/localhost.pem"
  SSLCertificateKeyFile "/Users/thien/localhost-key.pem"
  ...
</VirtualHost>

Sau khi config, bạn restart lại Apache và kiểm tra kết quả:

Trước

Trước

Sau

Sau

Cài đặt cho Node.js

Chúng ta sẽ tạo một web server đơn giản sử dụng module https. Phần options, các bạn cần require 2 file .pem đã được tạo ở phần trên.

├── certificates
│   ├── localhost-key.pem
│   └── localhost.pem
└── index.js
const https = require('https');
const fs = require('fs');

const options = {
  key: fs.readFileSync('certificates/localhost-key.pem'),
  cert: fs.readFileSync('certificates/localhost.pem')
};

https.createServer(options, (req, res) => {
  res.writeHead(200);
  res.end('hello world\n');
}).listen(8000);

Chúng ta có thể kiểm tra kết quả bằng cách truy cập vào https://localhost:8000

Bạn sẽ thấy dòng chữ 'Issued by: mkcert'

Bạn sẽ thấy dòng chữ 'Issued by: mkcert'

Tham khảo

Tags:

Sửa lần cuối bởi Thien Nguyen vào ngày 08-01-2019: xem commit, bài lỗi? sửa ngay
Cảm ơn các bạn đã đóng góp vào bài viết này:
Duoc Nguyen

Đăng ký nhận email từ 12bit.vn

Để không bao giờ bỏ lỡ bất cứ điều gì hay ho.

Bình luận