Bir web sitesini favicon içinde saklama deneyi

 (timwehrle.de)
1 puan yazan GN⁺ 4 시간 전 | 1 yorum | WhatsApp'ta paylaş
  • Geliştirici, tarayıcı sekmesi simgesi olan favicon'u bir piksel bayt deposu gibi görerek küçük bir HTML'yi görüntünün RGB kanallarına yerleştiren bir deney yaptı
  • Kodlama yöntemi, HTML'nin UTF-8 baytlarının önüne 4 baytlık bir uzunluk başlığı ekleyip her baytı sırayla pikselin R·G·B değerlerine yazmaya dayanıyor
  • Demo yükü 208 bayt, başlıkla birlikte 212 bayt olduğundan, 3'er bayt saklayan 71 piksel ve 9×9 PNG yeterli oldu
  • Geri yükleme için favicon görseli canvas üzerine çiziliyor, ardından JavaScript piksel verisini okuyup RGB değerlerini yeniden bir bayt dizisine dönüştürerek HTML olarak çözüyor
  • Yalnızca favicon ile web sitesinin bağımsız çalıştığı bir yapı yok; ayrı bir bootstrap JavaScript gerektiği için bu, pratik kullanımdan çok sınırları zorlayan bir deney niteliğinde

favicon'u depolama alanı gibi kullanma yöntemi

  • favicon, tarayıcı sekmesinde görünen küçük bir simge olsa da gerçekte pikseller ve baytlardan oluşan bir görüntü dosyası
  • Deneyin çıkış noktası steganografi olsa da, demoda odak simge gibi görünmesinden çok saf bir depolama alanı olarak kullanılması
  • Saklanan şey küçük bir HTML yükü
Website in a Favicon

Everything you're reading right now was decoded from favicon pixels.
  • Kodlama süreci basit
    • TextEncoder ile HTML, UTF-8 baytlarına dönüştürülüyor
    • Başına yük uzunluğunu taşıyan 4 baytlık başlık ekleniyor
    • Boşta kalan pikseller olabileceği için gerçek yükün bittiği yer uzunluk başlığıyla ayırt ediliyor
    • İlk bayt ilk pikselin red kanalına, ikinci bayt green kanalına, üçüncü bayt blue kanalına yazılıyor
    • Sonraki pikseller de aynı sırayla dolduruluyor ve HTML belgesinin tamamı renk değerlerine yerleşiyor
  • Ortaya çıkan görüntü görsel olarak parazit gibi görünüyor

Boyut ve geri yükleme süreci

  • Demonun nihai boyutu oldukça küçük
    • Yük: 208 bytes
    • Başlık dahil toplam: 212 bytes
    • Gereken piksel: 71 pixels
    • Görüntü boyutu: 9×9 pixels
    • Dosya boyutu: 239 bytes
    • Kullanım oranı: 87% {p:87}
  • Geri yükleme yalnızca tarayıcı özellikleriyle yapılıyor
    • favicon bir görüntü olarak yükleniyor
    • Görüntü canvas üzerine çiziliyor
    • Canvas API ile tüm pikseller okunuyor
    • RGB değerleri yeniden bir bayt dizisine dönüştürülüyor
    • İlk 4 bayttan yük uzunluğu okunuyor
    • Yük çıkarılıp UTF-8 metni olarak çözümleniyor
  • Demo sitesinde "Render Website" düğmesine basıldığında favicon okunuyor, HTML geri yükleniyor ve ardından sayfa içeriği değiştiriliyor

Sınırlar ve alternatifler

  • En büyük kısıt, favicon'un tek başına tüm web sitesini çalıştıramaması
    • favicon içinde web sitesinin içeriği bulunuyor
    • Çözümleme için ayrıca küçük bir JavaScript yükleyicisi gerekiyor
    • JavaScript yoksa favicon, web sitesi içeriğini taşıyan bir PNG'den ibaret kalıyor
  • Pratikliği düşük
    • Saklanabilecek veri miktarı çok küçük
    • Sayfanın JavaScript ile bootstrap edilmesi gerekiyor
    • Küçük HTML belgelerini dağıtmak için çok daha iyi yollar var
  • Alternatifler arasında SVG favicon içine doğrudan markup yerleştirmek, PNG'nin tEXt, zTXt, iTXt comment chunk'larını kullanmak ve birden çok çözünürlükte simge barındırabilen ico dosya biçimini kullanmak yer alıyor
  • Demo sitesi: https://www.timwehrle.de/labs/favicon-site/
  • Uygulama kodu: https://github.com/timwehrle/favicon

İlgili okumalar

1 yorum

 
GN⁺ 4 시간 전
Hacker News yorumları

  • Piksellerle uğraşmak yerine SVG favicon kullanıp içine işaretlemeyi doğrudan gömerek sonra çıkarmak mümkün olmaz mı diye düşündüm
    favicon.svg içine hello HN! gibi bir içerik koyup, bunu SVG favicon olarak kullanıp ardından belge gövdesine çıkarıp ekleyebilirsin

    • Buna “neden alternatif olarak bunu yapmıyorsun?” diye bakmaktansa, “bunun da eğlenceli bir varyasyonu var” diye bakmak daha doğru. İkisi de eğlence, merak ve keşif için teknolojiyle oynamanın yolları; piksellerin içine kaydetme yaklaşımında Rube Goldberg düzeneği gibi bir eğlence var
    • Yazının yazarı olarak söyleyeyim, elbette bu yöntem daha pratik. Ama yükün XML dosyasındaki gizli metin olarak değil, gerçekten piksel verisinin içinde “yaşıyor” olmasını istediğim için böyle yaptım :)
    • Regex mi, ıyy. Doğru namespace içinde bunu düzgün biçimde XML olarak kodlayıp öyle okumak yeterli
      Ya da SVG dosyasını olduğu gibi sunup HTML’yi embed ederek dahil edebilirsin. Teoride tanımlayıp kullanabilmek gerekirdi ama pratikte Firefox da Chromium da bunu favicon içinde düzgün işlemiyor gibi, üzücü
    • Benim kişisel olarak savaş açtığım yel değirmenlerinden biri olduğu için söyleyeyim, [\s\S] yerine daha kısa ve daha doğru olarak [^] kullanılabilir
    • SVG içine raster görseller base64 kodlu baytlar olarak gömülebilir
      Dolayısıyla deneyi bir kat daha ileri taşıyıp favicon’un SVG olduğu, onun içinde kodlanmış bir raster bulunduğu ve o baytların içinde de HTML’nin kodlandığı bir yapı kurmak mümkün. En azından akıl yakan bir CTF seviyesi olurdu

  • Elbette bu yeni bir fikir değil. Örneğin 2000 yılında biri deCSS’i favicon içine kaydetmişti
    https://web.archive.org/web/20010408040524if_/http://decss.z...
    Çıkarmak için dd bs=1 skip=2238 < favicon.ico kullanılabiliyor

  • “Görseli çözmek için hâlâ küçük bir bootstrap loader gerekiyor” demek de şart değil. HTML/PNG polyglot kullanırsan her şeyi tek dosyada halledebilirsin; günümüzde WebP gibi yeni formatlarla sıkıştırma oranı da daha iyi olabilir
    https://web.archive.org/web/20120801001616/http://daeken.com...

  • Kullanıcıyı birden fazla alan adına yönlendirirsen favicon cache de depolama alanı olarak kullanılabilir. Bu, potansiyel bir fingerprinting riski olarak önerilmişti[0]; tarayıcı gizli modda bile cache’i safça yeniden kullanıyorsa, bu durum tarayıcı profilleri arasında kullanıcı takibi için kötüye kullanılabilir
    [0]: https://www.schneier.com/blog/archives/2021/02/browser-track...

    • Bu zaten düzeltilmedi mi, ya da en azından büyük ölçüde düzeltilmedi mi?
    • Orijinal yazıyı okur okumaz içgüdüsel olarak “bu kesin fingerprinting için kullanılıyordur” diye düşündüm. Anti-fingerprinting önlemlerinin favicon ile Canvas API birleşimini de hesaba katıp katmadığını merak ediyorum
      supercookie sitesi bağlantısı ne yazık ki artık çalışmıyor

  • PNG’de tEXt, zTXt, iTXt yorum chunk’ları var. Dışarıdan bakınca tamamen sıradan görünen bir görsel dosyasının içine istediğin kadar içerik sıkıştırabilirsin. Tabii eğlence biraz daha az olur

  • Bunun zamanlaması tesadüf mü? Daha bir saat önce, hatta tam olarak bu yazıdan 30 dakika önce, yaptığım hisse portföyünü URL + favicon içine kaydeden siteyi paylaşmıştım
    https://news.ycombinator.com/item?id=48606396

  • Bu düşünce tarzına gerçekten çok uyuyor: monitör de depolamadır, klavye de depolamadır, forum yazısı da depolamadır
    Zaman içinde düzenlemelere Markov’un onaylayacağı türden varyasyonlar eklersen oldukça büyük bir depolama kapasitesi elde edersin. Üstelik yorumlar bazen sosyal açıdan da ilginç olduğundan çift amaçlı bir depolama hâline gelir.
    Birinin tavuk güveci tarifinin aslında özenle kurgulanmış GUID’lerin bir handle’ı olup olmadığını, şaka yollu söylersek bin farklı forum gönderisine işaret edip etmediğini kimse bilemez. Yazarın PoC||GTFO’yu bilip bilmediğini merak ediyorum; çünkü bu kesinlikle Alchemist Owls’un kutsal kitabının derinliklerinde bulunabilecek bir teknik

    • Kodun içindeki kod. Tekerleğin içindeki tekerlek

  • Agresif biçimde bölünmüş, açıkça LLM üretimi gibi duran üslup yüzünden okumak çok zordu

    • Birkaç ay önce Medium’da bu tarz üsluptan şikâyet etmiştim. O yazının yazarı, küçük akıllı telefon ekranlarında okunacağı varsayılırsa bunun tercih edilen bir stil olduğunu söylemişti. Bir ölçüde mantıklı. O yazının ya da bunun AI üretimi olup olmadığını bilmiyorum
    • Yazının ortalarına geldiğimde, sonunda “aslında bu yazının kendisi sitenin favicon’una kaydedilmişti” gibi bir ters köşe geleceğine ve kısa, kesik kesik cümlelerin böyle açıklanacağına emindim. Bunun olmadığını fark edince gerçekten hayal kırıklığına uğradım. Kaçırılmış fırsattı
    • Ben bu yazı stilini sevdim. Ben de bazen benzer şekilde yazıyorum ve yazılarımı üretmek için hiç LLM kullanmadım. İşte de tam böyle yazdığım oldu
      Bana göre yazar sadece doğrudan konuya girmek istiyor. İnsanların metin çok uzayınca üstünkörü okumaya başladığını biliyor gibi
    • Uzun zamandır ilk kez HN’de AI üretimi üslup teşhisine katılmıyorum. En fazla LLM ile bir taslak oluşturulmuş olabilir ama nihai sonuç oldukça insani görünüyor
      it’s/its hatası yapılmış, But. tek kelimelik bir cümle olmuş, HTML büyük harfle yazılmamış ve parantez içinde “okayy” kullanılmış. Yazarı eleştirmek için söylemiyorum; tam tersine, bir blog yazısını blog yazısı yapan bu küçük kusurları görmek daha keyifliydi
    • Yazı sürükleyiciydi ve okuması keyifliydi

  • Bana Inigo’nun real pixel coding çalışmasını hatırlattı: https://www.youtube.com/watch?v=FvS_DG8yIqQ
    Photoshop’ta pikseller yerleştirilip exe olarak kaydedilerek yapılmış 256 baytlık bir intro

  • İlginç bilgi: herhangi bir inline SVG favicon olarak kullanılabilir ve HTML belgesinin içinde olduğu gibi bırakılabilir
    Bu sayede emojiyi doğrudan favicon olarak kullanmak da mümkün. HN’de emoji görünmüyor

    • Bu arada bunu yaparken #rrggbb renk kodları ya da url(#id) bağlantıları kullanmak istiyorsan, # karakterini %23 olarak escape etmen gerekir. Aksi hâlde URL fragment olarak ayrıştırılır ve SVG kodu o noktada kesilir