שימוש ב-HTTPS לפיתוח מקומי

Maud Nalpas

ברוב המקרים, http://localhost מתנהג כמו HTTPS למטרות פיתוח. עם זאת, יש מקרים מיוחדים, כמו שמות מארחים מותאמים אישית או שימוש בקובצי Cookie מאובטחים בדפדפנים שונים, שבהם צריך להגדיר במפורש את אתר הפיתוח כך שיתנהג כמו HTTPS כדי לייצג בצורה מדויקת את אופן הפעולה של האתר בסביבת הייצור. (אם אתר הייצור שלכם לא משתמש ב-HTTPS, חשוב לעבור ל-HTTPS בהקדם האפשרי).

בדף הזה מוסבר איך להריץ את האתר באופן מקומי באמצעות HTTPS.

הערה: בפוסט הזה, ההצהרות לגבי localhost תקפות גם לגבי 127.0.0.1 וגם לגבי [::1], כי שתיהן מתארות את כתובת המחשב המקומי (שנקראת גם כתובת לולאה חוזרת). כדי לפשט את ההוראות, לא מצוינים בהן מספרי יציאות. לכן, כשרואים את הסמל http://localhost, צריך לקרוא אותו כhttp://localhost:{PORT} או כhttp://127.0.0.1:{PORT}.

הוראות קצרות מופיעות במאמר mkcert quick reference.**

הפעלת האתר באופן מקומי עם HTTPS באמצעות mkcert (מומלץ)

כדי להשתמש ב-HTTPS באתר הפיתוח המקומי ולגשת אל https://localhost או אל https://mysite.example (שם מארח מותאם אישית), צריך אישור TLS שחתום על ידי גורם שהמכשיר והדפדפן שלכם מהימנים עליו, שנקרא רשות אישורים (CA) מהימנה. לפני יצירת חיבור HTTPS, הדפדפן בודק אם האישור של שרת הפיתוח נחתם על ידי רשות אישורים מהימנה.

מומלץ להשתמש ב-mkcert, רשות אישורים בפלטפורמות שונות, כדי ליצור ולחתום על האישור. אפשרויות מועילות נוספות זמינות במאמר הפעלת האתר באופן מקומי באמצעות HTTPS: אפשרויות אחרות.

מערכות הפעלה רבות כוללות ספריות ליצירת אישורים, כמו openssl. עם זאת, הם מורכבים יותר ופחות אמינים מ-mkcert, ולא בהכרח בפלטפורמות שונות, ולכן הם פחות נגישים לצוותי פיתוח גדולים.

זהירות:

• אף פעם אל תייצאו או תשתפו את הקובץ rootCA-key.pem שנוצר אוטומטית על ידי mkcert כשמריצים את mkcert -install. אם תוקף ישיג את הקובץ הזה, הוא יוכל ליצור מתקפות בנתיב לכל אתר שבו תבקרו. הם יכולים ליירט בקשות מאובטחות מהמחשב שלכם לכל אתר – הבנק, ספק שירותים רפואיים או הרשתות החברתיות. אם אתם צריכים לדעת איפה נמצא rootCA-key.pem כדי לוודא שהוא בטוח, מריצים את mkcert -CAROOT.
• השתמשו ב-mkcert רק למטרות פיתוח, ומכאן שאל תבקשו אף פעם ממשתמשי קצה להריץ פקודות mkcert.
• צוותי פיתוח: כל חברי הצוות צריכים להתקין ולהריץ את mkcert בנפרד (לא לאחסן ולשתף את רשות האישורים והאישור).

הגדרה

1. מתקינים את mkcert (רק פעם אחת).

   פועלים לפי ההוראות להתקנת mkcert במערכת ההפעלה. לדוגמה, ב-macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. מוסיפים את mkcert לרשויות האישורים המקומיות שלכם.

   במסוף, מריצים את הפקודה הבאה:

   mkcert -install
   

   הפעולה הזו יוצרת רשות אישורים (CA) מקומית. ה-CA המקומי שנוצר על ידי mkcert מהימן רק באופן מקומי, במכשיר שלכם.

3. יוצרים אישור לאתר, חתום על ידי mkcert.

   במסוף, עוברים לתיקיית השורש של האתר או לתיקייה שבה רוצים לשמור את האישור.

   לאחר מכן, מריצים את הפקודה:

   mkcert localhost
   

   אם משתמשים בשם מארח בהתאמה אישית כמו mysite.example, מריצים את הפקודה:

   mkcert mysite.example
   

   הפקודה הזו מבצעת שתי פעולות:

   • המערכת יוצרת אישור לשם המארח שציינתם.
   • מאפשרים ל-mkcert לחתום על האישור.

   האישור מוכן עכשיו וחתום על ידי רשות אישורים שהדפדפן שלכם סומך עליה באופן מקומי.

4. מגדירים את השרת כך שישתמש ב-HTTPS באישור ה-TLS שיצרתם.

   הפרטים של אופן ההגדרה תלויים בשרת. הנה כמה דוגמאות:

   👩🏻‍💻 באמצעות צומת:

   ‫server.js (החלפה של {PATH/TO/CERTIFICATE...} ו-{PORT}):

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   👩🏻‍💻 באמצעות http-server:

   מפעילים את השרת באופן הבא (מחליפים את {PATH/TO/CERTIFICATE...}):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   ‫-S מפעיל את השרת עם HTTPS, ‏ -C מגדיר את האישור ו--K מגדיר את המפתח.

   👩🏻‍💻 עם שרת פיתוח של React:

   עורכים את package.json באופן הבא ומחליפים את {PATH/TO/CERTIFICATE...}:

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   לדוגמה, אם יצרתם אישור ל-localhost בספריית הבסיס של האתר:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   הסקריפט start אמור להיראות כך:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 דוגמאות נוספות:

   • שרת פיתוח של Angular
   • Python

5. פותחים את https://localhost או https://mysite.example בדפדפן כדי לוודא שהאתר פועל באופן מקומי עם HTTPS. לא יוצגו אזהרות בדפדפן, כי הדפדפן סומך על mkcert כרשות אישורים מקומית.

הסבר מהיר על mkcert

הסבר מהיר על mkcert

כדי להפעיל את אתר הפיתוח המקומי עם HTTPS:

1. מגדירים את mkcert.

   אם עדיין לא עשיתם זאת, מתקינים את mkcert, לדוגמה ב-macOS:

   brew install mkcert
   
   
   

   הוראות ל-Windows ול-Linux זמינות במאמר install mkcert.

   לאחר מכן, יוצרים רשות אישורים מקומית:

   mkcert -install

2. יוצרים אישור מהימן.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   כך נוצר אישור תקף ש-mkcert חותם עליו באופן אוטומטי.

3. מגדירים את שרת הפיתוח כך שישתמש ב-HTTPS ובאישור שיצרתם בשלב 2.

עכשיו אפשר לגשת אל https://{YOUR HOSTNAME} בדפדפן בלי אזהרות

זהירות: צריך לעשות את זה רק למטרות פיתוח ואף פעם לא לייצא או לשתף את הקובץ rootCA-key.pem. אם אתם צריכים לדעת איפה הקובץ הזה נמצא כדי לוודא שהוא בטוח, מריצים את הפקודה mkcert -CAROOT.

</div>

הפעלת האתר באופן מקומי באמצעות HTTPS: אפשרויות אחרות

אלה דרכים נוספות להגדרת האישור. בדרך כלל, התהליכים האלה מסובכים יותר או מסוכנים יותר משימוש ב-mkcert.

אישור בחתימה עצמית

אפשר גם להחליט לא להשתמש ברשות אישורים מקומית כמו mkcert, ובמקום זאת לחתום על האישור בעצמכם. יש כמה חסרונות לגישה הזו:

• הדפדפנים לא סומכים עליכם כרשות אישורים, ולכן הם יציגו אזהרות שתצטרכו לעקוף באופן ידני. ב-Chrome, אפשר להשתמש בדגל #allow-insecure-localhost כדי לעקוף את האזהרה הזו באופן אוטומטי ב-localhost.
• הפעולה הזו לא בטוחה אם אתם עובדים ברשת לא מאובטחת.
• השימוש ב-cert-manager לא בהכרח קל או מהיר יותר מהשימוש ברשות אישורים מקומית כמו mkcert.
• אישורים עם חתימה עצמית לא יתנהגו בדיוק כמו אישורים מהימנים.
• אם אתם לא משתמשים בטכניקה הזו בהקשר של דפדפן, אתם צריכים להשבית את אימות האישור בשרת. אם שוכחים להפעיל אותו מחדש בסביבת הייצור, עלולות להיווצר בעיות אבטחה.

האזהרות שמוצגות בדפדפנים כשמשתמשים באישור בחתימה עצמית.

אם לא מציינים אישור, אפשרויות ה-HTTPS של שרת הפיתוח של React ושל Vue יוצרות אישור בחתימה עצמית מאחורי הקלעים. התהליך הזה מהיר, אבל הוא כולל את אותן אזהרות בדפדפן ובעיות אחרות שקשורות לאישורים בחתימה עצמית. למזלכם, אתם יכולים להשתמש באפשרות המובנית של HTTPS במסגרות frontend ולציין אישור מהימן מקומי שנוצר באמצעות mkcert או כלי דומה. מידע נוסף זמין בדוגמה mkcert עם React.

למה דפדפנים לא נותנים אמון באישורים בחתימה עצמית?

אם פותחים את האתר שפועל באופן מקומי בדפדפן באמצעות HTTPS, הדפדפן בודק את האישור של שרת הפיתוח המקומי. כשהמערכת מזהה שחתמתם בעצמכם על האישור, היא בודקת אם אתם רשומים כרשות אישורים מהימנה. אם לא, הדפדפן לא יכול לסמוך על האישור, ומוצגת אזהרה שהחיבור לא מאובטח. החיבור ל-HTTPS עדיין ייווצר אם תמשיכו, אבל תעשו זאת על אחריותכם בלבד.

למה דפדפנים לא נותנים אמון באישורים בחתימה עצמית

אישור שחתום על ידי רשות אישורים רגילה

אפשר גם להשתמש בתעודה שחתום על ידי הרשות שמנפיקה את האישורים (CA) רשמית. התכונות הנוספות האלה זמינות:

• יש לכם יותר עבודת הגדרה לעשות מאשר כשמשתמשים בטכניקת CA מקומית כמו mkcert.
• צריך להשתמש בשם דומיין תקין שנמצא בשליטתכם. המשמעות היא שאי אפשר להשתמש ברשויות אישורים רשמיות למטרות הבאות:
  • ‫localhost ושמות דומיינים שמורים אחרים כמו example או test.
  • כל שם דומיין שאין לכם שליטה בו.
  • דומיינים לא חוקיים ברמה העליונה. מידע נוסף זמין ברשימת הדומיינים התקינים ברמה העליונה.

שרת proxy הפוך

אפשרות נוספת לגשת לאתר שפועל באופן מקומי באמצעות HTTPS היא שימוש בשרת proxy הפוך כמו ngrok. הסיכונים שקשורים לכך:

• כל מי ששיתפתם איתו את כתובת ה-URL של ה-reverse proxy יכול לגשת לאתר הפיתוח המקומי שלכם. האפשרות הזו יכולה להיות שימושית כשמציגים את הפרויקט ללקוחות, אבל היא גם יכולה לאפשר לאנשים לא מורשים לשתף מידע רגיש.
• חלק משירותי ה-reverse proxy גובים תשלום על השימוש, ולכן התמחור עשוי להיות גורם בבחירת השירות.
• אמצעי אבטחה חדשים בדפדפנים יכולים להשפיע על אופן הפעולה של הכלים האלה.

סימון (לא מומלץ)

אם אתם משתמשים בשם מארח מותאם אישית כמו mysite.example ב-Chrome, אתם יכולים להשתמש בדגל כדי לחייב את הדפדפן להתייחס אל mysite.example כאל מאובטח. לא מומלץ לעשות את זה מהסיבות הבאות:

• צריך לוודא ש-mysite.example תמיד מפנה לכתובת מקומית. אחרת, אתם עלולים לחשוף פרטי כניסה של סביבת הייצור.
• הדגל הזה פועל רק ב-Chrome, כך שאי אפשר לבצע ניפוי באגים בדפדפנים שונים.

תודה רבה על התרומות והמשוב לכל הבודקים והתורמים – במיוחד ל-Ryan Sleevi,‏ Filippo Valsorda, ‏ Milica Mihajlija ו-Rowan Merewood. 🙌

רקע של תמונה ראשית (Hero) מאת ‎@anandu ב-Unsplash, נערך.