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

Khi nào nên sử dụng HTTPS cho hoạt động phát triển cục bộ

Hầu như mọi lúc, bạn nên sử dụng http://localhost để phát triển cục bộ, ngoại trừ trong một số trường hợp đặc biệt. Bài đăng này giải thích thời điểm bạn cần chạy trang web phát triển cục bộ bằng HTTPS.

Maud Nalpas

Ngoài ra, hãy xem: Cách sử dụng HTTPS để phát triển cục bộ.

Trong bài đăng này, các câu lệnh về localhost cũng hợp lệ đối với 127.0.0.1 và [::1], vì cả hai đều mô tả địa chỉ máy tính cục bộ, còn được gọi là "địa chỉ lặp lại". Ngoài ra, để đơn giản, số cổng không được chỉ định. Vì vậy, khi bạn nhìn thấy http://localhost, hãy đọc dưới dạng http://localhost:{PORT} hoặc http://127.0.0.1:{PORT}.

Tóm tắt

Khi phát triển cục bộ, hãy sử dụng http://localhost theo mặc định. Service Worker, API xác thực web, v.v. sẽ hoạt động. Tuy nhiên, trong các trường hợp sau đây, bạn sẽ cần HTTPS để phát triển cục bộ:

Đặt cookie bảo mật một cách nhất quán trên các trình duyệt
Gỡ lỗi các vấn đề về nội dung hỗn hợp
Sử dụng HTTP/2 trở lên
Sử dụng thư viện hoặc API của bên thứ ba yêu cầu giao thức HTTPS
Sử dụng tên máy chủ tuỳ chỉnh

Thời điểm sử dụng HTTPS cho phát triển cục bộ.

✨ Đây là tất cả những gì bạn cần biết. Nếu bạn muốn biết thêm thông tin chi tiết, hãy đọc tiếp nhé!

Tại sao trang web phát triển của bạn nên hoạt động an toàn

Để tránh gặp phải các vấn đề không mong muốn, bạn muốn trang web phát triển cục bộ hoạt động giống như trang web sản xuất của bạn. Vì vậy, nếu trang web chính thức của bạn sử dụng HTTPS, bạn muốn trang web phát triển cục bộ của mình hoạt động giống như trang web HTTPS.

Sử dụng `http://localhost` theo mặc định

Các trình duyệt xử lý http://localhost theo cách đặc biệt: mặc dù là HTTP, nhưng chủ yếu vẫn hoạt động như trang web HTTPS.

Trên http://localhost, Service Worker, API cảm biến, API xác thực, Thanh toán và các tính năng khác yêu cầu đảm bảo bảo mật nhất định được hỗ trợ và hoạt động y như trên trang web HTTPS.

Trường hợp sử dụng HTTPS cho hoạt động phát triển cục bộ

Bạn có thể gặp phải các trường hợp đặc biệt, trong đó http://localhost không hoạt động như một trang web HTTPS, hoặc có thể bạn chỉ muốn sử dụng tên trang web tuỳ chỉnh không phải là http://localhost.

Bạn cần sử dụng HTTPS để phát triển cục bộ trong các trường hợp sau:

Bạn cần đặt cookie cục bộ là Secure hoặc SameSite:none hoặc có tiền tố __Host. Cookie Secure chỉ được đặt trên HTTPS, nhưng không được đặt trên http://localhost đối với tất cả các trình duyệt. Ngoài ra, vì SameSite:none và __Host cũng yêu cầu cookie phải có giá trị Secure, nên việc đặt cookie như vậy trên trang web phát triển cục bộ của bạn cũng yêu cầu giao thức HTTPS.

Khi nói đến việc đặt cookie Secure cục bộ, không phải tất cả các trình duyệt đều hoạt động theo cách tương tự! Ví dụ: Chrome và Safari không đặt cookie Secure trên máy chủ cục bộ, nhưng Firefox thì có. Trong Chrome, đây được coi là một lỗi.
Bạn cần gỡ lỗi cục bộ cho một vấn đề chỉ xảy ra trên trang web HTTPS mà không xảy ra trên trang web HTTP, thậm chí không xảy ra trên trang web http://localhost, chẳng hạn như vấn đề nội dung hỗn hợp.
Bạn cần kiểm thử cục bộ hoặc tái tạo một hành vi cụ thể đối với HTTP/2 trở lên. Ví dụ: nếu bạn cần kiểm thử hiệu suất tải trên HTTP/2 trở lên. HTTP/2 không an toàn trở lên không được hỗ trợ, thậm chí trên localhost.
Bạn cần kiểm thử cục bộ các thư viện hoặc API của bên thứ ba có yêu cầu HTTPS (ví dụ: OAuth).
Bạn không sử dụng localhost mà là tên máy chủ tuỳ chỉnh cho hoạt động phát triển cục bộ, ví dụ: mysite.example. Thông thường, trường hợp này có nghĩa là bạn đã ghi đè tệp máy chủ cục bộ:

Chỉnh sửa tệp hosts để thêm tên máy chủ tuỳ chỉnh.

Trong trường hợp này, theo mặc định, Chrome, Edge, Safari và Firefox không không xem mysite.example là an toàn, mặc dù đó là trang web cục bộ. Vì vậy, trang web này sẽ không hoạt động như một trang web HTTPS.
Các trường hợp khác! Đây chưa phải danh sách đầy đủ, nhưng nếu bạn gặp phải trường hợp không được liệt kê ở đây, bạn sẽ biết: mọi thứ sẽ lỗi trên http://localhost hoặc trang web sẽ hoạt động không giống như trang web chính thức của bạn. 🙃

Trong tất cả những trường hợp này, bạn cần sử dụng HTTPS cho hoạt động phát triển cục bộ.

Cách sử dụng HTTPS cho hoạt động phát triển cục bộ

Nếu bạn cần sử dụng HTTPS cho phát triển cục bộ, hãy tham khảo bài viết Cách sử dụng HTTPS cho phát triển cục bộ.

Mẹo nếu bạn đang sử dụng tên máy chủ tuỳ chỉnh

Nếu bạn đang sử dụng một tên máy chủ tuỳ chỉnh, chẳng hạn như chỉnh sửa tệp hosts:

Đừng dùng một tên máy chủ đơn thuần như mysite vì nếu có một miền cấp cao nhất (TLD) trùng tên (mysite) thì bạn sẽ gặp vấn đề. Và cũng không phải là điều đó không xảy ra: vào năm 2020, có hơn 1.500 TLD và danh sách này đang tăng lên. coffee, museum, travel và nhiều tên công ty lớn (thậm chí có thể là công ty mà bạn đang làm việc!) là TLD. Xem danh sách đầy đủ tại đây.
Chỉ sử dụng những miền là của bạn hoặc được dành riêng cho mục đích này. Nếu không có miền của riêng mình, bạn có thể sử dụng test hoặc localhost (mysite.localhost). test không có chế độ đặc biệt nào trong các trình duyệt, nhưng localhost thì có: Chrome và Edge hỗ trợ http://<name>.localhost ngay từ đầu và nó sẽ hoạt động an toàn khi localhost không. Hãy dùng thử: chạy trang web bất kỳ trên localhost và truy cập http://<whatever name you like>.localhost:<your port> trong Chrome hoặc Edge. Điều này cũng có thể sớm được thực hiện trên Firefox và Safari. Lý do bạn có thể làm điều này (có các miền con như mysite.localhost) là vì localhost không chỉ là một tên máy chủ mà còn là một TLD đầy đủ, chẳng hạn như com.

Tìm hiểu thêm

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

Hình ảnh chính của @moses_lee trên Unsplash, đã chỉnh sửa.