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

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

Maud Nalpas

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

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

להוראות קצרות, ראו מידע מהיר על mkcert.**

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

הגדרה

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

מידע מהיר על Mkcert

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

הגדרת mkcert.

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

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

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

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

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

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

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

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

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

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

היפוך שרת proxy

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

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

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

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

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

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

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