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 hoạt động giống như HTTPS để phát triển . Tuy nhiên, có một số trường hợp đặc biệt, 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 khi 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 cách trang web hoạt động trong phiên bản chính thức. (Nếu trang web sản xuất 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 máy bằng HTTPS.

Để biết 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 địa phương và truy cập vào https://localhost hoặc https://mysite.example (tên máy chủ tùy chỉnh), bạn cần có Chứng chỉ TLS có chữ ký của một pháp nhân mà thiết bị và trình duyệt của bạn tin cậy, được gọi là tổ chức đáng tin cậy tổ chức phát hành chứng chỉ (CA). Trình duyệt sẽ kiểm tra xem chứng chỉ của máy chủ phát triển có được ký bằng tổ chức phát hành chứng chỉ đáng tin cậy trước khi tạo kết nối HTTPS.

Bạn nên dùng mkcert, một CA nhiều nền tảng để tạo và ký chứng chỉ của mình. Để có thông tin 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 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, chúng phức tạp hơn và ít đáng tin cậy hơn mkcert và không nhất thiết phải hoạt động trên nhiều nền tảng, khiến chúng khó tiếp cận hơn với các nhóm nhà phát triển lớn hơn.

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 giữ được tệp này có thể tạo ra các cuộc tấn công trên đường dẫn cho 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 của bạn. 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 mkcert cho mục đích phát triển. Ngoài ra, đừng bao giờ yêu cầu người dùng cuối chạy các lệnh mkcert.
Nhóm phát triển: tất cả thành viên trong nhóm của bạn phải cài đặt và chạy mkcert riêng rẽ (không lưu trữ và dùng chung CA cùng chứng chỉ).

Thiết lập

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. 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, 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. Tổ chức phát hành chứng chỉ cục bộ do mkcert tạo chỉ được tin cậy cục bộ trên thiết bị của bạn.
Tạo 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 mà bạn muốn lưu giữ chứng chỉ.

Sau đó, chạy:
```
mkcert localhost
```
Nếu bạn đang sử dụng 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 2 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 tổ chức phát hành chứng chỉ ký mà trình duyệt tin cậy trên máy.
Định cấu hình máy chủ của bạn để sử dụng chứng chỉ TLS (Bảo mật tầng truyền tải) 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 vài 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á.

👩🏻 💻 Sử dụng 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:
```
|-- 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"
```
👩🏻 💻 Ví dụ khác:
- Máy chủ phát triển góc
- Python
Hãy mở https://localhost hoặc https://mysite.example trong trình duyệt để hãy kiểm tra kỹ để đảm bảo rằng bạn đang chạy trang web trên máy bằng HTTPS. Bạn sẽ không thấy cảnh báo của trình duyệt vì trình duyệt của bạn tin tưởng mkcert là chứng chỉ cục bộ cơ quan cấp chứng nhận.

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:

Thiết lập mkcert.

Nếu bạn chưa cài đặt, hãy cài đặt mkcert, chẳng hạn như trên macOS:
```
brew install mkcert
```
Chọn install 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 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ệ để mkcert ký tự động.
Đị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 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 thao tác này đối với nội dung phát triển mục đích 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 mã an toàn, hãy chạy mkcert -CAROOT.

</div>

Chạy trang web cục bộ bằng HTTPS: các tuỳ chọn khác

Sau đây là các cách khác để thiết lập chứng chỉ của bạn. Đây thường là phức tạp hoặc rủi ro hơn so với 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ỉ địa phương như mkcert, và thay vào đó, hãy tự ký chứng chỉ. Phương pháp này có một số sai lầm:

Trình duyệt không tin tưởng bạn là tổ chức phát hành chứng chỉ nên 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 không an toàn nếu bạn đang làm việc trong 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 dùng một tổ chức phát hành chứng chỉ (CA) địa phương như mkcert.
Chứng chỉ tự ký sẽ không hoạt động chính xác như cách đáng tin cậy chứng chỉ.
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 xác minh chứng chỉ cho máy chủ của bạn. Quên bật lại tính năng này trong quá trình sản xuất đều 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 người dùng sử dụng chứng chỉ tự ký. — Cảnh báo mà trình duyệt sẽ đưa ra khi người dùng sử dụng chứng chỉ tự ký.

Nếu bạn không chỉ định chứng chỉ, React và Vue tùy chọn HTTPS của máy chủ phát triển tạo một chứng chỉ tự ký trong máy hút mùi. Thao tác này nhanh chóng, nhưng đi kèm với các cảnh báo tương tự của trình duyệt và sự cố chứng chỉ tự ký. Rất may là bạn có thể sử dụng giao diện người dùng khung HTTPS tích hợp sẵn và chỉ định chứng chỉ đáng tin cậy cục bộ được tạo bằng mkcert hoặc các công cụ tương tự. Để biết thêm thông tin, hãy xem mkcert 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, trình duyệt sẽ kiểm tra chứng chỉ của máy chủ phát triển cục bộ. Thời điểm thấy rằng bạn đã tự ký chứng chỉ, công cụ này 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. Vì bạn không, trình duyệt của bạn không thể tin cậy chứng chỉ này và trình duyệt sẽ hiển thị cảnh báo cho bạn biết kết nối của bạn không an toàn. Công cụ này vẫn tạo HTTPS nếu tiếp tục, nhưng bạn tự chịu rủi ro khi làm như vậy.

Lý do khiến các trình duyệt không tin tưởng chứng chỉ tự ký: một sơ đồ. — Lý do khiến các trình duyệt không tin cậy 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 CA chính thức ký. Điều này đi kèm với các chức năng sau:

Bạn phải thiết lập nhiều 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 CA chính thức cho những mục đích sau:
- localhost và các mục khác được đặt trước các tên miền 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.
- Tên 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 miền cấp cao nhất hợp lệ.

Đảo ngược proxy

Một cách 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 các rủi ro sau:

Bất cứ ai mà bạn chia sẻ URL proxy ngược đều có thể truy cập vào thông tin phát triển cục bộ của bạn của bạn. Điều này có thể hữu ích khi bạn minh hoạ 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 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ố ảnh hưởng đến 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 theo cách thức hoạt động của các công cụ này.

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

Nếu đang sử dụng 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 coi mysite.example là bảo mật. Tránh làm như vậy vì các lý do sau:

Bạn cần phải chắc chắn 100% rằng mysite.example luôn phân giải thành một của bạn. Nếu không, bạn có nguy cơ bị rò rỉ thông tin đăng nhập vào kênh 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 nhiều trình duyệt.

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

Nền hình ảnh chính của @anandu trên Unsplash, đã chỉnh sửa.