დეველოპერმა მთელი ვებგვერდი favicon-ის პიქსელებში ჩაწერა

ყველა ვებგვერდს აქვს favicon — პატარა ხატულა ბრაუზერის ჩანართში, რომელსაც ერთხელ ატვირთავ და მერე აღარასდროს იხსენებ. დეველოპერმა ტიმ ვერლემ ეს დაშვება შემოაბრუნა და პატარა დემო ააგო, სადაც მთელი ვებგვერდი favicon-ის პიქსელებშია შენახული, ბრაუზერი კი მას გაშვების დროს ხსნის.

ბაიტები RGB არხებში

მიდგომა სტეგანოგრაფიის პირდაპირი ფორმაა. სურათის ყოველ პიქსელს აქვს წითელი, მწვანე და ლურჯი მნიშვნელობა — სამი ბაიტი. ვერლემ პატარა HTML დოკუმენტის UTF-8 ბაიტები პირდაპირ ამ არხებში ჩაწერა, პიქსელი პიქსელის მიყოლებით, და შედეგად ვიზუალური ხმაურის მსგავსი სურათი მიიღო. თავში ოთხბაიტიანი სართაურია მონაცემთა სიგრძით, რადგან სურათის ბოლოს გამოუყენებელი პიქსელები შეიძლება დარჩეს და სიგრძის გარეშე ვერ გაიგებ, სად მთავრდება რეალური მონაცემები.

თავად მონაცემები მხოლოდ 208 ბაიტი HTML იყო; სართაურთან ერთად სულ 212 ბაიტი. სამი ბაიტი პიქსელზე — ეს 71 პიქსელია, ხოლო უმცირესი კვადრატული სურათი, რომელშიც ისინი ეტევა, 9x9 პიქსელია, ანუ 81 პიქსელი. საბოლოო სურათი თავისი 239-ბაიტიანი ტევადობის 87%-ს იყენებს.

გვერდის უკან წაკითხვა

გვერდის აღდგენა იმ API-ებს იყენებს, რომლებიც ყველა ბრაუზერს უკვე აქვს. favicon სურათად იტვირთება, canvas-ზე იხატება, შემდეგ კი JavaScript canvas-ის API-ით ყველა პიქსელს კითხულობს. კოდი ბაიტების მასივს აღადგენს, პირველი ოთხი ბაიტიდან მონაცემთა სიგრძეს იგებს, ამოიღებს მონაცემებს და UTF-8 ტექსტად დეკოდირებს — ამ მომენტში ორიგინალური HTML ისევ ხელმისაწვდომია.

ერთი ხარვეზი არსებობს: favicon არ შეიცავს ვებგვერდს, ის შეიცავს ვებგვერდის კონტენტს. სურათის დეკოდირებისთვის მაინც საჭიროა პატარა bootstrap სკრიპტი; JavaScript-ის გარეშე ფაილი უბრალოდ PNG-ია, რომელშიც HTML აღმოჩნდა. დემო-გვერდზე არის ღილაკი „Render Website“, რომელიც favicon-ს კითხულობს, HTML-ს დეკოდირებს და გვერდს აღდგენილი კონტენტით ცვლის.

სასარგებლოა? სინამდვილეში არა — და ეს არის მთავარი

ვერლე პირდაპირ ამბობს, რომ პრაქტიკული თვალსაზრისით ეს უაზროა: ტევადობა პაწიაა და გვერდი JavaScript-ის გარეშე საკუთარ თავს ვერ ჩატვირთავს, ამიტომ პატარა HTML დოკუმენტის გავრცელების ათეულობით უკეთესი გზა არსებობს. ექსპერიმენტი წინა ცდას მოჰყვება, როცა მან ორი ბაიტი თაგვის DPI რეგისტრში ჩაწერა, და იმავე კატეგორიას მიეკუთვნება — რამდენს იტანს ჩვეულებრივი ფორმატი.

ის ასევე ჩამოთვლის ალტერნატივებს: მარკაპის პირდაპირ SVG favicon-ში ჩაწერა, PNG-ის კომენტარ-ჩანაკების (tEXt, zTXt, iTXt) გამოყენება, ან ICO ფორმატი, რომელიც სხვადასხვა გარჩევადობის რამდენიმე ხატულას იტევს. დემო მის საიტზეა ხელმისაწვდომი, კოდი კი GitHub-ზე გამოქვეყნებული.