Base64, קידוד URL וישויות HTML: מה כל מפתח צריך לדעת
כל מי שעובד עם פיתוח ווב נתקל בבעיות קידוד. URL שנשבר בגלל & לא במקום. דף HTML שמציג < כתו רגיל במקום לפתוח תגית. API שמחזיר SGVsbG8gV29ybGQ= בלי שום הסבר. אלו כולן בעיות קידוד, ושלושה מנגנונים מופיעים שוב ושוב יותר מכולם: Base64, קידוד URL וישויות HTML.
המדריך הזה מסביר איך כל אחד עובד, מראה דוגמאות קונקרטיות, ומפנה לכלים שמאפשרים לקודד ולפענח מיד — בלי התקנה.
מה זה Base64?
Base64 הוא שיטה לייצוג נתונים בינאריים באמצעות תווי ASCII ניתנים להדפסה בלבד. הוא ממיר כל רצף של בייטים לאלפבית של 64 תווים: A–Z, a–z, 0–9, + ו-/. הפלט הוא תמיד טקסט, מה שהופך אותו לבטוח לשימוש בהקשרים שלא מתמודדים עם נתונים בינאריים גולמיים — קבצים מצורפים לאימייל, JSON payloads, כתובות data: ב-CSS, וטוקנים של JWT כולם מסתמכים על Base64.
דוגמה — קידוד "Hello World" ב-Base64:
- קלט:
Hello World - פלט Base64:
SGVsbG8gV29ybGQ=
סימני ה-= בסוף הם padding. Base64 מייצר פלט שאורכו תמיד כפולה של 4.
מתי להשתמש:
- הטמעת תמונות או פונטים ישירות ב-CSS או HTML (
data:image/png;base64,...) - קידוד נתונים בינאריים עבור JSON APIs שמקבלים טקסט בלבד
- קריאה או יצירת JWT tokens (ה-header וה-payload מקודדים ב-Base64url)
Base64 אינו הצפנה. כל מי שרואה את המחרוזת יכול לפענח אותה תוך שניות. השתמשו בו לקידוד, לא להסתרת מידע.
נסו את כלי ה-Base64 encode decode של FileCrank.
מה זה קידוד URL (Percent Encoding)?
כתובות URL יכולות להכיל רק קבוצה מוגבלת של תווים בצורה בטוחה. רווחים, &, =, /, ותווים שאינם ASCII נושאים משמעות מבנית ב-URL — או פשוט לא חוקיים. קידוד URL (הנקרא רשמית percent encoding) מחליף תווים לא-בטוחים ב-% ואחריו שני ספרות הקסדצימליות המייצגות את ערך הבייט ב-UTF-8.
דוגמה — קידוד URL של "Hello World":
- קלט:
Hello World - פלט מקודד:
Hello%20World
הרווח הופך ל-%20. & הופך ל-%26. / הופך ל-%2F.
מתי להשתמש:
- בניית query strings:
?q=hello%20world&lang=he - העברת תווים מיוחדים בנתוני טפסים
- בניית בקשות API שמכילות קלט ממשתמשים
JavaScript מודרני מספק encodeURIComponent() לכך, אך כשצריך לבדוק או לדבג URL מקודד, כלי אונליין מהיר הרבה יותר מפתיחת קונסול.
השתמשו בכלי קידוד ופענוח URL של FileCrank.
מה הן ישויות HTML?
HTML משתמש בתווים מסוימים כחלק מהתחביר שלו. הסוגריים הזוויתיים < ו-> מגדירים תגיות, & פותח הפניית ישות, וסימן הגרשיים הכפולים " מגדיר ערכי מאפיינים. אם התוכן שלכם מכיל את התווים האלה באופן מילולי — למשל, להציג קוד מקור בדף — חובה לבצע escape כדי שהדפדפן לא יפרש אותם כ-markup.
ישויות HTML מחליפות את התווים האלה בהפניות עם שם או מספריות:
דוגמה — הצגת תגית HTML כטקסט:
כדי להציג את המחרוזת <h1>Hello World</h1> כטקסט בדף, כותבים:
<h1>Hello World</h1>
מתי להשתמש:
- הצגת דוגמאות קוד בתיעוד או בפוסטים
- מניעת XSS על ידי escape לקלט משתמש לפני הכנסתו ל-HTML
- הכנסת סימנים טיפוגרפיים (
—,©, )
השתמשו בכלי ישויות HTML של FileCrank לביצוע escape ו-unescape תוך שניות.
השוואה בין שלושת השיטות
אותו קלט, מעובד על ידי כל שיטה:
כל שיטה פותרת בעיה שונה ואי אפשר להחליף ביניהן:
- Base64: ממיר נתונים בינאריים לטקסט. השתמשו בו כשצריך להטמיע נתונים בינאריים בהקשר טקסטואלי בלבד.
- קידוד URL: מטפל בתווים שאינם חוקיים או לא חד-משמעיים ב-URL. השתמשו בו בבניית URLs או query strings.
- ישויות HTML: מטפל בתווים ש-HTML שומר לעצמו. השתמשו בהן בהוצאת טקסט בתוך מסמכי HTML.
טעויות נפוצות
טעות 1: שימוש ב-Base64 לאבטחה. הפלט של Base64 נראה כמו ג'יבריש, אך הוא הפיך לגמרי. אל תשתמשו בו ל"הסתרת" סיסמאות או טוקנים. השתמשו בהצפנה או hashing מתאימים.
טעות 2: קידוד URL כפול.
קריאה ל-encodeURIComponent() על מחרוזת שכבר מקודדת מייצרת %2520 במקום %20. פענחו קודם, ואז קודדו.
טעות 3: שכחת escape ל-HTML בתבניות. הכנסת נתוני משתמש ישירות ל-HTML ללא escape היא הסיבה הנפוצה ביותר לפגיעויות XSS. בצעו escape תמיד לפני הרינדור.
נסו את הכלים
שלושת הכלים חינמיים לחלוטין, רצים בדפדפן, ואינם דורשים הרשמה:
שמרו אותם בסימניות. תשתמשו לפחות באחד מהם כל שבוע.