Lập trình

SSL trên localhost, tại sao và thế nào?

Chúng ta cần SSL kể cả đang lập trình trên Localhost. SSL trên Localhost không khó cấu hình, chỉ 3 phút xong luôn

Cách đây 5 năm, mọi website và API hầu như đã được cập nhật HTTPS làm giao thức chính. Điều này đạt được là do Google đã ép các website nếu muốn tăng điểm SEO thì phải cập nhật HTTPS. Chưa kể là Chrome và Safari sẽ cảnh báo người dùng nếu trang nào không có HTTPS. Giao thức này hay còn gọi là SSL (Secure Socket Layer) lại càng phổ biến hơn nhờ Let’s Encrype, tổ chức chứng chỉ số miễn phí. Vai trò của nó thì ai cũng biết, trong bài viết này mình xin chia sẻ cách cài SSL trên Localhost!

Tại sao chúng ta lại cài SSL trên Localhost?

Lập trình viên muốn cài đặt / lậpt trình trước giao thức này để lường trước kết quả. Như mình thì mình bật HTTP/2 lên để test nên chắc chắn phải có SSL cho dù là đang Dev trên localhost.

Việc cài SSL vô cùng đơn giản, nên mình cũng auto cho nó chạy SSL cho dù ở đâu. Còn trên bản live thì mình sẽ mua một chứng chỉ số của đơn vị nào đó nhét vào. Thế là xong, cấu hình rất nhàn!

Cách tạo file cer và key trên localhost

SSL cần phải có một tổ chức chứng thực. Các bạn cũng thấy cái bảng giá SSL khá chát: tầm 1,2 triệu / năm tùy vào nhà cung cấp. Với các công ty thì chả sao, nhưng rõ ràng với các freelancer hoặc các công ty nhỏ và siêu nhỏ, có vài trăm website bán hàng khác nhau thì đây là con số khủng. Cho nên trong cái phần tự tạo SSL trên localhost thì chúng ta tạm gọi là chứng chỉ số tự ký. Nghĩa là chả ai chứng thực cho bạn. Nhưng như mình nói đó, đây là để mình tự dev để lường trước các vấn đề thôi mà!

Okay và ngay giờ đây là cách tạo file cer và key trên localhost cho Windows và MacOS.

Trên Windows

Sự nhì nhằng của Windows nó sẽ bộc lộ khá nhiều nếu bạn sử dụng cả hai hệ điều hành MacOS và Windows. Thiếu OPENSSL, thiếu GIT, mọi thứ bạn phải cài!

Đầu tiên, bạn cài OpenSSL tại đây: https://www.openssl.org/source/

Hoặc dễ hơn, bạn tải OpenSSL tại đây: https://slproweb.com/products/Win32OpenSSL.html sau đó tìm Win64 OpenSSL v1.1.0j hoặc bản mới hơn!

Hoặc cách khác, các bạn tải Git về cài vào máy, tự nó pack cùng: https://git-scm.com/download/win

Sau khi confirm là mọi thứ đã chạy okay, các bạn tạo ra chứng chỉ số bằng cách gõ lệnh sau đây:

openssl genrsa -des3 -out rootSSL.key 2048
Tạo Private Key trên Windows
Tạo Private Key trên Windows

Lưu ý: Khi hỏi điền pass phrase, các bạn phải dùng ít nhất 6 ký tự trở lên kẻo SSL không có chạy.

Lệnh này để tạo Private key rootSSL.key ! Sau khi tạo key xong thì tạo file certificate bằng lệnh sau:

openssl req -x509 -new -nodes -key rootSSL.key -sha256 -days 1024 -out rootSSL.pem
// sau đó chạy lệnh
openssl x509 -outform pem -in rootCA.pem -out rootSSL.crt

Khi máy hỏi điền các thông tin, các bạn có thể điền tá lả thông tin vào đó được. Ví dụ:

  1. Điền VN cho đất nước
  2. Điền HN cho thông tin của thành phố
  3. Điền tên tổ chức, email tùy bạn định nghĩa vào đó

Điền mật khẩu ở bước tạo Private Key vào. Và đùm, có 2 file hiện ra trong thư mục hiện hành của các bạn! Trong đó có 3 file để xài là rootSSL.keyrootSSL.pem và một file nữa là rootSSL.crt ! Hai file này để cấu hình vào nginx hoặc Apache hoặc Nodejs tùy thuộc vào Server của bạn!

Giờ bạn có 2 file rootSSL.keyrootSSL.pem có thể sử dụng được cho NodeJS Express. Nhưng nếu như các bạn xài với Nginx hoặc Apache thì các bạn dùng lệnh phía dưới nhá!

SSL trên localhost cho NodeJS

Xài code này:

  server = spdy.createServer({
      key: fs.readFileSync(HTTPS_KEY_PEM),
      cert: fs.readFileSync(HTTPS_CERT_PEM),
      passphrase: HTTPS_PASSPHRASE
  }, app).listen(PORT);

Mình dùng SPDY để tạo HTTP/2 cho nó nét. Code trên là NodeJS + Express. Các bạn có thể thay các đường dẫn sao cho phù hợp! Trong đó phần passphrase phải có, nếu các bạn không có hoặc mã quá ngắn thì nó sẽ báo lỗi. Mật khẩu cho file pem nên lớn hơn 6 ký tự.

SSL trên localhost với Nginx/Apache

Tìm file nginx.conf và chỉnh dòng sau đây giống thế này! Thường thì Nginx sẽ để sẵn một file cấu hình SSL.conf để các bạn chỉnh.

server {
     listen       80;
     server_name  client-1.local;
     # New Lines below
     listen 443 ssl;
     ssl on; 
     ssl_certificate f:/LDE/nginx/SSL/rootSSL.crt;
     ssl_certificate_key f:/LDE/nginx/SSL/rootSSL.key;

Nhớ chỉnh đường dẫn đúng dẫn đến file bạn vừa tạo nhá. Sai là không khởi động được nginx lên đâu.

Với Apache, tìm folder conf của nó và thêm vào dòng sau đây trên file config:

<VirtualHost client-1.local>
     DocumentRoot f:/projects/client-1/www/
     ServerName client-1.local
     SSLEngine on
     SSLCertificateFile f:/LDE/nginx/SSL/rootSSL.crt
     SSLCertificateKeyFile f:/LDE/nginx/SSL/rootSSL.key;    
</VirtualHost>

Rồi, restart lại Apache hoặc Nginx, nếu không biết cách restart thì bạn có thể tắt đi mở lại máy tính là xong!

Giờ thì các bạn vào thử localhost. Nó sẽ có cảnh báo bảo mật hiện lên:

Cảnh báo bảo mật của Firefox khi dùng SSL trên localhost
Cảnh báo bảo mật của Firefox khi dùng SSL trên localhost

Bấm Advanced, bấm Accept the Risk and Continue ! Xong! Bạn vào qua https://localhost bình thường.

Trên MacOS

Trên MacOS, bạn mở Terminal lên. Cách mở terminal: Bấm COMMAND + SPACE và gõ Terminal

Sau đó chuyển về folder mà bạn muốn chứa file SSL, như mình thì cứ Root Project mà chơi. Và gõ lệnh sau:

cd /root-project-example
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365

Haha, giờ thì ta được file key.pemcert.pem để dùng! Tùy thuộc vào Localhost các bạn đang dùng phần mềm nào, ví dụ mình dùng MAMP nhưng nhiều bạn lại dùng AMPS hoặc Docker … thì lại phải tùy thuộc vào từng phần mềm mà chui vào đó, cấu hình Apache hoặc Nginx!

Hầu hết thời gian mình lập trình Javascript với Nodejs nên cấu hình vô cùng đơn giản, như code ở phía trên, phần Nodejs!

Khi đã có file tự ký, các bạn lại phải Google một vòng để cấu hình cho web server theo phần mềm ứng dụng mà các bạn đang dùng thôi chứ mình nói chắc tới sáng mất.

Chúc các bạn thành công. Khó khăn gì cứ cô-men nhé!

Thông tin liên quan

Bạn đang xem bài viết SSL trên Localhost tại blog cá nhân của Jam. Còn rất nhiều các bài viết khác tại chuyên mục Lập trình đang được yêu thích.