HSTS cho bibica.net

Nói thế này, cá nhân mình thấy https hay http nó không giải quyết được cái gì về bảo mật cả, về tốc độ thì dù https có vẻ vời 1001 các tính năng này nọ để quảng cáo, thì thực tế chạy, http vẫn nhanh hơn, ai config https tốt lắm, thì tốc độ nó chỉ gần bằng http thôi, có điều con số này, ở thời điểm hiện tại, nó rất nhỏ, chỉ tính bằng ms (0.001s) thế nên hôm nay rỗi rãi, mình cũng chuyển “lại” bibica.net về dùng https 😀 gọi là chuyển lại, vì thực tế đâu đó hơn 1 năm trước, khi dùng domain bibica.review, mình cũng đã cài thêm HSTS rồi

Chắc nhiều bạn cũng sẽ chưa hình dung HSTS là cái gì, nó khác gì HTTP, HTTPS 😛 Ờ, thế thì đọc tiếp đoạn dưới, cái này mình viết cách đây hơn 1 năm, bỏ bên thèng ngoirungdui.com á :]]

Nói sơ lược, thì cài HTTPS là viết tắt của “Hypertext Transfer Protocol Secure”, nó là một sự kết hợp giữa giao thức HTTP và giao thức bảo mật SSL hay TLS cho phép trao đổi thông tin một cách bảo mật trên Internet. Giao thức HTTPS thường được dùng trong các giao dịch cần tính bảo mật cao, lý thuyết thì 100% các trang thương mại điện tử, shop online này nọ bắt buộc phải cài vào để bảo mật thông tin (ờ, lý thuyết suông thôi hé, chứ cài vào mà ngon thì thiên hạ thái bình rồi)

OK, tiếp theo là HSTS, cái này êm cũng mới biết nó là gì lun, nó bắt nguồn từ thói quen sử dụng, bình thường ta gõ vào trình duyệt địa chỉ một trang web, thông thường hay là domain xong .com .net gì đó, hay kiểu mình thì là gõ domain xong Ctrl + Enter để nó tự thêm www đằng trước và .com đằng sau ? ờ, chứ chẳng ai ngồi gõ https://www.domain.com cả …. vấn đề này thì phía setup hosting và code họ sẽ tự làm, để khi khách gõ http://domain.com nó sẽ tự chuyển về https://domain.com

Vấn đề tiếp theo nảy sinh, là chẳng thèng quản trị hosting hay code nào dám khẳng định 100% là tất cả các lần khách gõ http://domain.com nó sẽ tự chuyển về https://domain.com cả, thế là HSTS ra đời, HSTS là viết tắt của (HTTP Strict Transport Security), một chính sách bảo mật cần thiết để bảo vệ các trang web HTTPS chống lại các cuộc tấn công hạ cấp. HSTS đảm bảo rằng tất cả kết nối tới một website phải được mã hóa bằng giao thức HTTPS, và không bao giờ sử dụng giao thức HTTP 

Để làm được chuyện này, thì bạn phải cài SSL và setup thêm header( ‘Strict-Transport-Security: max-age=63072000; includeSubDomains; preload) xong thì yêu cầu hstspreload.org cấp phép, sau này gõ vào trình duyệt cái domain đó, nó sẽ tự động chuyển sang HTTPS (thời gian nhớ hiện tại là tối thiểu …. 1 năm) và nó cưỡng bức phải chạy HTTPS luôn ? và hiện tại thì 99% các trình duyệt đều đã được hỗ trợ preload rồi

Một ví dụ minh họa là trang paypal.com, một trang đã được hstspreload.org cấp phép

Hành trình bạn truy cập vào paypal.com cũng lằng nhằng, nó sẽ từ http://paypal.com -> https://paypal.com -> https://www.paypal.com ? Để ý chỗ này nhé, vì cái này mà mình sang hẳn thèng HSTS đấy, đó là do domain paypal.com khi gõ vào trình duyệt, trình duyệt tự hiểu là chuyển sang https nên nó chỉ mất có 91 ms là chuyển qua, tiếp theo https://paypal.com nó phải dùng 301 redirect để chuyển sang trang https://www.paypal.com nên mất tới 269 ms ? nghĩa là mất hơn gấp đôi thời gian á ?

Ờ, nói chung là bách con mẹ nó bựa ? người ta sinh ra HSTS là để tăng tính bảo mật mà công dụng chính với mềnh là để load web nhanh thêm được cỡ 100 ms (nói dễ hiểu là 0.1s á) :))

Ok, dưới dây là tuần tự các thao tác, mình ghi lại một phần để nhớ là chính thôi, vì thực sự mỗi lần làm lại cái này là mình cứ quên sạch, lại phải google cả buổi 😛

Đầu tiên là ta phải có HTTPS đã

Cái này thì gần như bạn nào cũng dùng cả rồi, bản thân các script cài đặt VPS mà mình giới thiệu họ cũng đều có tính năng https, tuy thế, hôm nay, thử cho vui thì mình dùng SSL signed by Cloudflare 😀 ah, cho … vui là chính thôi 😛 Còn ai dùng thèng nào cũng được, đa phần mọi người hay dùng FREE từ Letsencrypt cả thôi

Vào phần Crypto -> Origin Certificates -> Create Certificate

Nó sẽ tạo cho bạn 2 phần, private key và origin certificate, origin certificate bắt đầu bằng —–BEGIN CERTIFICATE—– và kết thúc bằng —–END CERTIFICATE—–, private key bắt đầu bằng —–BEGIN PRIVATE KEY—– và kết thúc bằng —–END PRIVATE KEY—–

Dùng 1 phần mềm edit text nào đó, sau đó save private key thành file có phần mở rộng là .key (bibica.net.key), save origin certificate thành file có phần mở rộng là .pem (bibica.net.pem)

Như đây mình làm cho domain bibica.net nó ra 2 file private key và origin certificate như thế

Upload 2 file này lên VPS của bạn, upload vào đâu thì tùy, mình thì upload nó vào /root/ssl, chủ yếu cho dễ nhớ thôi 😀

Mở file Nginx config của domain ra, cụ thể mình đang dùng Centmin Mod thì file config bibica.net nằm ở 

Thêm dòng bên dưới trong server {}

Sau đó chạy tiếp dòng dưới để reload lại nginx, để thay đổi có hiệu lực

2019-04-25_19-02-28

Vào trang quản trị của Cloudflare, tới phần Crypto, bật SSL lên, chọn Full (strict)

Cũng trong phần Crypto, kéo xuống Minimum TLS Version chọn TLS 1.2

Tất cả các option khác tại tab Crypto chọn OFF hết

Đây là bước quan trọng nhất mà hôm trước viết bài mình lại quên mất (tại bình thường mấy cái script auto mặc định khi cài xong https họ để chạy http2 rồi)
Nôm na khi chạy http/2 trình duyệt có thể kéo 1 lúc rất nhiều file, giúp cải thiện tốc độ load xong trang, nên dù phải thông qua thêm 1 bước giải mã này nọ, tốc độ nó vẫn nhanh ngang ngửa với http thuần túy

Mình mới chỉnh lại thì thấy thèng bibica.net đang chạy https đã đạt tốc độ gần như ngang ngửa khi dùng http 😛

Vậy là ta đã có 1 trang chạy https, với điểm A+ từ Qualys (SSL Labs) Test

Lúc này ta cần sửa lại thêm 1 tí vài đoạn code trong Nginx config của domain, để khi khách gõ http://bibica.net hay các link cũ thời còn dùng http, nó tự chuyển sang https://bibica.net

Thêm đoạn code trên vào đầu của file config là được

Sau đó chạy tiếp dòng dưới, reload lại nginx, để thay đổi có hiệu lực

Phần nãy giờ mình nói, thực tế các script auto config VPS họ làm cả rồi hé, nên thực tế bạn nào quan tâm thì đọc cho vui để biết cách dùng SSL từ Cloudflare cũng được 😛

Cài đặt Really Simple SSL

Thường thì khi bạn cài ssl vào rồi, các link từ trang của bạn mặc định sẽ dùng https, tuy thế, một vài plugin cũ hoặc wp-admin … đôi khi nó vẫn chạy trên http, khiến trang của bạn dù cài ssl vẫn không “xanh”, vẫn bị đánh giá là chưa an toàn, bạn có thể sửa tay lại các link cũ vẫn còn dùng http bằng tay hoặc dùng Better Search Replace để sửa trong database, tuy thế đơn giản và hiệu quả nhất là cài plugin Really Simple SSL vào là được

Sản phẩm này có hơn 2 triệu lượt download và active, nên gần như không cần bàn về chất lượng 😀 mình cũng đang dùng, thấy rất ổn

2019-04-25_19-07-23

Setting tổng thể thế là được, nó sẽ tự sửa các link http thành https giúp bạn, đỡ phải sửa bằng tay từng file, từng bài 😀

HTTP/2 push

Một trong những tính năng tuyệt vời của HTTP2 là cách server của bạn có thể đẩy (push) tài sản (js, css …) lên trình duyệt web mà không cần trình duyệt phải thực hiện các yêu cầu riêng cho các tài sản đó, thường thì dùng các gói băng thông thấp (như 2G trên điện thoại), hoặc kết nối độ trễ cao thì sẽ cảm nhận về push rõ ràng hơn, nôm na nếu bạn truy cập bibica.net từ US sẽ thấy nó khá nhanh so với 1 hosting location Singapore 😀

Lý thuyết là thế thôi hé, còn thực tế mình cài hay không cài đều thấy nhanh cả, vì dùng Cloudflare họ đã tự CDN từ location gần bạn nhất rồi

Việc cài đặt HTTP/2 push trên WordPress rất đơn giản, bạn chỉ cần cài plugin HTTP/2 Server Push vào là được, họ làm cả cho bạn rồi

HTTP/2 Server Push hoạt động ổn định với Perfmatters, một số file js, css được mình set chặn hiện ở một số trang, nó không “tự push” ra 😀

Yêu cầu hstspreload.org cấp phép

Bạn cần thêm tiêu đề bên dưới để được cấp phép dùng HSTS 

 Strict-Transport-Security: max-age=63072000; includeSubDomains; preload 

Có thể sửa trong theme đang dùng hoặc sửa trực tiếp trong Nginx config, cá nhân mình nghĩ nên thêm dòng tiêu đề đó từ Nginx vì lỡ bạn có đổi theme hay test code gì đóa xóa nhầm đi cũng phiền, thêm vào nginx thì không sợ vấn đề từ code nữa 😀

Sau đó chạy tiếp dòng dưới để reload lại nginx, để thay đổi có hiệu lực

Tổng thể nếu bạn nào làm theo từ ngãy giờ mình viết, thì cái file nginx config nó sẽ thành như thế này

 

Lúc này kiểm tra tiêu đề trang bibica.net, nó sẽ có đoạn hstspreload yêu cầu 😀

Ra được như thế thì vào hstspreload để yêu cầu cấp phép dùng HSTS thôi

Cơ bản là thế 😛

Ngày cấp phép thì mình không chắc cụ thể lắm, nhớ mang máng là phải chạy ổn định liên tục tầm 3 tháng với tiêu đề Strict-Transport-Security: max-age=63072000; includeSubDomains; preload thì mới được cấp phép, đợt này mình đăng kí lại để thử xem bao lâu thì hstspreload cấp phép lại 😛

Chú ý là một khi đã yêu cầu HSTS thành công rồi thì từ giờ, tất cả các sub domain hay domain của bạn đều phải dùng https hết, ví dụ như bạn tạo thêm forum.bibica.net, blog.bibica.net, hay cdn.bibica.net thì đều phải tạo thêm ssl để chạy https cho nó, vì khi đã được hstspreload cấp phép, là trình duyệt nó sẽ tự preload chuyển hết về https 😀 không có còn phải thông qua các lệnh gì liên quan tới server hay code kiểu 301 redirect nữa nhé, lúc này thì kể cả bạn có xóa VPS, cứ gõ bibica.net vào trình duyệt là nó tự táng sang https://bibica.net hết 😀

Yeb, dùng HSTS thì trình duyệt sử lý vấn đề chuyển trang, lý thuyết là sẽ nhanh hơn khi bạn dùng các code từ php hay nginx … cơ bản ta ăn gian thêm được tí speed 😀

Cá nhân mình nghĩ thế này, đã không dùng HTTPS thì thôi, còn đã dùng là HSTS luôn, đáng công ăn chơi :]]

Update 01/12/2018 😀

Đúng là https toàn trang có rất nhiều vấn đề, phần nào như thế nên hstspreload mới cần thời gian rất lâu để duyệt xét 😀 phần vì họ cần cập nhập vào trình duyệt, phần vì để end user dùng 1 thời gian xem ổn không mới xác định chuyển sang hoàn toàn 😀

Chẳng hạn như hiện tại, mình đã chuyển tiêu đề thành Strict-Transport-Security: max-age=63072000; includeSubDomains; preload trình duyệt tự lưu lại, là sẽ dùng HTTPS cho tất các cả subdomain và domain chính, bởi thế khi mình vào trang email của thèng bibica.net, nó táng ngay lun là … thiếu https =)) trang monitor.bibica.net cũng thế 😛

Ban đầu mình chỉ nhớ là trang chủ và cdn.bibica.net thôi, mà 2 cái này thì thêm https ngay từ khi đăng kí rồi, quên mất là có dùng thêm trang monitor và mail 😀

Update 30/01/2019: Status: bibica.net is currently preloaded.

Cũng không chắc là được chấp nhận từ ngày nào, có điều hôm nay check lại thì domain bibica.net đã được chấp nhận chạy HSTS

2019-04-18_21-09-34

Giờ đây nếu bạn dùng các trình duyệt “đời mới” thì khi gõ domain bibica.net, nó chỉ mất tầm 1-5ms để tự chuyển sang https://bibica.net 😀 status là 307 so với 301 thông thường 😛

Chung quy thì dùng HSTS ta cải thiện được 1 ít về tốc độ (từ 100-200ms -> 1-5ms), tăng thêm tính bảo mật cho site, vì cưỡng bức dùng https 😀

Update 29/03/2019: sửa lại 1 số chỗ trong bài về phần config bên trong tài khoản Cloudflare

Tổng thể làm xong xuôi, trang sẽ chạy H2 và sử dụng Push 😀

Update 25/04/2019: hiện tại mình đã chuyển tất cả các trang dùng https sang dùng SSL từ Cloudflare, khi dùng Letsencrypt mình gặp rất nhiều vấn đề khi renew, và nó làm mất quá nhiều thời gian của mình để ngồi xử lý mấy vấn đề … nhảm xịt như thế 😀 nên thôi, dùng ssl của Cloudflare cho khỏe, cài vào 1 lần nó tự làm từ A -> Z, cứ thế mà xài, sau có chuyển hosting hay gì chỉ việc vác 2 file .key.pem sang là xong

25 thoughts on “HSTS cho bibica.net”

  1. chào bạn mình xem trên mạng thấy họ dùng
    server {
    server_name http://www.example.com;
    rewrite ^(.*) https://example.com$1 permanent;
    }
    để chuyển http sang https

    còn code trên của bạn lại là return 301 https chứ k phải rewrite
    bạn cho mình hỏi 2 cái này có gì khác nhau. và nên dùng cái nào ạ
    thanks

  2. Nếu cài Origin Certificates của CF thì bật luôn SSL Full (Stric) được mà. Bật Full làm gì xấu 🙂
    Full (stric) thì không lo bị lộ IP thật của server nữa. CF có 1 bài cảnh báo nói về vấn đề này rồi. Nhất là mấy web để flexiable :v

    • Full hay Full (strict) thì tùy 😀 chủ yếu dòng in đậm ở sau thôi 😀

      Thực tế bài này khi viết xong sửa chỗ Full và Full (strict) tầm 3-4 lần rồi á :]]

  3. bibica ơi, web mình cứ bị trả về Status Code: 304 chứ không phải 200 như bibica, có ảnh hưởng gì không 🙁

    • Web https://teeqq.com
      Không hiểu sao toàn bị chuyển sang 304.

      P/S: Mình mới check lại thì phát hiện ra thế này.
      1. x-rocket-nginx-serving-static: No thì Status Code sẽ là 200
      2. x-rocket-nginx-serving-static: Yes thì Status Code sẽ là 304

      • Có gì mà không hiểu? Status Code: 304 Not Modified trên SHOP là chuẩn mà (https://www.keycdn.com/support/304-not-modified)

        Lần đầu vào nó sẽ là code 200, sau khi bạn F5, hoặc qua trang khác, xong quay lại lại ban đầu, nó không thấy có sự thay đổi gì, thêm giỏ hàng hay mua hàng, thì nó sang code 304 là “không có sự thay đổi”

        Chỉ thế thôi mà

        Lý do mình luôn recommend dùng WP Rocket là thế, nó chạy trên shop rất hiệu quả, status 304 là nó không thấy có sự thay đổi gì so với trước, bạn vào trang thử ấn mua hàng, add 1 sản phẩm vào giỏ, là nó tự hiểu đang mua hàng, nó không load dùng cache ra nữa, mấy plugin cache khác có khi lỗi tè le lun á :]]

        • À haha ra là vậy, thế thì mình an tâm rồi, nhưng bibica ơi thế còn lỗi vary: Accept-Encoding bị duplicate 2 lần thì do đâu?

          https://bewished.co -> Web này đang bị lỗi đó, lâu lâu cái web https://teeqq.com cũng vẫn bị, chả hiểu sao nữa.

          • Nó bị lỗi như thế này ạ:
            https://i.imgur.com/07TqUgx.png

            Như bibica chỉ có 1 cái thôi ấy ạ.

            Mình dùng hosting DigitalOcean + Serverpilot cấu hình ẵn http/2 và ngnix chạy song song với apache. Lúc cài wp rocket và rocket ngnix xong thì bị như thế, chả biết có bị trùng code hay gzip gì không? Mình tắt gzip on và gzip_vary: on đi trong nginx đi thì không bị vậy nữa, nhưng tắt rồi chả biết có sao không 🙁

          • Chủ yếu nhất cài WP Rocket vào xong thấy có nhanh hơn không? Nhanh hơn thì khỏi cần quan tâm mấy cái đó, còn thấy chậm hơn thì gỡ ra xem tốc độ thế nào

            Thực tế DigitalOcean + Serverpilot chạy WP mặc định cũng ngon chán rồi, chẳng cần vẽ vời tốt ưu thêm cái gì cho mệt 😀

            Khi nào shop khách vào đông bị quá tải thì mới cần quan tâm này nọ thôi 😛

          • Cụ thể như cái ảnh bên dưới của thèng ngoirungdui.com (https://i.imgur.com/rvmsOWs.jpg)

            Làm xong, vào shop mất 0.5s, load xong trang mấy tầm 0.7s 😀

            Xong, thấy nó nhanh, chạy không lỗi, ổn định là được 😀

  4. Mình làm bằng Flexible và CloudFlare thấy nó cũng có HTTP Strict Transport Security (HSTS), đang gửi xác nhận, chờ duyệt :3

  5. Ôi, phức tạp quá, thôi cứ dùng cái Flexible của CloudFlare cho lẹ, đỡ đau đầu :))

    • Làm thì nhanh, chủ yếu nó chuyển tất cả subdomain sang https nên cũng khá phiền đấy 😀

  6. anh ơi, còn cái webinoly thì sao ạ.
    Em bật SSL bằng script của webinoly thì OK rồi, check cũng A+
    Nhưng khi thêm strict-transport-security vào để đăng ký HSTS thì bị trùng với 1 cái strict-transport-security đã có sẵn.

    • Có dùng mấy plugin dạng really simple ssl không?

      Bọn này đa phần nó hay có option bật tiêu đề thế lên 😀

      • dạ hông anh.
        Em đoán là thằng webinoly nó tự thêm vào, mà em không tìm ra chỗ để edit.
        Em check thử ngoirungdui cũng có sẵn strict-transport-security luôn

        • Ah, đúng thế thật
          Vào /etc/nginx/common/headers-https.conf nó có thêm dòng add_header Strict-Transport-Security “max-age=31536000”;

          Sửa lại thành giống như trong bài rồi reload lại Nginx là được

    • Nguyên đoạn đầu viết để nhớ, thực tế đây cũng là lần đầu teo dùng ssl của Cloudflare 😀

      Nguyên bài dài thế chứ thêm có mỗi header( ‘Strict-Transport-Security: max-age=63072000; includeSubDomains; preload) vào à 😀

Leave a Comment