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

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

אפשר גם לעיין במאמר איך משתמשים ב-HTTPS לפיתוח מקומי.

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

סיכום

בפיתוח מקומי, משתמשים ב-http://localhost כברירת מחדל. התכונות Service Workers,‏ Web Authentication API ועוד יפעלו. עם זאת, במקרים הבאים תצטרכו להשתמש ב-HTTPS לפיתוח מקומי:

  • ניפוי באגים בבעיות של תוכן מעורב
  • שימוש ב-HTTP/2 ואילך
  • שימוש בספריות או בממשקי API של צד שלישי שנדרש עבורם HTTPS
  • שימוש בשם מארח מותאם אישית

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

✨ זה כל מה שצריך לדעת. פרטים נוספים מופיעים בהמשך.

למה אתר הפיתוח צריך להתנהל בצורה מאובטחת

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

שימוש ב-http://localhost כברירת מחדל

הדפדפנים מטפלים ב-http://localhost בצורה מיוחדת: למרות שזה HTTP, הוא מתנהג ברוב המקרים כמו אתר HTTPS.

ב-http://localhost, יש תמיכה ב-Service Workers, בממשקי API של חיישנים, בממשקי API של אימות, בתשלומים ובתכונות אחרות שנדרשות להן ערבויות אבטחה מסוימות, והן מתנהגות בדיוק כמו באתר HTTPS.

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

יכול להיות שתיתקלו במקרים מיוחדים שבהם http://localhost לא מתנהג כמו אתר HTTPS – או שפשוט תרצו להשתמש בשם אתר מותאם אישית שאינו http://localhost.

צריך להשתמש ב-HTTPS לפיתוח מקומי במקרים הבאים:

  • אתם צריכים לנפות באגים באופן מקומי בבעיה שמתרחשת רק באתר HTTPS ולא באתר HTTP, ואפילו לא ב-http://localhost, כמו בעיה של תוכן מעורב.
  • צריך לבדוק באופן מקומי או לשחזר התנהגות שספציפית ל-HTTP/2 או לגרסה חדשה יותר. לדוגמה, אם אתם צריכים לבדוק את ביצועי הטעינה ב-HTTP/2 או בגרסה חדשה יותר. אין תמיכה ב-HTTP/2 לא מאובטח או בגרסאות חדשות יותר, גם לא ב-localhost.
  • צריך לבדוק באופן מקומי ספריות או ממשקי API של צד שלישי שדורשים HTTPS (לדוגמה, OAuth).
  • אתם לא משתמשים ב-localhost, אלא בשם מארח מותאם אישית לפיתוח מקומי, למשל mysite.example. בדרך כלל, המשמעות היא שביטלתם את קובץ המארחים המקומי:

    צילום מסך של מסוף שבו עורכים קובץ hosts
    עריכת קובץ hosts כדי להוסיף שם מארח מותאם אישית.

    במקרה כזה, דפדפני Chrome,‏ Edge,‏ Safari ו-Firefox לא מחשיבים את mysite.example כאתר מאובטח כברירת מחדל, למרות שמדובר באתר מקומי. לכן הוא לא יתנהג כמו אתר HTTPS.

  • מקרים אחרים! זו לא רשימה מלאה, אבל אם נתקלתם במקרה שלא מופיע כאן, תדעו: דברים לא יעבדו ב-http://localhost, או שההתנהגות של האתר לא תהיה בדיוק כמו באתר הפרודקשן. 🙃

בכל המקרים האלה, צריך להשתמש ב-HTTPS לפיתוח מקומי.

איך משתמשים ב-HTTPS בפיתוח מקומי

אם אתם צריכים להשתמש ב-HTTPS לפיתוח מקומי, כדאי לעבור אל איך משתמשים ב-HTTPS לפיתוח מקומי.

טיפים לשימוש בשם מארח בהתאמה אישית

אם אתם משתמשים בשם מארח מותאם אישית, למשל, עורכים את קובץ המארחים:

  • אל תשתמשו בשם מארח ללא סיומת כמו mysite, כי אם יש דומיין ברמה העליונה (TLD) עם אותו שם (mysite), תיתקלו בבעיות. זה לא כל כך נדיר: בשנת 2020 היו יותר מ-1,500 TLD, והרשימה ממשיכה לגדול. ‫coffee, ‏museum, ‏travel ושמות של חברות גדולות רבות (אולי אפילו החברה שאתם עובדים בה!) הם דומיינים ברמה העליונה. הרשימה המלאה זמינה כאן.
  • חשוב להשתמש רק בדומיינים שבבעלותכם או בדומיינים ששמורים למטרה הזו. אם אין לכם דומיין משלכם, אתם יכולים להשתמש ב-test או ב-localhost (mysite.localhost). אין טיפול מיוחד ב-test בדפדפנים, אבל יש טיפול מיוחד ב-localhost: דפדפני Chrome ו-Edge תומכים ב-http://<name>.localhost מחוץ לקופסה, והוא יתנהג בצורה מאובטחת כמו localhost. כדאי לנסות: מריצים אתר כלשהו ב-localhost וניגשים אל http://<whatever name you like>.localhost:<your port> ב-Chrome או ב-Edge. יכול להיות שבקרוב תהיה אפשרות כזו גם ב-Firefox וב-Safari. הסיבה לכך שאפשר לעשות את זה (להשתמש בתת-דומיינים כמו mysite.localhost) היא ש-localhost הוא לא רק שם מארח: הוא גם TLD מלא, כמו com.

מידע נוסף

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

תמונה ראשית (Hero) מאת @moses_lee ב-Unsplash, נערכה.