Phát triển các ứng dụng web hiện đại thường liên quan đến việc làm việc với các tính năng yêu cầu một ngữ cảnh bảo mật.
Trình duyệt của bạn, các API của bên thứ ba và các thực tiễn bảo mật tốt nhất đều thúc đẩy bạn sử dụng HTTPS.
Điều này đúng ngay cả trong môi trường phát triển cục bộ của bạn.
Trong hướng dẫn toàn diện này, chúng tôi sẽ khám phá lý do bạn cần HTTPS trên localhost.
Chúng tôi sẽ hướng dẫn bạn qua các phương pháp thiết lập truyền thống.
Sau đó, chúng tôi sẽ trình bày một cách dễ dàng để thiết lập HTTPS bằng Tunnelmole.
Tunnelmole là một giải pháp mạnh mẽ, chỉ với một lệnh, để có được URL HTTPS bảo mật và có thể chia sẻ cho máy chủ cục bộ của bạn một cách nhanh chóng.
Tại sao bạn cần HTTPS trên Localhost?
Chạy máy chủ cục bộ của bạn qua HTTPS (Hypertext Transfer Protocol Secure) không còn là một điều “nên có”.
Nó thường là một điều cần thiết vì nhiều lý do.
1. Yêu cầu tính năng của trình duyệt
Nhiều API trình duyệt hiện đại chỉ hoạt động trong một “ngữ cảnh bảo mật”.
Nếu bạn cố gắng sử dụng chúng qua //localhost, chúng sẽ thất bại hoặc bị vô hiệu hóa.
Các tính năng này bao gồm:
- Service Workers: Đây là thành phần thiết yếu cho Progressive Web Apps (PWAs). Chúng cho phép chức năng ngoại tuyến và thông báo đẩy.
- WebRTC: Dùng cho giao tiếp thời gian thực (trò chuyện video/âm thanh).
- Geolocation API: Dùng để truy cập vị trí địa lý của người dùng.
- Secure Cookies: Cookie có cờ
Securechỉ được gửi qua HTTPS. - Web Crypto API: Dùng để thực hiện các hoạt động mã hóa trong trình duyệt.
2. Kiểm tra tích hợp của bên thứ ba
Nhiều dịch vụ, đặc biệt là cổng thanh toán và nhà cung cấp xác thực, sử dụng webhooks.
Webhooks gửi cập nhật theo thời gian thực đến ứng dụng của bạn.
Các dịch vụ này hầu như luôn yêu cầu điểm cuối webhook phải là một URL HTTPS bảo mật.
Họ sẽ không gửi dữ liệu nhạy cảm đến một địa chỉ // không bảo mật.
Hơn nữa, localhost không thể truy cập được từ internet.
3. Đạt được sự đồng bộ giữa môi trường phát triển và sản xuất (Dev/Prod Parity)
Ứng dụng sản xuất của bạn chạy trên HTTPS.
Môi trường phát triển của bạn nên phản ánh môi trường sản xuất càng gần càng tốt.
Điều này giúp tránh các vấn đề “nó hoạt động trên máy của tôi”.
Chạy HTTPS cục bộ giúp bạn phát hiện các cảnh báo nội dung hỗn hợp (tải tài sản HTTP trên trang HTTPS).
Nó cũng giúp phát hiện các lỗi liên quan đến bảo mật khác sớm trong quá trình phát triển.
4. Xây dựng niềm tin và sự chuyên nghiệp
Khi bạn chia sẻ một dự án đang thực hiện với khách hàng hoặc đồng nghiệp, việc gửi cho họ một liên kết gây ra cảnh báo bảo mật lớn không truyền cảm hứng tin cậy.
Một URL HTTPS hợp lệ trông chuyên nghiệp và hoạt động trơn tru.
Phương pháp 1: Cách khó khăn — Tạo chứng chỉ tự ký
Một trong những cách phổ biến nhất để bật HTTPS trên localhost là tạo chứng chỉ SSL tự ký.
Chứng chỉ này được bạn tạo và ký.
Nó không được ký bởi một Tổ chức cấp chứng chỉ (CA) đáng tin cậy như Let’s Encrypt hoặc DigiCert.
Bạn có thể sử dụng một công cụ dòng lệnh như openssl để tạo các tệp khóa và chứng chỉ cần thiết.
# Generate a private key and a self-signed certificate
openssl req -x509 -newkey rsa:2048 -nodes -sha256 -keyout localhost.key -out localhost.crt -days 365 \
-subj "/C=US/ST=California/L=San Francisco/O=MyProject/OU=Dev/CN=localhost"Sau đó, bạn sẽ cấu hình máy chủ web cục bộ của mình (ví dụ: trong Node.js, Python hoặc Apache).
Máy chủ sẽ sử dụng các tệp localhost.key và localhost.crt này để phục vụ lưu lượng truy cập qua HTTPS.
Nhược điểm chính: Các trình duyệt không tin tưởng chứng chỉ tự ký theo mặc định.
Khi bạn truy cập //localhost, bạn sẽ thấy một cảnh báo bảo mật nổi bật.
Cảnh báo này có thể là “Your connection is not private” (NET::ERR_CERT_AUTHORITY_INVALID).
Để khắc phục điều này, bạn phải hướng dẫn thủ công trình duyệt hoặc hệ điều hành của mình tin tưởng chứng chỉ của bạn.
Quá trình này rất rườm rà.
Nó khác nhau giữa các hệ điều hành và trình duyệt.
Bạn cần lặp lại nó cho mỗi dự án mới và trên mỗi thiết bị bạn kiểm tra.
Đây là một sự bất tiện đáng kể và lặp đi lặp lại.
Phương pháp 2: Cách tốt hơn — Sử dụng CA cục bộ với mkcert
Một cách tiếp cận tốt hơn nhiều cho HTTPS chỉ cục bộ là sử dụng một công cụ như mkcert.
Tiện ích thông minh này đơn giản hóa quá trình bằng cách tạo Tổ chức cấp chứng chỉ (CA) cục bộ của riêng bạn.
Quan trọng hơn, nó tự động thêm CA này vào kho lưu trữ tin cậy của hệ thống của bạn.
Đây là cách nó hoạt động:
- Cài đặt
mkcert: Làm theo hướng dẫn cài đặt cho hệ điều hành của bạn. - Tạo CA cục bộ: Chạy
mkcert -install. Lệnh này tạo một CA cục bộ và cấu hình hệ thống cũng như trình duyệt của bạn để tin tưởng nó. Bạn chỉ cần làm điều này một lần. - Tạo chứng chỉ cho localhost: Điều hướng đến thư mục dự án của bạn và chạy
mkcert localhost 127.0.0.1 ::1. Lệnh này tạo một chứng chỉ hợp lệ (localhost-cert.pem) và khóa (localhost-key.pem) cho môi trường cục bộ của bạn. - Cấu hình máy chủ của bạn: Cập nhật cấu hình máy chủ của bạn để sử dụng các tệp mới này.
Phương pháp này là một cải tiến lớn.
Vì CA gốc được hệ thống của bạn tin tưởng, chứng chỉ localhost mà nó tạo ra cũng được tin tưởng.
Bạn sẽ có một biểu tượng ổ khóa màu xanh lá cây trong trình duyệt mà không có cảnh báo nào.
Tuy nhiên, giải pháp này vẫn mang tính cục bộ.
URL HTTPS chỉ có thể truy cập được trên máy của bạn.
Bạn vẫn không thể sử dụng nó để kiểm tra webhooks hoặc dễ dàng chia sẻ công việc của mình với người khác.
Bất kỳ ai bạn chia sẻ dịch vụ của mình (ví dụ: các thành viên còn lại trong nhóm phát triển của bạn) sẽ cần lặp lại quá trình này.
Phương pháp 3: Cách dễ nhất — Nhận URL HTTPS localhost tức thì với Tunnelmole
Điều gì sẽ xảy ra nếu bạn có thể bỏ qua tất cả việc tạo và cấu hình chứng chỉ chỉ bằng một lệnh duy nhất?
Đây là lúc các công cụ tunneling phát huy tác dụng.
Tunnelmole là một lựa chọn mã nguồn mở tuyệt vời.
Tunnelmole hoạt động bằng cách tạo một đường hầm bảo mật từ một URL công khai, có bật HTTPS, đến máy chủ web cục bộ của bạn.
Khi một yêu cầu đến URL công khai, Tunnelmole sẽ chuyển tiếp nó qua đường hầm đến ứng dụng localhost của bạn.
Cách tiếp cận này cung cấp cho bạn một URL HTTPS hợp lệ, được trình duyệt tin cậy.
Bạn không cần phải tạo, ký hoặc quản lý chứng chỉ SSL nào.
Cách sử dụng Tunnelmole
Hãy xem nó đơn giản như thế nào.
Bước 1: Chạy một máy chủ cục bộ
Đầu tiên, đảm bảo ứng dụng web cục bộ của bạn đang chạy.
Trong ví dụ này, chúng tôi sẽ sử dụng một máy chủ Node.js Express cơ bản trên cổng 3000.
// server.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello from my secure localhost server!');
});
app.listen(port, () => {
console.log(`Server running at //localhost:${port}`);
});Cài đặt các phụ thuộc với npm install express.
Sau đó, chạy nó với node server.js.
Bước 2: Cài đặt Tunnelmole
Nếu bạn đã cài đặt Node.js, cách nhanh nhất là qua npm:
sudo npm install -g tunnelmoleNgoài ra, đối với Linux, Mac hoặc WSL, bạn có thể sử dụng script curl:
curl -O //install.tunnelmole.com/xD345/install && sudo bash installBước 3: Chạy Tunnelmole
Bây giờ, mở một terminal mới và chạy một lệnh duy nhất.
Lệnh này sẽ cho Tunnelmole biết máy chủ của bạn đang ở cổng nào:
tmole 3000Trong vài giây, bạn sẽ thấy kết quả như sau:
$ tmole 3000
Your Tunnelmole Public URLs are below and are accessible internet wide. Always use HTTPs for the best security
//cqcu2t-ip-49-185-26-79.tunnelmole.net ⟶ //localhost:3000
//cqcu2t-ip-49-185-26-79.tunnelmole.net ⟶ //localhost:3000Vậy là xong!
Bây giờ bạn có một URL HTTPS localhost công khai, bảo mật.
Nó trỏ an toàn đến máy chủ cục bộ của bạn đang chạy trên //localhost:3000.
Bạn có thể mở URL này trong bất kỳ trình duyệt nào, trên bất kỳ thiết bị nào.
Bạn sẽ thấy ứng dụng của mình chạy với chứng chỉ SSL hợp lệ và biểu tượng ổ khóa đáng tin cậy.
Không có cảnh báo, không có cấu hình.
Tunnelmole hoạt động như thế nào?
Sự kỳ diệu đằng sau Tunnelmole là một kết nối WebSocket liên tục.
Kết nối này được thiết lập giữa client trên máy của bạn và một máy chủ dịch vụ Tunnelmole công khai.
(Hình ảnh về kết nối Tunnelmole sẽ được đặt ở đây, nếu có)
Kết nối: Client tmole trên máy của bạn kết nối với máy chủ Tunnelmole công khai và yêu cầu một URL công khai duy nhất.
Tạo đường hầm: Khi người dùng thực hiện yêu cầu đến URL HTTPS công khai của bạn, máy chủ Tunnelmole sẽ nhận được nó.
Chuyển tiếp: Máy chủ gửi yêu cầu xuống đường hầm bảo mật đến client tmole trên máy của bạn.
Yêu cầu cục bộ: Client sau đó thực hiện một yêu cầu HTTP tiêu chuẩn đến máy chủ cục bộ của bạn (ví dụ: localhost:3000).
Phản hồi: Phản hồi từ máy chủ cục bộ của bạn di chuyển ngược lại theo cùng một đường dẫn đến người dùng.
Tại sao Tunnelmole là một giải pháp vượt trội
Sử dụng Tunnelmole cho HTTPS trên localhost có một số lợi thế rõ rệt:
- Đơn giản tối đa: Nó chỉ là một lệnh. Không có chứng chỉ để quản lý, không có cấu hình máy chủ để chỉnh sửa, và không có kho lưu trữ tin cậy hệ thống để sửa đổi.
- Không cần cấu hình: Nó hoạt động ngay lập tức với bất kỳ máy chủ web cục bộ nào. Điều này không phụ thuộc vào ngôn ngữ hoặc framework bạn đang sử dụng.
- Có thể truy cập công khai: Đây là tính năng nổi bật. Bạn có thể sử dụng URL HTTPS của mình để kiểm tra webhooks từ các dịch vụ như Stripe, Shopify hoặc Slack. Điều này là không thể với một thiết lập hoàn toàn cục bộ.
- Cộng tác dễ dàng: Chia sẻ URL với đồng đội, nhà thiết kế hoặc khách hàng để hiển thị công việc đang thực hiện mà không cần triển khai nó.
- Kiểm tra thiết bị thực: Mở URL trên điện thoại, máy tính bảng hoặc máy tính khác. Điều này giúp kiểm tra trải nghiệm di động và đa trình duyệt một cách chính xác.
- Mã nguồn mở và có thể tự lưu trữ: Niềm tin và bảo mật là tối quan trọng. Tunnelmole hoàn toàn là mã nguồn mở. Bạn có thể tự kiểm tra mã. Để kiểm soát và quyền riêng tư tối đa, bạn cũng có thể tự lưu trữ dịch vụ Tunnelmole trên máy chủ của riêng mình.
Kết luận: Chọn đúng công cụ cho công việc
Bảo mật môi trường phát triển cục bộ của bạn với HTTPS là điều cần thiết cho phát triển web hiện đại.
Mặc dù việc tạo chứng chỉ tự ký là một lựa chọn khả thi nhưng rườm rà.
Các công cụ như mkcert cung cấp một giải pháp tuyệt vời cho công việc chỉ cục bộ.
Tuy nhiên, Tunnelmole cung cấp cách nhanh nhất, linh hoạt nhất và mạnh mẽ nhất để có được URL HTTPS trên localhost.
Nó không chỉ giải quyết vấn đề cấp bách về việc cần một ngữ cảnh bảo mật cho các tính năng của trình duyệt.
Nó còn mở ra một thế giới khả năng bằng cách làm cho máy chủ cục bộ của bạn có thể truy cập an toàn từ internet.
Điều này phục vụ cho việc kiểm tra webhook, cộng tác và gỡ lỗi trên thiết bị thực.
Bằng cách loại bỏ sự phức tạp của chứng chỉ SSL, Tunnelmole cho phép bạn tập trung vào những gì bạn làm tốt nhất: xây dựng các ứng dụng tuyệt vời.
Hãy thử nó cho dự án tiếp theo của bạn.
Trải nghiệm sự đơn giản của HTTPS trên localhost chỉ với một lệnh.
Chúc bạn viết mã vui vẻ (và an toàn)!
Tham khảo: medium.com
Bài viết liên quan: