דף זה תורגם על ידי Cloud Translation API.

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

Maud Nalpas

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

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

להוראות קצרות, אפשר לעיין במאמר 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 בנפרד (לא לאחסן ולשתף את רשות האישור ואת האישור).

הגדרה

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

פועלים לפי ההוראות להתקנת mkcert במערכת ההפעלה. לדוגמה, ב-macOS:
```
brew install mkcert
brew install nss # if you use Firefox
```
מוסיפים mkcert לרשויות ה-CA המקומיות ברמה הבסיסית.

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

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

לאחר מכן, מריצים את הפקודה:
```
mkcert localhost
```
אם משתמשים בשם מארח מותאם אישית כמו mysite.example, מריצים את הפקודה:
```
mkcert mysite.example
```
הפקודה הזו מבצעת שתי פעולות:
- יצירת אישור עבור שם המארח שציינתם.
- מאפשרים ל-mkcert לחתום על האישור.
האישור מוכן עכשיו וחתום על ידי רשות אישורים שהדפדפן שלכם סומך עליה באופן מקומי.
מגדירים את השרת כך שישתמש ב-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
כדי לוודא שהאתר פועל באופן מקומי עם HTTPS, פותחים את https://localhost או את https://mysite.example בדפדפן. לא יופיעו התראות בדפדפן כי הדפדפן סומך על mkcert כסמכות אישורים מקומית.

מדריך למתחילים בנושא mkcert

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

מגדירים את mkcert.

אם עדיין לא עשיתם זאת, מתקינים את mkcert. לדוגמה, ב-macOS:
```
brew install mkcert
```
הוראות ל-Windows ול-Linux זמינות במאמר install mkcert.

לאחר מכן, יוצרים רשות אישורים מקומית:
```
mkcert -install
```
יוצרים אישור מהימן.
```
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
```
הפקודה הזו יוצרת אישור תקף ש-mkcert חותם עליו באופן אוטומטי.
מגדירים את שרת הפיתוח כך שישתמש ב-HTTPS ובאישור שיצרתם בשלב 2.

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

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

</div>

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

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

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

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

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

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

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

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

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

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

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

אפשר גם להשתמש באישור חתום על ידי רשות אישורים רשמית. יש לכך את הבעיות הבאות:

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

שרת proxy הפוך

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

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

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

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

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

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

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