3 ms·
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
by Tepix 4mo 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>
- 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
- cogman10 4mo agoIf 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).
- berkes 4mo agoAn 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.
- chrismorgan 4mo agoRegular 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.
- Tepix 4mo agoIt's a hack. A one-liner. Go crazy with it. Or touch grass ;-) Oh yeah and favicon isn't part of the DOM.
- decendegen 4mo agolol
- reichstein 4mo agoJust because it's my windmill to tilt at: `[\s\S]` can be written shorter and more precisely as `[^]`.
- MomsAVoxell 4mo ago[\s\S] vs. [^] A quixotic windmill tilt if ever I saw one.
- GoToRO 4mo agoai says [^] is not portable; I did not test it. Too bad, I'll stick to [\s\S].
- montebicyclelo 4mo 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.
- slash0x4 4mo ago<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="50%" cy="50%" r="50%" fill="orange"/> <p>hello HN!</p> </svg>