חזרה
מפתח דחס אתר שלם לתוך הפיקסלים של ה-favicon
SiTech AI Team2 წთ. საკითხავი

מפתח דחס אתר שלם לתוך הפיקסלים של ה-favicon

טים ורלה קידד עמוד HTML בתוך תמונת favicon: תוכן בגודל 208 בייט נכנס ל-PNG בגודל 9x9 פיקסלים, והדפדפן קורא אותו בחזרה דרך canvas API, אף שהמפתח עצמו מודה שכמעט אין לכך שימוש מעשי.

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

בייטים חבויים בערוצי RGB

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

המטען עצמו היה 208 בייטים של HTML בלבד; יחד עם הכותרת הסכום הכולל הגיע ל-212 בייטים. בקצב של שלושה בייטים לפיקסל נדרשים 71 פיקסלים, והתמונה המרובעת הקטנה ביותר שמכילה אותם היא 9x9 פיקסלים, כלומר 81 פיקסלים. התמונה המוגמרת מנצלת 87% מקיבולת של 239 בייטים.

איך קוראים את האתר בחזרה

שחזור העמוד נעזר ב-API שכל דפדפן כבר מספק. ה-favicon נטען כתמונה, מצויר על canvas, ואז JavaScript קורא את הפיקסלים חזרה דרך canvas API. הקוד בונה מחדש את מערך הבייטים, קורא את ארבעת הבייטים הראשונים כדי לדעת את אורך המטען, מחלץ את הנתונים ומפענח אותם כטקסט UTF-8 — ובשלב הזה ה-HTML המקורי זמין שוב.

יש מלכוד אחד: ה-favicon לא מכיל את האתר, הוא מכיל את התוכן של אתר. עדיין נדרש סקריפט bootstrap קטן כדי לפענח את התמונה; בלי JavaScript הקובץ הוא רק PNG שבמקרה מכיל HTML. עמוד ההדגמה כולל כפתור "Render Website" שקורא את ה-favicon, מפענח את ה-HTML ומחליף את העמוד בתוכן המשוחזר.

שימושי? ממש לא — וזו בדיוק הנקודה

ורלה אומר זאת בפה מלא: הקיבולת זעירה, והעמוד לא יכול לטעון את עצמו בלי JavaScript, כך שיש עשרות דרכים טובות יותר להפיץ מסמך HTML קטן. הניסוי ממשיך ניסוי קודם שבו הוא איחסן שני בייטים באוגר ה-DPI של העכבר שלו, והוא שייך לאותה קטגוריה — בדיקה של מה שפורמט רגיל מוכן לסבול.

הוא גם מפרט חלופות: הטמעת סימון ישירות ב-favicon מסוג SVG, שימוש בקטעי הערות של PNG כמו tEXt, zTXt ו-iTXt, או בפורמט ICO שמאפשר כמה אייקונים ברזולוציות שונות. ההדגמה זמינה באתר שלו, והקוד פורסם ב-GitHub.

SSiTech

SiTech — פיתוח אתרים בכוח ה-AI

אנחנו בונים אתרים מהירים ומודרניים ומשלבים AI בתהליכי עבודה אמיתיים. יש לכם פרויקט או שאלה? נשמח לעזור.