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

Maud Nalpas

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

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

להוראות קצרות, אפשר לעיין במדריך המהיר של mkcert.**

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

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

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

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

הגדרה

  1. מתקינים את mkcert (פעם אחת בלבד).

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

    brew install mkcert
brew install nss # if you use Firefox

  2. מוסיפים את mkcert לרשויות האישורים המקומיות ברמה הבסיסית (root).

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

    mkcert -install

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

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

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

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

    mkcert localhost

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

    mkcert mysite.example

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

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

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

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

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

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

    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"

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

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

הסבר קצר על mkcert

הסבר קצר על mkcert

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

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

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

    brew install mkcert

    במאמר install mkcert מוסבר איך להתקין את mkcert ב-Windows וב-Linux.

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

    mkcert -install

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

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

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

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

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

</div>

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

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

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

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

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

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

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

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

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

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

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

  • יש יותר עבודת הגדרה מאשר בשימוש בטכניקת CA מקומית כמו mkcert.
  • אתם צריכים להשתמש בשם דומיין תקין שנמצא בשליטתכם. כלומר, אי אפשר להשתמש ברשויות אישורים רשמיות למטרות הבאות:

שרת proxy הפוך

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

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

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

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

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

הקודם
מתי כדאי להשתמש ב-HTTPS לפיתוח מקומי