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

פיירפוקס טוען כל תמונה פעמיים

רן בר-זיק אוגוסט 5, 2014 6:16 pm 2 תגובות

סיפורו של באג מוזר בפיירפוקס ופתרונו – או יותר נכון, איך הבנו איך לפתור אותו

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

ממש לא מזמן, נתקלתי בבאג משונה ששרף לי כמה שעות מהחיים ויכול להיות רלוונטי גם לכם. במוצר שאותו אני מפתח, ישנו מודול סטטיסטיקות שבודק הורדות של קבצים שונים שאותם לקוחות מורידים. חלק מהקבצים הם קבצים שניתן להריץ כמו jar או exe וחלק מהם הם קבצי rar. חלק אחר של הקבצים הם תמונות וטקסטים שהלקוח יכול להוריד אותם. בדפדפנים מודרניים, כפי שאתם יודעים (אלא אם כן אתם זקנים שמשתמשים באקספלורר), כאשר ניגשים לקובץ תמונה, טקסט או PDF, הדפדפן פותח אותם ישירות.

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

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

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

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

אני וראש הצוות שלי, לירן טל, בהינו מול התמונה הזו ביאוש:

פיירפוקס שמציג תמונה
פיירפוקס שמציג תמונה

ולפתע, לירן התחיל לקפוץ כמו משוגע ולומר 'מצאתי! מצאתי! אני גאון! אני גאון!'

אחרי שהוא הסביר לי, הבנתי. מי שרוצה, מוזמן לנסות להביט בתמונה שלעיל ולנסות להגיע לתשובה הנכונה. מי שרוצה לראות את התשובה – מוזמן ללחוץ על הכפתור הבא להצגת המשך הפוסט:


בת'כלס, התמונה הזו מסבירה את הכל:

פיירפוקס מציג תמונה -והפייביקון מודגש
פיירפוקס מציג תמונה -והפייביקון מודגש

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

הדפדפן היחידי שעושה את זה, מבין שלושת 'הגדולים' הוא פיירפוקס. אפילו אקספלורר לא עושה את זה.

ישנם מספר פתרונות לדבר הזה – למשל לבקש להתעלם מהורדות כפולות אם מדובר בפיירפוקס שמנסה להוריד תמונה. או לארוז כל תמונה בקובץ zip או rar ולא לאפשר למשתמש להציג אותה ישירות. אבל הפתרון תמיד פשוט כאשר מבינים מה הבעיה. לפחות בדרך כלל 🙂


עדכון – פתחתי באג בבאגזילה של מוזילה (תמיד רציתי לומר את זה!).

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

2 תגובות

  1. נפלו בפח: אפליקציה שנועדה להציל אנשים התגלה כנוכלות | גיקטיים הגב יוני 20, 2016 בשעה 3:58 pm

    […] מנוטרת באמצעות תוכנות כמו wireshark או fiddler. כך אפשר לבדוק תקלות משונות או שירות/אתר ומה שהוא משדר לשרת […]

  2. נפלו בפח: אפליקציה שנועדה להציל אנשים התגלה כנוכלות - שווה.נט הגב יוני 20, 2016 בשעה 4:33 pm

    […] מנוטרת באמצעות תוכנות כמו wireshark או fiddler. כך אפשר לבדוק תקלות משונות או שירות/אתר ומה שהוא משדר לשרת […]

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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