קידוד ופענוח URL, מוסבר למפתחים
הקלידו רווח בתוך כתובת URL, או מילה בקירילית, או סימן & ששייך לנתונים שלכם ולא לכתובת עצמה, ומשהו חייב להיכנע. הרשת מבטיחה העברה בטוחה רק לקבוצה קטנה וצפויה של תווי ASCII. כל השאר חייב להיות עטוף בפורמט שנתבים, שרתים ודפדפנים כולם מסכימים עליו. הפורמט הזה נקרא קידוד אחוזים, המוכר יותר בשם קידוד URL, ובעמוד הזה תוכלו להמיר טקסט בשני הכיוונים ישירות בדפדפן שלכם.
מהו קידוד אחוזים בפועל
הכלל מכני וקל לעקוב אחריו. כל תו שאינו יכול להופיע באופן מילולי מוחלף בסימן % ואחריו שתי ספרות הקסדצימליות המציינות את ערך הבית של אותו תו. רווח הופך ל-%20. סימן פלוס הופך ל-%2B. סימן הסולמית הופך ל-%23. כאשר תו ממופה למספר בתים, כפי שרוב הטקסט הלא-ASCII עושה תחת UTF-8, פשוט מקבלים כמה משולשים ברצף: סימן האירו הופך ל-%E2%82%AC. פענוח הופך את התהליך, וקורא כל משולש בחזרה לבית המקורי שלו.
המוסכמה הזו מוגדרת במפרט ה-URI (RFC 3986) והיא משמימה בכוונה. שעמום הוא בדיוק הרעיון. כל לקוח ושרת HTTP תקין בעולם מיישם את אותם הכללים, כך שקישור המקודד נכון במקום אחד מגיע שלם בכל מקום אחר.
למה זה חייב להתקיים
כתובות URL נושאות שני סוגי תווים עם תפקידים שונים מאוד. תווים שמורים כמו /, ?, #, &, = ו-: הם מבניים. הם אומרים לפרסר היכן הנתיב מסתיים והיכן מחרוזת השאילתה מתחילה, או היכן פרמטר אחד נגמר והבא מתחיל. אם הנתונים בפועל שלכם מכילים אחד מהסמלים האלה, הם חייבים להיות מקודדים כדי שהפרסר לא יטעה אותם בפיסוק. מזהה הזמנה כמו A&B/2024 שנופל גולמי לתוך מחרוזת שאילתה ייקרא לא נכון כשני פרמטרים ומקטע נתיב.
ואז יש תווים לא בטוחים ולא-ASCII: רווחים, מרכאות, סוגריים משולשים, אותיות עם סימני הטעמה, אמוג'י, וכל דבר מחוץ לטווח ASCII הרגיל. לאלה אין מה לחפש באופן מילולי בכתובת URL, בין אם משום שהם נפגמים בדרך ובין אם משום שאין להם ייצוג מוגדר. קידוד שלהם שומר על קישורים נקיים וצפויים במקום להשאיר את התוצאה למקרה.
היכן זה מופיע בעבודה אמיתית
מחרוזות שאילתה הן המקרה הקלאסי. כל ערך שאתם מוסיפים ל-?key=... צריך להיות מקודד כדי שקלט משתמש לא יוכל לשבור את המבנה. אותו הדבר חל על שליחת טפסי HTML כ-application/x-www-form-urlencoded, שבו הדפדפן מקודד את ערכי השדות אוטומטית (ולפי מוסכמה היסטורית, הופך רווחים ל-+ במקום ל-%20). תיתקלו בזה גם בעת בניית קישורים לעמודים עם כותרות שאינן בלטינית, בעת בניית בקשות API ידנית, בעת העברת יעדי הפניה כפרמטרים, ובעת ניפוי באגים כשבקשה שנראית תקינה בשורת הכתובת מגיעה משובשת לשרת.
encodeURI לעומת encodeURIComponent
JavaScript מספקת שני מקודדים, ובחירה בטעות ביניהם היא באג נפוץ. ההבדל הוא בהיקף. encodeURIComponent מיועד לפריט נתונים בודד, כמו ערך שאילתה אחד. הוא מקודד כמעט הכל, כולל התווים השמורים /, ?, :, @, &, =, + ו-#. זה בדיוק מה שאתם רוצים כאשר לנתונים מותר להכיל את הסמלים האלה כטקסט רגיל.
encodeURI מיועד לכתובת שלמה שאתם מתכוונים לשמור עליה פעילה. הוא משאיר את התווים המבניים ללא שינוי, כך שהקווים הנטויים, הנקודתיים וסימני השאלה שמחזיקים את ה-URL יחד שורדים. השתמשו בו כשיש לכם URL שלם ואתם רוצים רק לנקות רווחים או תווים לא-ASCII; פנו ל-encodeURIComponent בכל פעם שאתם מכניסים ערך לתוך URL גדול יותר. כלל אצבע פשוט: קדדו את הקישור השלם עם encodeURI, קדדו את החלקים שאתם מכניסים עם encodeURIComponent.
הכל נשאר על המכשיר שלכם
הכלי הזה פועל כולו בתוך הדפדפן שלכם. טקסט שאתם מדביקים מקודד או מפוענח מקומית באמצעות אותן שגרות תקניות, ולעולם אינו נוסע לשרת, מה שהופך אותו לבטוח עבור טוקנים, פרמטרים חתומים או כל דבר אחר שהייתם מעדיפים לא לשלוח ברשת. אם אתם עובדים עם המרות טקסט נוספות, ממיר ה-Base64 נמצא ממש לצידו, ותוכלו לעיין במלוא מגוון כלי המפתחים שלנו לעוד עזרים יומיומיים.
שאלות נפוצות
מה משמעות %20 בכתובת URL?
זהו רווח מקודד. תו הרווח אינו מותר באופן מילולי בכתובת URL, ולכן הוא מוחלף בסימן אחוז ובערך ההקסדצימלי 20, שהוא ערך הבית של רווח.
למה לפעמים אני רואה סימן פלוס במקום %20?
נתוני טופס HTML מסוג application/x-www-form-urlencoded מקודדים רווחים כסימן פלוס לפי מוסכמה היסטורית. בנתיב או בשאילתה רגילים, רווח מקודד כ-%20. שניהם מפוענחים בחזרה לרווח בהקשר המתאים להם.
מתי כדאי להשתמש ב-encodeURIComponent במקום ב-encodeURI?
השתמשו ב-encodeURIComponent עבור ערך בודד שאתם מכניסים לתוך URL, כמו פרמטר שאילתה, כי הוא מקודד גם תווים שמורים. השתמשו ב-encodeURI עבור כתובת שלמה כאשר אתם רוצים לשמר את הקווים הנטויים, הנקודתיים וסימני השאלה שמחזיקים אותה יחד.
האם קידוד URL משנה את המשמעות של הנתונים שלי?
לא. הקידוד הפיך במלואו. פענוח התוצאה מחזיר בדיוק את הטקסט המקורי, בית אחר בית, כל עוד אותו סט תווים נמצא בשימוש בשני הצדדים.
איך מטופלים תווים לא-ASCII כמו הטעמות או אמוג'י?
הם הופכים תחילה לבתי UTF-8, ואז כל בית הופך למשולש אחוז משלו. אות אחת עם הטעמה או אמוג'י בודד יכולים לכן להתרחב למספר משולשים בפלט המקודד.
האם הטקסט שלי נשלח לשרת כשאני משתמש בכלי הזה?
לא. קידוד ופענוח מתרחשים כולם בתוך הדפדפן שלכם. שום דבר שאתם מדביקים לא מועלה, כך שבטוח להשתמש בו עם מחרוזות פרטיות או רגישות.