Bir geliştirici koca bir web sitesini favicon'un piksellerine sığdırdı

Her web sitesinin bir favicon'u vardır: tarayıcı sekmesinde görünen küçük simge, bir kez yüklenir ve bir daha düşünülmez. Geliştirici Tim Wehrle bu varsayımı tersine çevirdi ve tam bir web sayfasının favicon piksellerinde saklandığı, tarayıcının da onu çalışma anında çözüp geri getirdiği küçük bir demo hazırladı.

RGB kanallarına gizlenmiş baytlar

Yaklaşım doğrudan bir steganografi biçimi. Görüntüdeki her piksel kırmızı, yeşil ve mavi değerler taşır — üç bayt. Wehrle küçük bir HTML belgesinin UTF-8 baytlarını doğrudan bu kanallara, piksel piksel yazdı ve görsel gürültüye benzeyen bir görüntü elde etti. Başa dört baytlık bir uzunluk başlığı ekleniyor, çünkü görüntünün sonunda kullanılmayan pikseller kalabilir ve uzunluk değeri olmadan gerçek verinin nerede bittiğini anlamak mümkün olmaz.

Yükün kendisi yalnızca 208 bayt HTML'di; başlıkla birlikte toplam 212 bayta çıktı. Piksel başına üç bayt hesabıyla bu 71 piksel gerektiriyor ve bunları barındırabilecek en küçük kare görüntü 9x9 piksel, yani 81 piksel. Ortaya çıkan görüntü 239 baytlık kapasitesinin yüzde 87'sini kullanıyor.

Siteyi geri okumak

Sayfayı kurtarmak için her tarayıcının zaten sunduğu API'ler yeterli. Favicon görüntü olarak yükleniyor, canvas üzerine çiziliyor ve JavaScript canvas API üzerinden pikselleri geri okuyor. Kod bayt dizisini yeniden kuruyor, yükün uzunluğunu öğrenmek için ilk dört baytı okuyor, veriyi çıkarıyor ve UTF-8 metni olarak çözüyor; bu noktada özgün HTML yeniden elimizde.

Bir ayrıntı var: favicon sitenin kendisini değil, bir sitenin içeriğini barındırıyor. Görüntüyü çözmek için yine de küçük bir bootstrap betiği gerekiyor; JavaScript olmadan dosya, içinde HTML bulunan bir PNG'den ibaret. Demo sayfasındaki "Render Website" düğmesi favicon'u okuyup HTML'i çözüyor ve sayfayı yeniden oluşturulan içerikle değiştiriyor.

İşe yarıyor mu? Aslında hayır — asıl mesele de bu

Wehrle bunu açıkça söylüyor: kapasite çok küçük ve sayfa JavaScript olmadan kendini başlatamıyor, dolayısıyla küçük bir HTML belgesini dağıtmanın onlarca daha iyi yolu var. Deney, farenin DPI kaydına iki bayt sakladığı önceki çalışmasının devamı ve aynı kategoriye giriyor: sıradan bir formatın ne kadarını kaldırabileceğini sınamak.

Alternatifleri de sıralıyor: işaretlemeyi doğrudan SVG favicon içine gömmek, PNG'nin tEXt, zTXt ve iTXt gibi yorum bloklarını kullanmak ya da farklı çözünürlüklerde birkaç simge barındırabilen ICO biçimi. Demo kendi sitesinde, kaynak kodu ise GitHub'da yayında.