Tạo SSL Certificate Authority cho HTTPS trên local

Tram Ho

Trên đây cũng có khá nhiều bài viết làm sao để tạo self-signed SSL cho localhost để có thể test thử HTTPS. Nhưng những cách đó đều có một nhược điểm là khi vào trang sẽ có cảnh báo NET::ERR_CERT_AUTHORITY_INVALID do không ai chứng thực cho SSL của chúng ta. Và chúng ta không thể test những công nghệ mới như PWA hay HTTP2 trên localhost. Hôm nay mình xin giới thiệu một cách tạo SSL “xanh lét lèn lẹt” cho localhost để chúng ta có thể thử các công nghệ như PWA hay HTTP2 hoặc đơn giản là nhìn cho nó oai. Chúng ta cùng bắt đầu thực hiện nhé.

Tạo Certificate Authority

Đầu tiên, chúng ta phải tự trở thành một nhà cung cấp chứng chỉ (giống như các nhà cung cấp chứng chỉ hiện tại như GlobalSign, Comodo, DigiCert, …) và thông báo cho trình duyệt rằng những chứng chỉ được tạo bởi Certificate Authority do chúng ta cung cấp là hợp lệ.

Thực hiện tạo root Certificate Authority (CA) bằng việc đầu tiên là tạo private key:

Sau khi nhập lệnh này, chúng ta thực hiện nhập pass phase để tạo. Kết quả có dạng:

Sau khi đã có private key, chúng ta tạo root certificate:

Khi thực hiện lệnh này, nó sẽ hỏi pass phase của file rootCA.key mà chúng ta vừa nhập ban nãy, bạn hãy nhập chính xác vào và thực hiện điền một số thông tin nó yêu cầu, kết quả có dạng như sau (dữ liệu demo do mình nhập):

Sau khi thực hiện xong, bạn sẽ có được hai files là rootCA.key và rootCA.pem. Từ bây giờ, bạn đã trở thành một Certificate Authority (tất nhiên chỉ là ở local thôi chứ không được như các nhà cung cấp nổi tiếng hiện tại đâu nhé) rồi. Và cũng từ bây giờ, chúng ta có thể tạo SSL cho chính bản thân mình từ hai files trên. Nhưng đến bước này vẫn chưa hẳn là bạn đã được một SSL xanh lét vì các trình duyệt chưa có thông tin về root certificate (chứng chỉ gốc) của chúng ta. Chúng ta sẽ sang bước tiếp theo, nó cực kỳ quan trọng để SSL của chúng ta trở nên xanh lét.

Cài đặt Root Certificate cho các trình duyệt

Với bài viết này, mình sẽ hướng dẫn cho mọi người làm sao để cài đặt root certitficate cho Chrome và FireFox nhé.

Google Chrome

Đầu tiên, mở Google Chrome và truy cập vào đường dẫn sau:chrome://settings/certificates. Sau đó, bạn chọn tab Authorities và nhấp vào IMPORT rồi chọn file rootCA.pem mà chúng ta vừa tạo ban nãy. Sau khi chọn file đó, chúng ta sẽ có màn hình sau:

Bạn chọn tất và bấm OK là xong.

Mozilla Firefox

Đầu tiên, mở Mozilla Firefox lên và truy cập vào đường dẫn sau: about:preferences#privacy. Sau đó, bạn kéo xuống dưới cùng của trang, tại phần Certificates chúng ta nhấp vào View Certificates…, tại popup này, bạn chọn tab Authorities rồi nhấp vào Import… và chọn file rootCA.pem mà chúng ta vừa tạo ban nãy. Sau khi chọn file, chúng ta sẽ có màn hình sau:

.u7f96df033d3b72d04a113b53df678c8a { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u7f96df033d3b72d04a113b53df678c8a:active, .u7f96df033d3b72d04a113b53df678c8a:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u7f96df033d3b72d04a113b53df678c8a { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u7f96df033d3b72d04a113b53df678c8a .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u7f96df033d3b72d04a113b53df678c8a .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u7f96df033d3b72d04a113b53df678c8a:hover .postTitle { text-decoration: underline!important; }

  Mozilla phát hành phiên bản Firefox 59.0.2 để khắc phục lỗi CPU, bộ nhớ và vấn đề về âm thanh trên BSD

Thực hiện chọn tất cả và bấm OK là xong.

Vậy là bây giờ, với hai trình duyệt này (trên máy của chúng ta) thì chúng ta đã được ngồi cùng mâm với các CA lớn trên thế giới rồi đấy!

Giờ chúng ta thử thực hiện tạo HTTPS cho một website ở local để xem kết quả như thế nào nhé.

Tạo HTTPS cho local site

Đầu tiên, chúng ta tạo một private key cho domain local (mình sẽ chọn domain là test-ssl.local):

Sau đó tạo CSR (Certificate Signing Request):

Chúng ta sẽ được hỏi các thông tin như lần trước tạo root CA:

Các bạn có thể tùy nhập các thông tin mà các bạn muốn. Phần A challegen passwordvà An optional company name các bạn có thể bỏ rỗng.

Bước tiếp theo, chúng ta thực hiện tạo một file config để định nghĩa Subject Alternative Name (SAN) cho SSL này. Chúng ta thực hiện tạo file:

Và nhập nội dung bên dưới:

Bạn có thể thêm nhiều DNS.x = <Domain bạn muốn>. Nhưng ở đây mình chỉ sử dụng cho chính domain này thôi. Giờ chúng ta sẽ tạo certificate cho domain:

Khi này chúng ta sẽ được hỏi pass phase của rootCA.pem, bạn nhập pass phase mà bạn đã sử dụng lúc tạo rootCA.key. Vậy là xong, lúc này chúng ta sẽ có các file sau:

  • test-ssl.local.key: Private key
  • test-ssl.local.csr: Certificate Signing Request
  • test-ssl.local.crt: Signed certificate

Vậy là xong. Bây giờ chúng ta có thể thêm HTTPS cho local domain của chúng ta với private key file và certificate file rồi. Mình sẽ thực hiện luôn demo với NginX (mặc định là bạn đã cài đặt NginX rồi).

Cài đặt HTTPS với NginX

Đầu tiên, tạo thư mục để chứa code:

Sau đó, tạo file index.html với nội dung đơn giản để hiển thị:

Nội dung file index.html:

Tiếp theo, chúng ta tạo một virtual host cho NginX:

Nội dung file virtual host:

Sau đó, tạo symlink đến thư mục /etc/nginx/site-enabled để enable virtual host (trên thực tế, bạn có thể tạo file trực tiếp vào thư mục này mà không cần phải tạo vào site-available, nhưng mình khuyến khích các bạn không nên làm trực tiếp như thế. Để lúc mình muốn disable virtual host chỉ cần xóa symlink là xong mà không hề ảnh hưởng đến file virtual host gốc):

.uf20007b29c11207b7b39d6a875bde762 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .uf20007b29c11207b7b39d6a875bde762:active, .uf20007b29c11207b7b39d6a875bde762:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .uf20007b29c11207b7b39d6a875bde762 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .uf20007b29c11207b7b39d6a875bde762 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .uf20007b29c11207b7b39d6a875bde762 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .uf20007b29c11207b7b39d6a875bde762:hover .postTitle { text-decoration: underline!important; }

  Sử dụng goaccess để visualize access log nginx/apache

Khởi động lại NginX:

Tiếp theo, chúng ta sẽ trỏ domain của chúng ta về localhost bằng cách thêm nội dung sau vào file /etc/hosts:

Thêm dòng sau:

Vậy là xong, bây giờ bạn thử truy cập vào https://test-ssl.local để xem kết quả nhá. Chúng ta sẽ được một trang HTTPS hoàn hảo mà không hề bị màn hình warning và cũng không có dấu gạch chéo đỏ lòm ở trên thanh địa chỉ.

Vâng, bạn có nhìn thấy màu xanh lét ở Firefox không ạ? Nhìn ha oai phết nhỉ? Còn với Chrome thì từ phiên bản 69 trở đi nó đã xóa bỏ secure indicator cho các trang HTTPS rồi nên chúng ta không thấy màu xanh đẹp mắt đó!

Lời kết

Từ bây giờ, bạn có thể tự tạo thêm nhiều HTTPS cho local site với root CA mà chúng ta đã tạo (bạn chỉ cần thực hiện từ bước Tạo HTTPS cho local site trở đi). Và bạn có thể thoải mái thử các công nghệ mới như PWA hay HTTP2 mà không cần phải có SSL chính chủ. Bài viết của mình đến đây là kết thúc. Hy vọng nó sẽ có ích cho các bạn trong tương lai không xa!

viblo

.u8ea41a4e1770a7a29714056fbfe48bf1 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u8ea41a4e1770a7a29714056fbfe48bf1:active, .u8ea41a4e1770a7a29714056fbfe48bf1:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u8ea41a4e1770a7a29714056fbfe48bf1 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u8ea41a4e1770a7a29714056fbfe48bf1 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u8ea41a4e1770a7a29714056fbfe48bf1 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u8ea41a4e1770a7a29714056fbfe48bf1:hover .postTitle { text-decoration: underline!important; }

  Bảo mật Web bằng HTTPS khiến việc load trang trở nên chậm hơn

.u20ece84bb5a6aebb6489427959f5735f { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u20ece84bb5a6aebb6489427959f5735f:active, .u20ece84bb5a6aebb6489427959f5735f:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u20ece84bb5a6aebb6489427959f5735f { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u20ece84bb5a6aebb6489427959f5735f .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u20ece84bb5a6aebb6489427959f5735f .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u20ece84bb5a6aebb6489427959f5735f:hover .postTitle { text-decoration: underline!important; }

  HTTPS có thực sự bảo mật?

Chia sẻ bài viết ngay

Nguồn bài viết : viblo .u8ea41a4e1770a7a29714056fbfe48bf1 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u8ea41a4e1770a7a29714056fbfe48bf1:active, .u8ea41a4e1770a7a29714056fbfe48bf1:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u8ea41a4e1770a7a29714056fbfe48bf1 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u8ea41a4e1770a7a29714056fbfe48bf1 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u8ea41a4e1770a7a29714056fbfe48bf1 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u8ea41a4e1770a7a29714056fbfe48bf1:hover .postTitle { text-decoration: underline!important; } Bảo mật Web bằng HTTPS khiến việc load trang trở nên chậm hơn .u20ece84bb5a6aebb6489427959f5735f { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u20ece84bb5a6aebb6489427959f5735f:active, .u20ece84bb5a6aebb6489427959f5735f:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u20ece84bb5a6aebb6489427959f5735f { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u20ece84bb5a6aebb6489427959f5735f .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u20ece84bb5a6aebb6489427959f5735f .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u20ece84bb5a6aebb6489427959f5735f:hover .postTitle { text-decoration: underline!important; } HTTPS có thực sự bảo mật?