Hacker News new | ask | show | jobs
by Tepix 2 days ago
Instead 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>
6 comments
montebicyclelo 1 day ago
"why not alternative", would be better framed as, "here's a fun variation" — because both approaches are just playing around with technology, for fun / curiosity / exploration. Storing in the pixels is a fun approach, resulting in something Rube Goldberg-esque.
link
weetii 2 days ago
Hey, 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 :)
link
peter-m80 2 days ago
The ico file format allows multiple resolution icons, so a lot of data
link
weetii 2 days ago
Good point, I might add a section in the article where I list alternative approaches. Thanks
link
dodslaser 1 day ago
Or just put the entire website in a <foreignObject> and render it in the favicon.
link
econ 1 day ago
You 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

link
cogman10 1 day ago
If you wanted to play around and do something a little more challenging (though you'd be bulking up the javascript) then one thing you could do is play with a bespoke html compression. You could store the tags in 4 bits `0001` first bit, tag open or close, and the remaining 3 bits indicate which tag is being used (div/p/b/h1/etc). With at least one of the values like `0111` indicating text is following and another tag like `1111` indicating that an unsupported tag follows.

If you extend it out to 8 bits you can pretty nearly store all the html tags (it'd give you 256 tags to play with).

link
chrismorgan 2 days ago
Regular expressions? Ugh. Encode it properly as XML in the correct namespace, load it so, and take it from that.

Or just serve the SVG file and use <foreignObject> to embed the HTML, and include <link rel="icon" href=""> inside it. In theory you should be able to define a <view id="icon"> and use <link rel="icon" href="#icon">, but in practice neither Firefox nor Chromium seems to be handling that properly in a favicon, which is disappointing.

link
Tepix 1 day ago
It's a hack. A one-liner. Go crazy with it. Or touch grass ;-)

Oh yeah and favicon isn't part of the DOM.

link
decendegen 1 day ago
lol
link
reichstein 1 day ago
Just because it's my windmill to tilt at: `[\s\S]` can be written shorter and more precisely as `[^]`.
link
MomsAVoxell 1 day ago
[\s\S] vs. [^]

A quixotic windmill tilt if ever I saw one.

link
GoToRO 1 day ago
ai says [^] is not portable; I did not test it. Too bad, I'll stick to [\s\S].
link
spiesd 1 day ago
Too bad, indeed. It's well-defined in javascript (and thus, appropriate in this admittedly niche context). It's non-portable across different regex engines, yes.
link
GoToRO 1 day ago
exactly what I said
link
berkes 2 days ago
An SVG can embed raster images: base64 encoded bytes.

So you could layer this experiment: favicon is svg, that contains encoded raster, whose bytes are encoded html.

At the very least it would make a mindboggling CTF step.

link
slash0x4 22 hours ago 

  <svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50%" cy="50%" r="50%" fill="orange"/>
    <p>hello HN!</p>
    </svg>
link