5 ms·
I Stored a Website in a Favicon
- anujshashimal98 4mo ago[flagged]
- superjose 4mo agoPretty cool tbh!!! Would have loved seeing the decoder code!!! It's also pretty interesting to think how an attacker could exploit images on his behalf. Never thought that would be a way!!! Thanks!
- schobi 4mo agoI guess the decoder is more than the 208 bytes that this page uses.. But maybe you can misuse this and store a session ID / cookie in a favicon (give everyone a unique one) and survive some cookie cleanup and evade privacy restrictions? Maybe you can still make it that the favicon looks like an image a little to not raise suspicion? Favicons seem to be cached across private browsing sessions. Oh no
- RetroTechie 4mo agoI'm tempted to think that only someone working for a company in the advertising industry could come up with that. Must EVERYTHING be polluted by ad tech & privacy intrusions?
- franciscop 4mo agoIs this timing coincidence? I just submitted 1h (30 mins before this) ago a website I just made about storing your stock porfolio in a URL + favicon! https://news.ycombinator.com/item?id=48606396 https://news.ycombinator.com/item?id=48606396
- Tagbert 4mo agoThen there is this one. Seems to be a trend. “Pong in S Favicon” https://news.ycombinator.com/item?id=48608681 https://news.ycombinator.com/item?id=48608681
- sheept 4mo agoYou can use the favicon cache as storage too, by redirecting users across domains. It's been proposed as a potential fingerprinting risk[0], and if a browser naively reuses the cache for incognito mode, it could be used to track users across browser profiles. [0]: https://www.schneier.com/blog/archives/2021/02/browser-tracking-using-favicons.html https://www.schneier.com/blog/archives/2021/02/browser-track...
- koolala 4mo agoWasn't this fixed or mostly fixed?
- deleted 4mo ago[deleted]
- ai_fry_ur_brain 4mo agoMy thoughts instinctively went to "this has to be being used for fingerprinting" when I read OPs blog. Are anti fingerprinting measures taking into account the use of the canvas api with favicons? The link to the supercookie site is dead unfortunately.
- Tepix 4mo agoInstead of going via pixels, why not use a SVG favicon and directly store markup inside it and extract it? Use this favicon.svg: <svg xmlns="http://www.w3.org/2000/svg"> <circle cx="50%" cy="50%" r="50%" fill="orange"/> <p>hello HN!</p> </svg> use this in your <head> to use a svg favicon: <link id="favicon" rel="icon" href="favicon.svg" type="image/svg+xml"> finally, use this in your <body> to extract it and add it to your document body: <script> fetch(favicon.href).then(r => r.text()).then(t => document.body.innerHTML += t.match(/<p[\s\S]*p>/)[0]); </script>
- weetii 4mo agoHey, yeah, I wrote the article. This (of course) would be more practical. Thanks for pointing it out. I wanted the payload to "live" in actual pixel data rather than hidden text inside an XML file. That’s why I went this way :)
- peter-m80 4mo agoThe ico file format allows multiple resolution icons, so a lot of data
- weetii 4mo agoGood point, I might add a section in the article where I list alternative approaches. Thanks
- dodslaser 4mo agoOr just put the entire website in a <foreignObject> and render it in the favicon.
- econ 4mo agoYou can use any image format. Try using an animated gif. I don't know what this is but it's huge. https://news.ycombinator.com/favicon.ico https://news.ycombinator.com/favicon.ico
- 4mo ago
- bozdemir 4mo agoVery cool. I wonder is it possible to make a simple game with also leveraging the webassembly?
- weetii 4mo agoYes, probably. I guess, you’d need a bigger favicon since the minimal Rust WASM binary is around 20KB+ (?)
- alex_suzuki 4mo agoYou might find my tinkering useful: https://strich.io/blog/posts/embedding-webassembly-in-qrcodes/ https://strich.io/blog/posts/embedding-webassembly-in-qrcode... A QR code isn’t much different from a favicon I guess. :)
- laladrik 4mo agoThe link is 404
- alex_suzuki 4mo agoIt’s not for me?
- laladrik 4mo agoyou're right. The problem is with my Android application. Clicking the link through the website leads to a page
- netsharc 4mo agohttps://violet78910.github.io/faviconSnake/ https://violet78910.github.io/faviconSnake/
- Walf 4mo agoPNG has comment chunks tEXt, zTXt, and iTXt. You can have a completely normal image whose file is stuffed with as much content as you want. That is less fun, I suppose.
- weetii 4mo agoYes, that would also work, thanks for pointing it out
- deleted 4mo ago[deleted]
- shaharamir 4mo agoAmazing!
- beardyw 4mo agoI would have used a minimal service worker to unpack the web data and present it as if it were just a normal page being loaded.
- fitsumbelay 4mo agovery cool and interesting after reading just the title I wrongly assumed this would be about svg
- jibal 4mo agoSurprised that a minimal "website" only requires a small image = few pixels = few bytes to store it? Um, ok.
- ab_wahab01 4mo agoFascinating concept! Thanks for sharing this!
- esquivalience 4mo agoI found the agressively staccato, clearly LLM-generated content extremely difficult to read.
- estetlinus 4mo agoIt’s the new internet. So, so annoying.
- scottmcdot 4mo agoWhich bit? The short sentences?
- bonoboTP 4mo agoNot just the length but the structure, the way the headlines are phrased, the use of "honestly", the "not X but Y", many things cumulatively, not one particular thing in itself. If you work a lot with LLM writing, you notice. Same way you recognize the writing style of famous authors. It's never one particular thing but many.
- noduerme 4mo agoYeah, but it's kinda weird. The typical LLM headers and bullet points are there, but it's like someone took an axe to the rest of the spew. I too would rather read someone's original bad writing than their bad editing of AI writing, but it's kinda interesting how this all shakes out.
- bartvk 4mo agoI wish people would include their prompts.
- netsharc 4mo agoIt doesn't seem to be LLM, but reads like one. The author is German, maybe it's a language expertise thing, maybe he likes the LLM style (unrelated to his nationality). But yeah, sentences that only have 3-4 word each feel like 3rd grade writing; I couldn't read it.
- scoot 4mo agoWould have been more fun if the blogpost was rendered from the favicon.
- soanvig 4mo agoHonestly it didn't interest me, but I do remember from back in the days full websites rendered by a browser from... Empty files. https://mathiasbynens.be/notes/css-without-html https://mathiasbynens.be/notes/css-without-html
- neon_me 4mo agoIs it cake? Game for devs.
- pizzaballs 4mo ago[dead]
- deleted 4mo ago[deleted]
- berkes 4mo agoI'd imagine the (aggressive) caching of the favicon by browsers makes it a challenge, but you could generate the favicon dynamically, then have JS extract the sequentially. Basically streaming arbitraily large content to a webpage via favicons. Via blocks of 239 bytes. It may be a fun, novel way to proxy webpages that are otherwise blocked. Though, i guess, the service rendering the favicons can just as easily be blocked then.
- tetrisgm 4mo agoLove it. Did you see the old effort to store the page in the url? https://github.com/jstrieb/urlpages https://github.com/jstrieb/urlpages
- purple-leafy 4mo agoThat’s awesome. I took this a bit further a few years ago making a url only notepad quine that as you add data to it, creates itself. that can be saved as a bookmarklet. Have to watch the gif to understand https://github.com/con-dog/serverless-architecture https://github.com/con-dog/serverless-architecture
- tetrisgm 4mo agoI saw one before that was doing this and saved the whole thing as a base64 stream. So the url would dynamically update and have all its data. Pretty cool. I suppose the main obstacle is now where do I load the site from, and how much can be stored in itself or an image :)
- purple-leafy 4mo agoThat’s a pretty clever idea to treat it as a stream, why didn’t I think of that…
- tetrisgm 4mo agoLmk if you end up pushing this further!
- jorisw 4mo agoFun Fact: You can use any inline SVG for a favicon and keep it right in the HTML document. This also allows you to use an emoji directly as a favicon, like so: <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>(your emoji here)</text></svg>" /> (HN isn't showing the emoji)
- Timwi 4mo agoJust as a heads-up, if you do this and you want to use #rrggbb color codes or url(#id) links, you have to escape the # as %23, otherwise it gets parsed as a URL fragment and your SVG code is cut off there.
- Izmaki 4mo agoWait 'til the author discovers that you can use ping (ICMP) to transfer data, too! :)
- charcircuit 4mo agoYou can literally just use the file itself as the favicon. There is no need to over complicate it. cp index.html favicon.png
- titularcomment 4mo agoPainful read. Related interesting project: https://github.com/EtherDream/web2img https://github.com/EtherDream/web2img
- aaubry 4mo agoA neat improvement would be to make the decoder into a bookmarklet. This would avoid the overhead of serving the script. Of course you would rely on the user having the bookmarklet installed, but when you serve HTML you also rely on the user having a web browser installed.
- heroku 4mo ago[dead]
- herodoturtle 4mo agoHow long before someone ports DOOM into a favicon? ^_^ (For the technical gurus here, would that even be possible?)
- shakna 4mo agoYou can already play it in a favicon [0]. But as favicons can be svgs, and let you store foreign objects... You could store the whole thing in the favicon, but might also need a line of JS to extract it. [0] https://vidferris.github.io/FaviconDoom/ https://vidferris.github.io/FaviconDoom/
- drob518 4mo ago3… 2… 1…
- brtkwr 4mo agoHmm this is cool but what are the practical use cases? It didn’t load first time round on my browser (Brave) without disabling its prevent tracking feature…
- MomsAVoxell 4mo agoPractical use cases for stashing data in places people least expect it? Wallet password. New ecosystem for the kids. That's two, at least.
- MomsAVoxell 4mo agoOh, I am so aligned with this mentality: A monitor is storage. A keyboard is storage. Forum posts are storage. Markov-approved tweaks in an edit, over time, certainly enough for quite a lot of storage. Dual-use storage to boot, since .. you know .. sometimes the comments are socially interesting. Best thing is, nobody really knows if their chicken casserole recipe isn't just a handle to a carefully constructed GUID pointing across to .. lets say, for humor .. a thousand different forum postings ... I do have to wonder if the author is familiar with PoC||GTFO, for this is certainly a technique one will find deep within the depths of the Alchemist Owls' holy tomes...
- drob518 4mo agoCodes within codes. Wheels within wheels.
- inglor 4mo agoCool! Here is a GH repo demonstrating unbounded favicons I made 11 years ago - it crashes some browsers - wanna guess how long it took each one to fix it :D https://github.com/benjamingr/favicon-bug https://github.com/benjamingr/favicon-bug
- frankzero 4mo agoI personally won't do things this way, but this is really cool and I could see the applications already.
- abc123abc123 4mo agoBravo Maestro! Wonderful performance! =)
- deemwar 4mo agolooks good
- momoraul 4mo agoThe browser already asks for the favicon on every page. Might as well put it to work.
- Gabrys1 4mo agoHave an index.html that's also (byte-to-byte equal) served as favicon.ico. If that page "works" and the favicon doesn't show garbage, it is a website stored in a favicon (by my standards).
- franze 4mo agoalso https://pong-in-a-favicon.franzai.com/ https://pong-in-a-favicon.franzai.com/ for further favicon (mis)use
- franze 4mo agoand the obvious Doom Example https://vidferris.github.io/FaviconDoom/favicondoom.html https://vidferris.github.io/FaviconDoom/favicondoom.html
- Retr0id 4mo ago> You still need a tiny bootstrap loader to decode the image. Nope, you can do it all in a single file with an html/png polyglot (and nowadays you can get better compression ratios with newer formats like webp). https://web.archive.org/web/20120801001616/http://daeken.com/superpacking-js-demos https://web.archive.org/web/20120801001616/http://daeken.com...
- gildas 4mo agoYou can even make the file compatible with ZIP (and PDF) on top of that, see https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/raw/main/demo.png.zip.html https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/raw/... (and https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG)
- fvckaigotohell 4mo agoAI generated garbage. Blocked
- swordlucky666 4mo ago[flagged]
- echoangle 4mo ago> The length header is important because the image itself may contain unused pixels at the end. If there's no length value, there's no way to know where the real payload stops. Not really, can’t you just pad with 0 bytes and stop reading when you encounter one that’s not part of the current Unicode codepoint?
- divvsaxena 4mo agoThis is one of those projects that's completely impractical but makes the web more interesting. I love seeing people explore weird constraints just to see what's possible.
- pradeep4j 4mo ago[flagged]
- cfrs 4mo agoThat reminded me of Inigo's "real pixel coding" https://www.youtube.com/watch?v=FvS_DG8yIqQ https://www.youtube.com/watch?v=FvS_DG8yIqQ A 256b intro coded by placing pixels in photoshop and saving into an exe.
- 1vuio0pswjnm7 4mo agoNot a new idea of course. For example, back in 2000, someone stored deCSS in a favicon https://web.archive.org/web/20010408040524if_/http://decss.zoy.org:80/favicon.ico https://web.archive.org/web/20010408040524if_/http://decss.z... To extract dd bs=1 skip=2238 < favicon.ico
- 1vuio0pswjnm7 4mo ago*2001
- clusmore 4mo agoI'd love to see you try serving the exact same file for both but the trick is that you need to return different Content-Type headers depending on what is requested. When the browser requests /favicon from a navigation event it will use Accept: text/html etc, you return the file with Content-Type: text/html and inside the response you have a <link rel="favicon" href="/favicon" type="img/png"> literally the same resource but the browser will now likely fetch with Accept: image/... and you could return the same file with Content-Type: image/png and the same resource will get used for both. Unless the browser caches the response, I feel like this would work. If you don't control the headers of your webserver (eg GitHub Pages) I would settle for a symlink favicon.png that just links back to favicon.html which I think would trick the server into returning different Content-Types.
- terrycody 4mo agoAny real usage scenarios for this? I mean, can it be used as anti-filter or whatever things.
- econ 4mo agoI played with this once hoping the browser wouldn't care what the file was. The plan came from an experiment from long ago where I put 1x1 images at the end on my pages, the images loaded from websites my page linked to. Preloading the assets made those pages load much faster. Sadly it also broke pages that served "hot linking images not allowed" text on images. The new plan was to have a javascript or css file called favicon.ico so that the browser would load it at the same time the html was requested. Then one wouldn't have to wait for the html to be parsed for the second round trip to happen. Sadly it didn't work.
- creatorpilot 4mo ago[flagged]
- jcubic 4mo agoDoes't work for me. It rendered some garbage: :f3=Ygbukte!in"c"Hbviann:1h3> =n= " Exgtyvhkle znt%pf sdafipg thfiv lmu "vas dcdpeed hron dbvjbno"rixfls, ;.q> I use Helium on Linux with Polish locale.