Trang này được dịch bởi Cloud Translation API.

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

Maud Nalpas

Trong hầu hết trường hợp, http://localhost đều hoạt độ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 phát triển của bạn 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 phiên bản chính thức. (Nếu trang web chính thức 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 trên thiết bị bằng HTTPS.

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

Chạy trang web của bạn trên thiết 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 có chữ ký của một thực thể mà thiết bị và trình duyệt của bạn tin tưởng, được gọi là cơ quan cấp chứng chỉ (CA) đáng tin cậy. Trình duyệt sẽ kiểm tra xem chứng chỉ máy chủ phát triển của bạn có được một 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 trên nhiều nền tảng) để tạo và ký chứng chỉ của mình. Để biết các tuỳ chọn hữu ích khác, hãy xem phần Chạy trang web của bạn trên máy bằng HTTPS: các tuỳ 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, các định dạng này phức tạp hơn và ít tin cậy hơn so với mkcert và không nhất thiết phải sử dụng nhiều nền tảng, do đó khiến các nhóm nhà phát triển lớn hơn khó tiếp cận được các định dạng này.

Thận trọng:

Không bao giờ xuất hoặc chia sẻ tệp rootCA-key.pem mà mkcert tạo tự động khi bạn chạy mkcert -install. Kẻ tấn công chiếm đoạt được tệp này có thể tạo ra các cuộc tấn công trên đường dẫn đối với bất kỳ trang web nào mà bạn có thể đang truy cập. Chúng có thể chặn các yêu cầu bảo mật từ máy của bạn đến bất kỳ trang web nào – ngân hàng, nhà cung cấp dịch vụ y tế hoặc mạng xã hội. Nếu bạn cần biết vị trí của rootCA-key.pem để đảm bảo an toàn, hãy chạy mkcert -CAROOT.
Chỉ sử dụng mkcertification cho mục đích phát triển và hơn nữa, không bao giờ yêu cầu người dùng cuối chạy lệnh mkcertification.
Nhóm phát triển: tất cả các thành viên trong nhóm của bạn phải cài đặt và chạy mkcert riêng biệt (không phải lưu trữ và chia sẻ CA và chứng chỉ).

Thiết lập

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

Làm theo instructions để cài đặt mkcertification 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
```
Thêm mkcert vào các CA gốc cục bộ của bạn.

Trong dòng lệnh của bạn, 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) địa phương. CA cục bộ do mkcert tạo chỉ được tin cậy tại chỗ trên thiết bị của bạn.
Tạo một chứng chỉ cho trang web của bạn, có chữ ký của mkcert.

Trong dòng lệnh, hãy chuyển đến thư mục gốc của trang web hoặc bất kỳ thư mục nào mà bạn muốn giữ lại 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 một chứng chỉ cho tên máy chủ mà bạn đã chỉ định.
- Hãy để mkcertification 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 tưởng cục bộ ký.
Định cấu hình máy chủ của bạn để sử dụng HTTPS chứng chỉ TLS mà bạn vừa tạo.

Chi tiết về cách thực hiện việc này tuỳ thuộc vào máy chủ của bạn. Sau đây là một số ví dụ:

👩🏻 💻 Có 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 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
    |--...
```
Thì 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"
```
👩🏻 💻 Ví dụ khác:
- Máy chủ phát triển góc
- Python
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 trên thiết bị bằng HTTPS hay không. Bạn sẽ không thấy bất kỳ cảnh báo trình duyệt nào, vì trình duyệt của bạn tin tưởng mkcert là một tổ chức phát hành chứng chỉ cục bộ.

tài liệu tham khảo nhanh về mkcertification

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

Thiết lập mkcertification.

Nếu bạn chưa cài đặt, hãy cài đặt mkcertification, ví dụ như trên macOS:
```
brew install mkcert
```
Hãy xem bài viết cài đặt mkcert để biết hướng dẫn dành 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
```
Tạo một 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à mkcertification tự động ký.
Đị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 có cảnh báo

Thận trọng: Chỉ thực hiện việc này cho mục đích phát triển và không bao giờ xuất hoặc chia sẻ tệp rootCA-key.pem. Nếu bạn cần biết vị trí của tệp này để đảm bảo an toàn, hãy chạy mkcert -CAROOT.

</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ỉ. Các phương thức 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 đó, hãy tự ký chứng chỉ của bạn. Phương pháp này có một số sai lầm:

Các trình duyệt không tin tưởng bạn là tổ chức phát hành chứng chỉ, vì vậy, họ sẽ hiển thị cảnh báo 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 sẽ không an toàn nếu bạn đang làm việc trong một mạng không an toàn.
Cách này không nhất thiết sẽ dễ dàng hoặc nhanh hơn so với việc sử dụng một CA cục bộ như mkcertification.
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 ngữ cảnh trình duyệt, bạn cần tắt tính năng 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 phát hành công khai sẽ gây ra các vấn đề bảo mật.

Ảnh chụp màn hình cảnh báo mà trình duyệt sẽ hiển thị khi bạn sử dụng chứng chỉ tự ký. — Cảnh báo mà trình duyệt sẽ xuất hiện khi sử dụng chứng chỉ tự ký.

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

Tại sao các 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, thì trình duyệt của bạn 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 đăng ký là tổ chức phát hành chứng chỉ đáng tin cậy hay chưa. Vì bạn không tin tưởng chứng chỉ này nên trình duyệt sẽ không tin tưởng vào chứng chỉ này, đồng thời 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, công cụ này sẽ vẫn tạo kết nối HTTPS, nhưng bạn sẽ tự chịu rủi ro khi làm vậy.

Lý do 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 dẫn đến các chức năng sau:

Bạn cần thực hiện nhiều thao tác thiết lập hơn so với khi sử dụng một 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ệ do 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 các trường hợp sau:
- localhost và các tên miền dành riêng khác như example hoặc test.
- Bất kỳ tên miền nào mà bạn không kiểm soát.
- Miền cấp cao nhất không hợp lệ. Để biết thêm thông tin, hãy tham khảo danh sách các miền cấp cao nhất hợp lệ.

Proxy ngược

Một cách khác để truy cập vào 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 sẽ kéo theo những rủi ro sau:

Bất kỳ ai được bạn chia sẻ URL proxy 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 minh hoạ dự án của bạn cho khách hàng, nhưng cũng có thể cho phép những người không được cấp phép chia sẻ thông tin nhạy cảm.
Một số dịch vụ proxy ngược sẽ tính phí sử dụng, vì vậy, giá có thể là một yếu tố khi bạn chọn dịch vụ.
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 hoạt động của các công cụ này.

Gắn cờ (không nên)

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ể sử dụng cờ để buộc trình duyệt xem là mysite.example an toàn. Tránh làm việc này vì những lý do sau:

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

Chúng tôi rất cảm ơn bạn vì đã đóng góp và phản hồi cho tất cả người đánh giá và người đóng góp, đặc biệt là Ryan Sleevi, Filippo Valsorda, Milica Mihajlija và Rowan Merewood. 🙌

Hình nền chính của @anandu trên Unsplash, được chỉnh sửa.