Secure Sockets Layer (SSL) הוא פרוטוקול אבטחה שיוצר קישור מאובטח בין שרת ללקוח. זה חלק מפרוטוקול HTTPS שמבצע הצפנת נתונים. SSL חשוב מכיוון שהוא מגן על נתונים מפני האזנות והתקפות קשורות.
כברירת מחדל, אם אתה יוצר אפליקציית React באמצעות create-react-app, האפליקציה לא משתמשת ב-HTTPS. הפעלת HTTPS עבור האפליקציה שלך שימושית במיוחד אם אתה מתכנן להעביר בקשות פרוקסי ל-API שמשרת אותן באמצעות HTTPS.
שימוש ב-HTTPS ב-React
כאשר אתה ליצור אפליקציה באמצעות create-react-app, הוא פועל על HTTP כברירת מחדל. כדי להשתמש ב-SSL ולהגיש דפים באמצעות HTTPS, תצטרך להגדיר את HTTPS משתנה לאמיתי ב package.json. עשה זאת על ידי שינוי ה- scripts.start ערך להיראות כך:
"סקריפטים": {
"התחל": "HTTPS=נָכוֹן מתחילים תסריטי תגובה",
},
לחלופין, אתה יכול להגדיר את HTTPS משתנה הסביבה ל-true כאשר אתה מפעיל את האפליקציה שלך.
ב-Linux/macOS:
HTTPS=נָכוֹן התחלה של npm
ב-cmd של Windows:
מַעֲרֶכֶת HTTPS=נָכוֹן&&npm הַתחָלָה
ב-Windows Powershell:
($env: HTTPS = "נָכוֹן") -ו (התחלה של npm)
עם זאת, כל גישה היא רק הצעד הראשון. אם תנסה להפעיל את אפליקציית React שלך בשלב זה, תקבל שגיאה. כדי להשלים את התהליך, תצטרך להגדיר תקף תעודת SSL.
צור רשות אישורים במחשב שלך
אחד הכלים שבהם אתה יכול להשתמש כדי ליצור אישור SSL הוא mkcert. זה מאפשר לך ליצור אישורי פיתוח שנבדקו מקומית מבלי להגדיר שום דבר.
זה תואם בין פלטפורמות ועובד על Windows, Linux ו-macOS. מאמר זה משתמש בלינוקס.
מצא את מדריך ההתקנה של הפלטפורמה שבה אתה משתמש מה- דף mkcert GitHub.
התחל בהתקנה certutil.
sudo apt להתקין libnss3-tools
אז אתה יכול להתקין mkcert באמצעות Homebrew
לְהִתְבַּשֵׁל להתקין mkcert
צור רשות אישורים מקומית (Ca) על ידי הפעלת הפקודה הבאה.
mkcert -להתקין
לאחר יצירת ה-CA בהצלחה, כעת תוכל להתחיל ביצירת תעודות SSL.
צור תעודת SSL
נווט אל תיקיית השורש של אפליקציית React שלך והפק אישור SSL.
ראשית, צור תיקיה עבור האישור.
mkdir reactcert
הפעל את הפעולות הבאות כדי ליצור את האישור ולאחסן אותו בתיקייה שיצרת זה עתה.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "מארח מקומי"
הגדר את React לשימוש ב-SSL
ב-package.json, הוסף נתיב המפנה לאישורי SSL.
"סקריפטים": {
"הַתחָלָה":
"HTTPS=נָכוֹןSSL_CRT_FILE=./reactcert/cert.pem SSL_KEY_FILE=./reactcert/key.pem מתחילים תסריטי תגובה"
}
אבטח את אתר React שלך באמצעות SSL
מאמר זה הראה לך כיצד אתה יכול להשתמש בתעודות SSL בסביבה מקומית של React. עם זאת, אישורי SSL חיוניים עבור כל יישומי האינטרנט. הם מגנים על האתר שלך מפני האקרים ומגנים על הנתונים של המשתמשים המבקרים באתר שלך.