Dùng HTTPS cho hoạt động phát triển cục bộ

Maud Nalpas

Trong hầu hết các trường hợp, http://localhost hoạt động giống như HTTPS cho mục đích phát triển. Tuy nhiên, có một số trường hợp đặc biệt, chẳng hạn như tên máy chủ tuỳ chỉnh hoặc sử dụng cookie bảo mật trên các trình duyệt, trong đó bạn cần thiết lập rõ ràng trang web dành cho nhà phát triển của mình để hoạt động như HTTPS nhằm thể hiện chính xác cách trang web của bạn hoạt động trong quá trình phát hành công khai. (Nếu trang web phát hành công khai của bạn không sử dụng HTTPS, hãy ưu tiên chuyển sang HTTPS).

Trang này giải thích cách chạy trang web của bạn tại địa phương bằng HTTPS.

Để xem hướng dẫn ngắn gọn, hãy xem tài liệu tham khảo nhanh về mkcert.**

Chạy trang web của bạn cục bộ bằng HTTPS bằng mkcert (nên dùng)

Để sử dụng HTTPS với trang web phát triển cục bộ và truy cập vào https://localhost hoặc https://mysite.example (tên máy chủ tuỳ chỉnh), bạn cần có chứng chỉ TLS do một thực thể mà thiết bị và trình duyệt của bạn tin tưởng ký, được gọi là tổ chức phát hành chứng chỉ (CA) đáng tin cậy. Trình duyệt sẽ kiểm tra xem chứng chỉ của máy chủ phát triển có được CA đáng tin cậy ký hay không trước khi tạo kết nối HTTPS.

Bạn nên sử dụng mkcert, một CA nhiều nền tảng, để tạo và ký chứng chỉ. Để biết các lựa chọn hữu ích khác, hãy xem phần Chạy trang web của bạn cục bộ bằng HTTPS: các lựa chọn khác.

Nhiều hệ điều hành có các thư viện để tạo chứng chỉ, chẳng hạn như openssl. Tuy nhiên, chúng phức tạp hơn và ít đáng tin cậy hơn mkcert, đồng thời không nhất thiết phải đa nền tảng, điều này khiến chúng khó tiếp cận hơn đối với các nhóm nhà phát triển lớn hơn.

Thiết lập

  1. Cài đặt mkcert (chỉ một lần).

    Làm theo hướng dẫn để cài đặt mkcert trên hệ điều hành của bạn. Ví dụ: trên macOS:

    brew install mkcert
brew install nss # if you use Firefox

  2. Thêm mkcert vào các CA gốc cục bộ.

    Trong cửa sổ dòng lệnh, hãy chạy lệnh sau:

    mkcert -install

    Thao tác này sẽ tạo ra một tổ chức phát hành chứng chỉ (CA) cục bộ. CA cục bộ do mkcert tạo chỉ được tin cậy cục bộ, trên thiết bị của bạn.

  3. Tạo chứng chỉ cho trang web của bạn, được mkcert ký.

    Trong thiết bị đầu cuối, hãy chuyển đến thư mục gốc của trang web hoặc bất kỳ thư mục nào bạn muốn lưu giữ chứng chỉ.

    Sau đó, hãy chạy:

    mkcert localhost

    Nếu bạn đang sử dụng một tên máy chủ tuỳ chỉnh như mysite.example, hãy chạy:

    mkcert mysite.example

    Lệnh này thực hiện hai việc:

    • Tạo chứng chỉ cho tên máy chủ mà bạn đã chỉ định.
    • Cho phép mkcert ký chứng chỉ.

    Chứng chỉ của bạn hiện đã sẵn sàng và được một tổ chức phát hành chứng chỉ mà trình duyệt của bạn tin cậy ký tại địa phương.

  4. Định cấu hình máy chủ để sử dụng HTTPS cho chứng chỉ TLS mà bạn vừa tạo.

    Thông tin chi tiết về cách thực hiện việc này sẽ phụ thuộc vào máy chủ của bạn. Sau đây là một số ví dụ:

    👩🏻‍💻 Với nút:

    server.js (thay thế {PATH/TO/CERTIFICATE...} và {PORT}):

    const https = require('https');
const fs = require('fs');
const options = {
  key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
  cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
};
https
  .createServer(options, function (req, res) {
    // server code
  })
  .listen({PORT});

    👩🏻‍💻 Với http-server:

    Khởi động máy chủ của bạn như sau (thay thế {PATH/TO/CERTIFICATE...}):

    http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem

    -S chạy máy chủ của bạn bằng HTTPS, trong khi -C đặt chứng chỉ và -K đặt khoá.

    👩🏻‍💻 Với máy chủ phát triển React:

    Chỉnh sửa package.json như sau và thay thế {PATH/TO/CERTIFICATE...}:

    "scripts": {
"start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"

    Ví dụ: nếu bạn đã tạo một chứng chỉ cho localhost trong thư mục gốc của trang web:

    |-- my-react-app
    |-- package.json
    |-- localhost.pem
    |-- localhost-key.pem
    |--...

    Sau đó, tập lệnh start của bạn sẽ có dạng như sau:

    "scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"

    👩🏻‍💻 Các ví dụ khác:

  5. Mở https://localhost hoặc https://mysite.example trong trình duyệt để kiểm tra kỹ xem bạn có đang chạy trang web của mình cục bộ bằng HTTPS hay không. Bạn sẽ không thấy bất kỳ cảnh báo nào trên trình duyệt vì trình duyệt của bạn tin tưởng mkcert với tư cách là một cơ quan chứng nhận cục bộ.

Tài liệu tham khảo nhanh về mkcert

Tài liệu tham khảo nhanh về mkcert

Cách chạy trang web phát triển cục bộ bằng HTTPS:

  1. Thiết lập mkcert.

    Nếu bạn chưa cài đặt, hãy cài đặt mkcert, ví dụ: trên macOS:

    brew install mkcert

    Hãy xem phần cài đặt mkcert để biết hướng dẫn cho Windows và Linux.

    Sau đó, hãy tạo một tổ chức phát hành chứng chỉ cục bộ:

    mkcert -install

  2. Tạo chứng chỉ đáng tin cậy.

    mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

    Thao tác này sẽ tạo một chứng chỉ hợp lệ mà mkcert tự động ký.

  3. Định cấu hình máy chủ phát triển để sử dụng HTTPS và chứng chỉ mà bạn đã tạo ở Bước 2.

Giờ đây, bạn có thể truy cập vào https://{YOUR HOSTNAME} trong trình duyệt mà không gặp cảnh báo

</div>

Chạy trang web của bạn cục bộ bằng HTTPS: các lựa chọn khác

Sau đây là những cách khác để thiết lập chứng chỉ. Những cách này thường phức tạp hoặc rủi ro hơn so với việc sử dụng mkcert.

Chứng chỉ tự ký

Bạn cũng có thể quyết định không sử dụng một tổ chức phát hành chứng chỉ cục bộ như mkcert, mà thay vào đó tự ký chứng chỉ. Phương pháp này có một số điểm hạn chế:

  • Các trình duyệt không tin tưởng bạn với tư cách là một tổ chức phát hành chứng chỉ, vì vậy, chúng sẽ hiển thị những cảnh báo mà bạn cần bỏ qua theo cách thủ công. Trong Chrome, bạn có thể sử dụng cờ #allow-insecure-localhost để tự động bỏ qua cảnh báo này trên localhost.
  • Điều này không an toàn nếu bạn đang làm việc trong một mạng không an toàn.
  • Việc này không nhất thiết dễ dàng hoặc nhanh hơn so với việc sử dụng một CA cục bộ như mkcert.
  • Chứng chỉ tự ký sẽ không hoạt động giống hệt như chứng chỉ đáng tin cậy.
  • Nếu không sử dụng kỹ thuật này trong bối cảnh trình duyệt, bạn cần tắt quy trình xác minh chứng chỉ cho máy chủ của mình. Việc quên bật lại tính năng này trong quá trình sản xuất sẽ gây ra các vấn đề về bảo mật.
Ảnh chụp màn hình về cảnh báo mà trình duyệt hiển thị khi sử dụng chứng chỉ tự ký.
Cảnh báo mà trình duyệt hiển thị khi sử dụng chứng chỉ tự ký.

Nếu bạn không chỉ định chứng chỉ, các tuỳ chọn HTTPS của máy chủ phát triển React và Vue sẽ tạo một chứng chỉ tự ký. Cách này nhanh chóng nhưng vẫn gặp phải các cảnh báo của trình duyệt và những vấn đề khác của chứng chỉ tự ký. Rất may là bạn có thể sử dụng lựa chọn HTTPS tích hợp của các khung công tác giao diện người dùng và chỉ định một chứng chỉ được tin cậy cục bộ do mkcert hoặc công cụ tương tự tạo. Để biết thêm thông tin, hãy xem ví dụ về mkcert với React.

Tại sao trình duyệt không tin tưởng chứng chỉ tự ký?

Nếu bạn mở trang web đang chạy cục bộ trong trình duyệt bằng HTTPS, trình duyệt sẽ kiểm tra chứng chỉ của máy chủ phát triển cục bộ. Khi thấy bạn tự ký chứng chỉ, hệ thống sẽ kiểm tra xem bạn có được đăng ký là một tổ chức phát hành chứng chỉ đáng tin cậy hay không. Vì bạn không phải là người dùng đó, nên trình duyệt không thể tin tưởng chứng chỉ và sẽ hiển thị cảnh báo cho biết kết nối của bạn không an toàn. Nếu bạn tiếp tục, Chrome vẫn sẽ tạo kết nối HTTPS, nhưng bạn phải tự chịu rủi ro.

Tại sao trình duyệt không tin tưởng chứng chỉ tự ký: sơ đồ.
Lý do trình duyệt không tin tưởng chứng chỉ tự ký.

Chứng chỉ do một tổ chức phát hành chứng chỉ thông thường ký

Bạn cũng có thể sử dụng chứng chỉ do một CA chính thức ký. Điều này đi kèm với những vấn đề sau:

  • Bạn phải thực hiện nhiều công việc thiết lập hơn so với khi sử dụng kỹ thuật CA cục bộ như mkcert.
  • Bạn cần sử dụng một tên miền hợp lệ mà bạn kiểm soát. Điều này có nghĩa là bạn không thể sử dụng các CA chính thức cho những mục đích sau:

Proxy đảo ngược

Một lựa chọn khác để truy cập vào một trang web đang chạy cục bộ bằng HTTPS là sử dụng proxy ngược, chẳng hạn như ngrok. Điều này đi kèm với những rủi ro sau:

  • Bất kỳ ai được bạn chia sẻ URL của proxy đảo ngược đều có thể truy cập vào trang web phát triển cục bộ của bạn. Điều này có thể hữu ích khi bạn trình bày dự án của mình cho khách hàng, nhưng cũng có thể cho phép những người không được uỷ quyền chia sẻ thông tin nhạy cảm.
  • Một số dịch vụ proxy đảo ngược tính phí cho việc sử dụng, vì vậy, giá có thể là một yếu tố trong lựa chọn dịch vụ của bạn.
  • Các biện pháp bảo mật mới trong trình duyệt có thể ảnh hưởng đến cách các công cụ này hoạt động.

Nếu đang sử dụng một tên máy chủ tuỳ chỉnh như mysite.example trong Chrome, bạn có thể dùng một cờ để buộc trình duyệt coi mysite.example là an toàn. Tránh làm việc này vì những lý do sau:

  • Bạn cần chắc chắn 100% rằng mysite.example luôn phân giải thành một địa chỉ cục bộ. Nếu không, bạn có thể vô tình để lộ thông tin đăng nhập sản xuất.
  • Cờ này chỉ hoạt động trong Chrome, nên bạn không thể gỡ lỗi trên nhiều trình duyệt.

Xin chân thành cảm ơn tất cả những người đã đóng góp và phản hồi, đặc biệt là Ryan Sleevi, Filippo Valsorda, Milica Mihajlija và Rowan Merewood. 🙌

Phông nền của hình ảnh chính do @anandu cung cấp trên Unsplash, đã chỉnh sửa.