השימוש ב-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 לפיתוח מקומי:
- הגדרה של קובצי cookie מאובטחים באופן עקבי בדפדפנים שונים
- ניפוי באגים כדי לפתור בעיות של תוכן מעורב
- שימוש ב-HTTP/2 ואילך
- שימוש בספריות או בממשקי API של צד שלישי שמחייבים HTTPS
שימוש בשם מארח מותאם אישית
✨ זה כל מה שצריך לדעת. אם רוצים לקבל פרטים נוספים, כדאי להמשיך לקרוא.
מדוע אתר הפיתוח צריך להתנהג באופן מאובטח
כדי להימנע מבעיות בלתי צפויות, כדאי שאתר הפיתוח המקומי שלכם יפעל באופן תקין ככל האפשר, כמו אתר הייצור שלכם. לכן, אם האתר בסביבת הייצור משתמש ב-HTTPS, כדאי שאתר הפיתוח המקומי יפעל כמו אתר HTTPS.
שימוש ב-http://localhost
כברירת מחדל
דפדפנים מתייחסים ל-http://localhost
באופן מיוחד: אף על פי שזה HTTP, הוא מתנהג בעיקר כמו אתר HTTPS.
ב-http://localhost
, קובצי שירות (service worker), ממשקי API של חיישן, ממשקי API לאימות, תשלומים ותכונות אחרות שמחייבות אמצעי אבטחה מסוימים נתמכים ופועלים בדיוק כמו באתר HTTPS.
מתי כדאי להשתמש ב-HTTPS לפיתוח מקומי
ייתכן שתיתקלו במקרים מיוחדים שבהם http://localhost
לא מתנהג כמו אתר HTTPS. לחלופין, יכול להיות שתרצו להשתמש בשם אתר מותאם אישית שאינו http://localhost
.
צריך להשתמש ב-HTTPS לפיתוח מקומי במקרים הבאים:
עליך להגדיר קובץ Cookie באופן מקומי. הוא
Secure
, אוSameSite:none
, או שיש לו את הקידומת__Host
. קובצי cookie מסוגSecure
מוגדרים רק ב-HTTPS, אבל לא ב-http://localhost
בכל הדפדפנים. מאחר שגםSameSite:none
ו-__Host
דורשים שקובץ ה-cookie יהיהSecure
, כדי להגדיר קובצי cookie כאלה באתר הפיתוח המקומי שלך, נדרש גם HTTPS.צריך לנפות באגים באופן מקומי בבעיה שמתרחשת רק באתר HTTPS ולא באתר HTTP, ולא אפילו ב-
http://localhost
, כמו בעיה של תוכן מעורב.יש לבדוק או לשחזר באופן מקומי התנהגות שספציפית ל-HTTP/2 ואילך. לדוגמה, אם אתם צריכים לבדוק את ביצועי הטעינה ב-HTTP/2 ואילך. אין תמיכה ב-HTTP/2 לא מאובטח ואילך, גם לא ב-
localhost
.עליך לבדוק באופן מקומי ספריות או ממשקי API של צד שלישי שדורשים HTTPS (לדוגמה, OAuth).
אינך משתמש ב-
localhost
, אלא בשם מארח מותאם אישית לפיתוח מקומי, לדוגמהmysite.example
. בדרך כלל, המשמעות היא שביטלתם את קובץ האירוח המקומי:במקרה כזה, Chrome, Edge, Safari ו-Firefox כברירת מחדל לא מגדירים את
mysite.example
כאמצעי אבטחה, על אף שזהו אתר מקומי. ולכן הוא לא יפעל כמו אתר HTTPS.מקרים אחרים! הרשימה הזו לא ממצה, אבל אם תיתקלו במקרה שלא רשום כאן, תדעו שהכול יתקלקל ב-
http://localhost
או שלא יפעל כמו אתר הייצור שלכם. 🙃
בכל המקרים האלה צריך להשתמש ב-HTTPS לפיתוח מקומי.
איך משתמשים ב-HTTPS לפיתוח מקומי
אם אתם צריכים להשתמש ב-HTTPS לפיתוח מקומי, עיינו במאמר איך להשתמש ב-HTTPS לפיתוח מקומי.
טיפים לשימוש בשם מארח מותאם אישית
אם משתמשים בשם מארח מותאם אישית, לדוגמה, עריכת קובץ האירוח:
- אין להשתמש בשם מארח בסיסי כמו
mysite
, כי אם יש דומיין ברמה עליונה (TLD) שבמקרה שלו יש את אותו שם (mysite
), תיתקלו בבעיות. והמצב הזה לא סביר: בשנת 2020 יש יותר מ-1,500 דומיינים ברמה העליונה, והרשימה ממשיכה לגדול.coffee
,museum
,travel
והרבה שמות של חברות גדולות (אולי אפילו החברה שבה אתם עובדים!) הם דומיינים ברמה העליונה. הרשימה המלאה זמינה כאן. - השתמשו רק בדומיינים שלכם או ששמורים למטרה הזו. אם אין לך דומיין משלך, ניתן להשתמש ב-
test
או ב-localhost
(mysite.localhost
). ל-test
אין טיפול מיוחד בדפדפנים, אבל ל-localhost
יש תמיכה מובנית ב-http://<name>.localhost
בדפדפנים Chrome ו-Edge. היישום יפעל באופן מאובטח כש-localhost תומך בו באופן מאובטח. כדאי לנסות: אפשר להפעיל כל אתר ב-localhost ולגשת אלhttp://<whatever name you like>.localhost:<your port>
ב-Chrome או ב-Edge. ייתכן שבקרוב ניתן יהיה גם להשתמש ב-Firefox וב-Safari. הסיבה שבגללה אפשר לעשות זאת (עם תת-דומיינים כמוmysite.localhost
) היא ש-localhost
אינו רק שם מארח: הוא גם הדומיין ברמה העליונה (TLD) מלא, כמוcom
.
מידע נוסף
תודה רבה על התוכן והמשוב של כל הכותבים – במיוחד ריאן סלוי, פיליפו ולסורדה, מיליקה מיהג'לייה, רוואן מרווד וג'ייק ארצ'יבלד. 🙌
תמונה ראשית (Hero) מאת @moses_lee ב-UnFlood, נערכה.