Cách sử dụng SSL trong ứng dụng Create-React-App
Lớp cổng bảo mật (SSL) là một giao thức bảo mật thiết lập liên kết an toàn giữa máy chủ và máy khách. Nó là một phần của giao thức HTTPS thực hiện mã hóa dữ liệu. SSL rất quan trọng vì nó bảo vệ dữ liệu khỏi bị nghe trộm và các cuộc tấn công liên quan.
Theo mặc định, nếu bạn tạo ứng dụng React bằng create-react-app, thì ứng dụng đó sẽ không sử dụng HTTPS. Việc bật HTTPS cho ứng dụng của bạn rất hữu ích, đặc biệt nếu bạn định gửi các yêu cầu proxy tới một API phân phối chúng qua HTTPS.
Mục Lục
Sử dụng HTTPS trong React
Khi bạn tạo một ứng dụng bằng cách sử dụng create-react-app, nó sẽ chạy trên HTTP theo mặc định. Để sử dụng SSL và cung cấp các trang qua HTTPS, bạn sẽ cần đặt HTTPS biến thành true trong package.json. Làm như vậy bằng cách sửa đổi scripts.start giá trị trông như thế này:
"scripts": {
"start": "HTTPS=true react-scripts start",
},
Ngoài ra, bạn có thể đặt HTTPS biến môi trường thành true khi bạn khởi động ứng dụng của mình.
Trên Linux / macOS:
HTTPS=true npm start
Trên Windows cmd:
set HTTPS=true&&npm start
Trên Windows Powershell:
($env:HTTPS = "true") -and (npm start)
Tuy nhiên, mỗi cách tiếp cận chỉ là bước đầu tiên. Nếu bạn thử khởi động ứng dụng React của mình tại thời điểm này, bạn sẽ gặp lỗi. Để hoàn tất quá trình, bạn cần thiết lập chứng chỉ SSL hợp lệ.
Tạo Tổ chức phát hành chứng chỉ trên máy của bạn
Một trong những công cụ bạn có thể sử dụng để tạo chứng chỉ SSL là mkcert. Nó cho phép bạn tạo các chứng chỉ phát triển được kiểm tra cục bộ mà không cần cấu hình bất cứ thứ gì.
Nó tương thích đa nền tảng và hoạt động trên Windows, Linux và macOS. Bài viết này sử dụng Linux.
Tìm hướng dẫn cài đặt của nền tảng bạn đang sử dụng từ trang mkcert GitHub.
Bắt đầu bằng cách cài đặt chắc chắn.
sudo apt install libnss3-tools
Sau đó, bạn có thể cài đặt mkcert sử dụng Homebrew
brew install mkcert
Tạo một tổ chức phát hành chứng chỉ cục bộ (Ca) bằng cách chạy lệnh sau.
mkcert -install
Sau khi CA được tạo thành công, bây giờ bạn có thể bắt đầu tạo chứng chỉ SSL.
Tạo chứng chỉ SSL
Điều hướng đến thư mục gốc của ứng dụng React của bạn và tạo chứng chỉ SSL.
Đầu tiên, tạo một thư mục cho chứng chỉ.
mkdir reactcert
Chạy phần sau để tạo chứng chỉ và lưu trữ trong thư mục bạn vừa tạo.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "localhost"
Định cấu hình React để sử dụng SSL
Trong package.json, thêm đường dẫn trỏ đến chứng chỉ SSL.
"scripts": {
"start":
"HTTPS=true SSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem react-scripts start"
}
Bảo mật trang web React của bạn bằng SSL
Bài viết này đã chỉ cho bạn cách bạn có thể sử dụng chứng chỉ SSL trong môi trường React cục bộ. Tuy nhiên, chứng chỉ SSL rất cần thiết cho tất cả các ứng dụng web. Chúng bảo vệ trang web của bạn khỏi tin tặc và bảo vệ dữ liệu của những người dùng truy cập trang web của bạn.