Thiết lập, cấu hình SSL miễn phí với CloudFlare và Heroku

Vừa rồi, mình vừa setup chứng chỉ SSL của CloudFlare cho cho website cá nhân host tại Heroku, và chứng chỉ này CloudFlare cấp hoàn toàn miễn phí (https chùa :v).

Mục tiêu cần làm là gì:

  • Điều hướng http://exampledomain.com về https://exampledomain.com
  • Điều hướng http://www.exampledomain.com về https://www.exampledomain.com
  • Điều hướng https://exampledomain.com về https://www.exampledomain.com
  • https://www.exampledomain.com chạy ngon lành!

Ở post này mình sẽ chia sẽ cách làm chi tiết, nhưng trước tiên ta cùng xem lại khái niệm đã.

Các khái niệm

  • HTTP (HyperText Transfer Protocol) là giao thức truyền tải siêu văn bản, dùng để truyền tải dữ liệu dưới dạng văn bản, hình ảnh, video, âm thanh .. từ Web server đến trình duyệt và ngược lại.

  • HTTPS (HyperText Transfer Protocol Secuse) chính là giao thức HTTP nhưng có sử dụng thêm chứng chỉ SSL giúp mã hóa các dữ liệu để tăng tính bảo mật. Nói đơn giản, HTTPS là 1 phiên bản của HTTP nhưng bảo mật và an toàn hơn.

  • SSL là viết tắt của từ Secure Sockets Layer. Đây là một tiêu chuẩn an ninh công nghệ toàn cầu tạo ra một liên kết giữa máy chủ web và trình duyệt. Liên kết này đảm bảo tất cả dữ liệu trao đổi giữa máy chủ web và trình duyệt luôn được bảo mật và an toàn.SSL đảm bảo rằng tất cả các dữ liệu được truyền giữa các máy chủ web và các trình duyệt được mang tính riêng tư, tách rời. SSL là một chuẩn công nghệ được sử dụng bởi hàng triệu trang web trong việc bảo vệ các giao dịch trực tuyến với khách hàng của họ.

Các bước setup

Đăng kí tài khoản CloudFlare

Đăng kí tại : https://www.cloudflare.com/.

Thêm website vào CloudFlare

Cấu hình CNAME

Sau khi CloudFlare scan website của bạn, ở tab DNS, bạn sẽ thấy trường ACNAME. Thực hiện chỉnh sửa các trường này để được như bên dưới:

  • CNAME, exampledomain.com trỏ đến Heroku domain
  • CNAME, www trỏ đến Heroku domain.

CloudFlare hỗ trợ CNAME Flattenning nên việc trỏ cả 2 CNAME về Heroku domain ko có gì phải lăn tăn

Type Name Value TTL
CNAME exampledomain.com is an alias of exampledomain.herokuapp.com Automatic
CNAME www is an alias of exampledomain.herokuapp.com Automatic

Thay đổi giá trị ở mục Value để trỏ đến Heroku domain (vd: exampledomain.herokuapp.com)

Chờ DNS propagation thành công

Khi bạn cập nhật nameservers cho 1 domain, quá trình này thường mất từ 24-48 tiếng để hoàn thành. Giai đoạn này được gọi là DNS propagation. Một khi propagate thành công, ta sẽ có:

  • http://exampledomain.com đã điều hướng về https://exampledomain.com
  • http://www.exampledomain.com đã điều hướng về https://www.exampledomain.com

Muốn test lại, thử dùng lệnh curl, DNS entries sẽ tương tự như bên dưới:

$ curl -I http://exampledomain.com
HTTP/1.1 301 Moved Permanently
...
Location: https://exampledomain.com
Via: 1.1 squid
Server: cloudflare

$ curl -I http://www.exampledomain.com
HTTP/1.1 301 Moved Permanently
...
Location: https://www.exampledomain.com
Via: 1.1 squid
Server: cloudflare

$ curl -I https://exampledomain.com
HTTP/1.1 200 OK
Server: cloudflare
...
Via: 1.1 squid

$ curl -I https://www.exampledomain.com
HTTP/1.1 200 OK
Server: cloudflare
..
Via: 1.1 squid

OK vậy là việc điều hướng đã gần xong. Chỉ còn việc điều hướng từ https://exampledomain.com về https://www.exampledomain.com. Nhưng tại sao lại là www ? Nói chung thì mỗi người có 1 lựa chọn khác nhau, bạn có thể đọc thêm ở đây.

Điều hướng cuối cùng

Để điều hướng http://exampledomain.com về https://www.exampledomain.com, chúng ta cần update nội dung trong tab Page Rule như sau:

Forwards(301) https://exampledomain đến https://www.exampledomain.com

Với setting đó, DNS entries sẽ trông như thế này:

$ curl -I http://exampledomain.com
HTTP/1.1 301 Moved Permanently
...
Location: https://exampledomain.com/
Via: 1.1 vegur
Server: cloudflare

$ curl -I http://www.exampledomain.com
HTTP/1.1 301 Moved Permanently
...
Location: https://www.exampledomain.com/
Via: 1.1 vegur
Server: cloudflare

$ curl -I https://exampledomain.com
HTTP/1.1 301 Moved Permanently
...
Server: cloudflare
Location: https://www.exampledomain.com/

$ curl -I https://www.exampledomain.com
HTTP/1.1 200 OK
...
Server: cloudflare
Via: 1.1 squid

Full SSL

Cuối cùng, vào tab Crypto, chắc chắn rằng bạn đã chọn Full options cho SSL. Muốn biết thêm thông tin chi tiết, bấm vào Help bên cạnh.

Với các bước đơn giản trên, bạn đã đc cấp SSL với 0 đồng. Ngon lành cành đào.

Một số điều cần chú ý

  • Ở file settings production.rb, cần bật enable cho force_ssl:
config.force_ssl = true
  • Với các bạn có dùng server Cloudinary để lưu ảnh, cần add thêm tùy chọn secuse: true vào file cloudinary.yml, vì thông thường defaul là http:
production:
    secure: true
  • exampledomain.com là domain fake để ví dụ, ko phải link có thể truy cập được ✌️