Το Secure Sockets Layer (SSL) είναι ένα πρωτόκολλο ασφαλείας που δημιουργεί μια ασφαλή σύνδεση μεταξύ ενός διακομιστή και ενός πελάτη. Είναι μέρος του πρωτοκόλλου HTTPS που εκτελεί κρυπτογράφηση δεδομένων. Το SSL είναι σημαντικό γιατί προστατεύει τα δεδομένα από υποκλοπές και σχετικές επιθέσεις.
Από προεπιλογή, εάν δημιουργήσετε μια εφαρμογή React χρησιμοποιώντας το create-react-app, η εφαρμογή δεν χρησιμοποιεί HTTPS. Η ενεργοποίηση του HTTPS για την εφαρμογή σας είναι χρήσιμη, ειδικά εάν σκοπεύετε να μεταφέρετε αιτήματα μεσολάβησης σε ένα API που τα εξυπηρετεί μέσω HTTPS.
Χρήση HTTPS στο React
Οταν εσύ δημιουργήστε μια εφαρμογή χρησιμοποιώντας το create-react-app, εκτελείται σε HTTP από προεπιλογή. Για να χρησιμοποιήσετε το SSL και να προβάλετε σελίδες μέσω HTTPS, θα πρέπει να ορίσετε το HTTPS μεταβλητή σε αληθινή σε πακέτο.json. Κάντε το τροποποιώντας το scripts.start αξία να μοιάζει με αυτό:
"σενάρια": {
"έναρξη": "HTTPS=αληθής react-scripts ξεκινούν»,
},
Εναλλακτικά, μπορείτε να ορίσετε το HTTPS μεταβλητή περιβάλλοντος σε true κατά την εκκίνηση της εφαρμογής σας.
Σε Linux/macOS:
HTTPS=αληθής npm έναρξη
Σε cmd των Windows:
σειρά HTTPS=αληθής&&npm αρχή
Στο Windows Powershell:
($env: HTTPS = "αληθής") -και (npm έναρξη)
Ωστόσο, κάθε προσέγγιση είναι μόνο το πρώτο βήμα. Εάν προσπαθήσετε να ξεκινήσετε την εφαρμογή React σε αυτό το σημείο, θα λάβετε ένα σφάλμα. Για να ολοκληρώσετε τη διαδικασία, θα πρέπει να ρυθμίσετε ένα έγκυρο Πιστοποιητικό SSL.
Δημιουργήστε μια Αρχή έκδοσης πιστοποιητικών στο μηχάνημά σας
Ένα από τα εργαλεία που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε ένα πιστοποιητικό SSL είναι το mkcert. Σας επιτρέπει να δημιουργήσετε τοπικά ελεγμένα πιστοποιητικά ανάπτυξης χωρίς να ρυθμίσετε τίποτα.
Είναι συμβατό με πολλαπλές πλατφόρμες και λειτουργεί σε Windows, Linux και macOS. Αυτό το άρθρο χρησιμοποιεί Linux.
Βρείτε τον οδηγό εγκατάστασης της πλατφόρμας που χρησιμοποιείτε από το σελίδα mkcert GitHub.
Ξεκινήστε με την εγκατάσταση certutil.
sudo apt εγκαθιστώ libnss3-εργαλεία
Στη συνέχεια, μπορείτε να εγκαταστήσετε mkcert χρησιμοποιώντας το Homebrew
ετοιμάζω εγκαθιστώ mkcert
Δημιουργήστε μια τοπική αρχή έκδοσης πιστοποιητικών (Ca) εκτελώντας την ακόλουθη εντολή.
mkcert -εγκαθιστώ
Αφού δημιουργηθεί με επιτυχία η ΑΠ, μπορείτε πλέον να ξεκινήσετε τη δημιουργία πιστοποιητικών SSL.
Δημιουργία πιστοποιητικού SSL
Μεταβείτε στον ριζικό φάκελο της εφαρμογής React και δημιουργήστε ένα πιστοποιητικό SSL.
Αρχικά, δημιουργήστε ένα φάκελο για το πιστοποιητικό.
mkdir reactcert
Εκτελέστε τα παρακάτω για να δημιουργήσετε το πιστοποιητικό και να το αποθηκεύσετε στον φάκελο που μόλις δημιουργήσατε.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "localhost"
Διαμόρφωση του React to Use SSL
Στο package.json, προσθέστε μια διαδρομή που οδηγεί στα πιστοποιητικά SSL.
"σενάρια": {
"αρχή":
"HTTPS=αληθήςSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem react-scripts start"
}
Ασφαλίστε τον ιστότοπό σας στο React χρησιμοποιώντας SSL
Αυτό το άρθρο σάς έδειξε πώς μπορείτε να χρησιμοποιήσετε πιστοποιητικά SSL σε τοπικό περιβάλλον React. Ωστόσο, τα πιστοποιητικά SSL είναι απαραίτητα για όλες τις εφαρμογές Ιστού. Προστατεύουν τον ιστότοπό σας από τους χάκερ και προστατεύουν τα δεδομένα των χρηστών που επισκέπτονται τον ιστότοπό σας.