Developer bütöv bir veb saytı favicon piksellərinə yerləşdirdi

Hər veb saytın favicon-u var: brauzer sekmesində görünən kiçik ikon, bir dəfə yüklənir və bir daha xatırlanmır. Developer Tim Wehrle bu fərziyyəni tərsinə çevirdi və bütöv veb səhifənin favicon piksellərində saxlandığı, brauzerin isə onu işləmə zamanı deşifrə etdiyi kiçik bir demo hazırladı.

RGB kanallarında gizlədilmiş baytlar

Yanaşma steganografiyanın birbaşa formasıdır. Şəkildəki hər piksel qırmızı, yaşıl və mavi dəyərlər daşıyır — üç bayt. Wehrle kiçik bir HTML sənədinin UTF-8 baytlarını birbaşa bu kanallara, piksel-piksel yazdı və vizual küyə bənzəyən şəkil aldı. Əvvəlinə məlumat uzunluğunu göstərən dörd baytlıq başlıq əlavə olunur, çünki şəklin sonunda istifadə olunmamış piksellər qala bilər və uzunluq dəyəri olmadan real məlumatın harada bitdiyini anlamaq mümkün deyil.

Məlumatın özü cəmi 208 bayt HTML idi; başlıqla birlikdə cəm 212 bayta çatdı. Piksel başına üç bayt hesabı ilə bu 71 piksel tələb edir və onları yerləşdirə bilən ən kiçik kvadrat şəkil 9x9 piksel, yəni 81 pikseldir. Yekun şəkil 239 baytlıq tutumunun 87 faizini istifadə edir.

Saytı geri oxumaq

Səhifəni bərpa etmək üçün hər brauzerdə artıq mövcud olan API-lər kifayət edir. Favicon şəkil kimi yüklənir, canvas üzərinə çəkilir, sonra JavaScript canvas API vasitəsilə pikselləri geri oxuyur. Kod bayt massivini yenidən qurur, məlumatın uzunluğunu bilmək üçün ilk dörd baytı oxuyur, məlumatı çıxarır və UTF-8 mətni kimi deşifrə edir — bu nöqtədə orijinal HTML yenidən əlimizdədir.

Bir incəlik var: favicon saytın özünü deyil, saytın məzmununu saxlayır. Şəkli deşifrə etmək üçün yenə də kiçik bir bootstrap skripti lazımdır; JavaScript olmadan fayl sadəcə içində HTML olan PNG-dir. Demo səhifəsindəki "Render Website" düyməsi favicon-u oxuyur, HTML-i deşifrə edir və səhifəni bərpa olunmuş məzmunla əvəz edir.

Faydalıdır? Əslində yox — və əsas məqam da budur

Wehrle bunu açıq deyir: tutum çox kiçikdir və səhifə JavaScript olmadan özünü yükləyə bilmir, ona görə kiçik HTML sənədini paylamağın onlarla daha yaxşı yolu var. Təcrübə onun siçanın DPI registrində iki bayt saxladığı əvvəlki işinin davamıdır və eyni kateqoriyaya aiddir: adi formatın nə qədər yük götürdüyünü sınamaq.

O, həmçinin alternativləri sadalayır: işarələməni birbaşa SVG favicon daxilinə yerləşdirmək, PNG-nin tEXt, zTXt və iTXt şərh bloklarından istifadə etmək, ya da müxtəlif ölçülü bir neçə ikon saxlayan ICO formatı. Demo onun saytında, mənbə kodu isə GitHub-da açıqdır.