אפקטים בקונסולה

לפייסבוק, החברה שאני מוקיר ומחבב כמו צרעת, היתה בעיה אמיתית – בעבר נפוצו המון “סקריפטים” שהיו אמורים לאפשר למשתמש לראות מי בחן בעיון את הפרופיל שלו, מי בדיוק בהה בתמונות שלו מאלבום תאילנד ושאר דברים מענינים. כל מה שהמשתמש הפתי היה אמור לעשות הוא להדביק את הסקריפטים האלו בכלי המפתחים, ללחוץ אנטר ואז לצפות במידע הסודי והרותח. מה הבעיה? הבעיה שהסקריפטים האלו היו שקריים ומה שהם עשו זה לעשות פעולות בשמו של המשתמש.

איך מונעים את זה? כל מי שייכנס לפייסבוק (לא חייבים לעשות לוגין), ילחץ על כלי המפתחים ויעבור לקונסולה יראה את הדבר הבא:

Stop! This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or "hack" someone's account, it is a scam and will give them access to your Facebook account. See https://www.facebook.com/selfxss for more information.

נסו בעצמכם ותראו! וזה, זה סוג של גאונות לא אופיינית לרשת הזו שאמורה להגן על המשתמשים האווילים מפני “XSS עצמי” – כלומר שכנוע המשתמש להקליד בקונסולה של עצמו קוד מזיק שעלול לעשות לו צרות צרורות – מביצוע פעולות בשמו ועד הקפצת פופאפים/פרסומות. אם אנו נציג למשתמש הודעה מאוד מאוד בולטת, באדום, בגדול, יש סיכוי שהוא לא יעשה שטויות. (סיכוי כמובן, לא וודאות).

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

פורמט בסיסי

אני מאמין שרוב הקוראים יודעים איך לבצע פורמטינג לטקסט, כלומר להכניס “משתנים” בטקסט. זה די בסיסי כמעט בכל שפה. ובכן, גם בקונסולה אפשר לעשות לעשות את זה. למשל, אם אני אכניס את הטקסט הבא לקונסולה שלי (או לקוד שלי) :


console.log("My Name is %s, Prepare to die", "Inigo Montoya");

אני אראה את הטקסט המתבקש מתוך הנסיכה הקסומה.

My name is Inigo Montoya. You killed my father. Prepare to die

My name is Inigo Montoya. You killed my father. Prepare to die

ה-s% הוא בעצם סימן של מחרוזת טקסט שניתנת כארגומנט השני, אני יכול להכניס עוד כמה כרצוני:


console.log("My Name is %s, Prepare to %s", "Inigo Montoya", "live a long life!");

אם אני רוצה להכניס מספר, אני יכול לעשות את זה עם d%. למשל:


console.log("My Name is %s, Prepare to %s X %d", "Inigo Montoya", "live a long life!", 10);

מה שאקבל זה:
My Name is Inigo Montoya, Prepare to live a long life! X 10

אז d% ו-s% הם מוכרים ובאמת אין טעם להרחיב, אבל יש עוד כמה מגניבים כמו למשל O% שמאפשר הדפסה של האובייקט כעץ ג’אווהסקריפטי מגניב ושימושי למדי.


console.log("This is my body: %O", document.querySelector('body'));

אם רוצים להדפיס רק את האלמנט בלי מחרוזת, אפשר להשתמש ב-console.dir. למשל:


console.dir(document.querySelector('body'));

console dir

שימו לב שזה שונה לגמרי מהדפסה “רגילה” של אלמנט שמראה לנו את ה-HTML. פה אנו רואים את הייצוג הג’אווהסקריפטי של האובייקט.

העיצוב המגניב

ובדיוק כפי שאפשר לעשות פורמטינג לטקסט, מספר ואובייקטים אפשר להכניס לקונסולה גם… CSS עם c%!


console.log("%cThis is nice font", "color:orange;font-size: 65px;font-weight: bold;");

ומה נקבל? ובכן – את זה:

This is a nice font בצבע ובגודל

This is a nice font בצבע ובגודל

כמובן שאפשר להתפרע איך שרוצים. האם זה דבר מאוד שימושי? אם יש לכם אתר שיש לו משתמשים שניתן לפתות אותם ב-XSS עצמי (כלומר הקלדה של דברים בקונסולה) – אז כן, זה עלול להיות שימושי. לכל השאר? טוב, שימושי לא ממש אבל יכול להיות ממש ממש מגניב.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (12 הצבעות, ממוצע: 4.58 מתוך 5)


יאללה, שתפו :)

אל תשארו מאחור! יש עוד מה ללמוד!

3 comments on “אפקטים בקונסולה
  1. מתן הגיב:

    רן אתה אחד המגניבים!
    תודה

  2. משתמש אנונימי (לא מזוהה) הגיב:

    מעולה…

כתיבת תגובה

האימייל לא יוצג באתר.

רישום