Data Exfiltration is my 2nd best CTF category so I really enjoyed scripting this within the limits of CSS. Live demo at the end! Check it out while you're getting your work week started:
https://dev.to/janeori/100-css-fetch-and-exfiltrate-512-bits-of-server-generated-data-embedded-in-an-animated-svg-5aad

Living up to the PropJockey slogan here! :)
"the value of properties, orchestrated"

Watch this new advanced CSS exfiltration hack execute live (in Chrome) in the embedded CodePen demo at the bottom of the article! 16 times more data from a single SVG fetch than the previous hack!

https://dev.to/janeori/100-css-fetch-and-exfiltrate-512-bits-of-server-generated-data-embedded-in-an-animated-svg-5aad

@niutech with solid backgrounds, yep, of course. Even if the fieldset and page have different solid backgrounds, or even fixed backgrounds, that's a path forward. The library solves for all cases

@fnohe
I really appreciate that, thank you very much 💚

Ana's work and willingness to respond to questions is the reason, many years ago, that I started exploring the latest CSS rather than sticking exclusively to cross-browser/widely-available features. Cannot overstate how much I appreciate her!

Forgot to document one of the properties from the library I released at 1 am so I've updated the article - including an additional CodePen demo! 👽💚
https://dev.to/janeori/100-css-s-border-knockout-behavior-for-any-element--4b7b

https://front-end.social/@JaneOri/113791369969210718

Released a new 100% CSS utility library:
https://github.com/propjockey/fieldset-legend

Read all about it here!
https://dev.to/janeori/100-css-s-border-knockout-behavior-for-any-element--4b7b

I might do a followup article on *how* it works if there's curiosity 💚👽

A CSS-only clock that shows you the current time? Why not!

Demo: https://codepen.io/t_afif/full/LEPemRQ via :codepen: @codepen

Online Version: https://css-tip.com/clock/

Don't try to find the hidden JavaScript, it's 100% CSS magic and it's accurate!

Based on a clever idea by @JaneOri : https://dev.to/janeori/getting-your-ip-address-with-css-and-other-32-bit-api-responses-without-javascript-402h

⚠️ a chrome only experimentation ⚠️

#CSS #HTML

Want to know exactly how the CSS GETting your IP Address thing works?

I wrote an explainer, lots of narrative exposition but easy enough to skip to each of the CodePen examples to learn exactly *HOW* it works.

Plus... it ends with a teaser of what comes next! 👽💚

https://dev.to/janeori/getting-your-ip-address-with-css-and-other-32-bit-api-responses-without-javascript-402h

@AmeliaBR OH WAIT.... Maybe I can do that plan already with a simple trade off....................

Lemme finish this exfiltration hack and I'll circle back! NEAT!

THANK YOU!

@AmeliaBR whoo-hoo! Lmao, you're right, one is true, it *is* inefficient.

But!!!

Once we have that function, ident() iirc, that builds identifiers dynamically, I can make it *WAY* more efficient and get rid of the extra element you have to stick everywhere to use this :)

Thank you for taking a look!

Released a new CSS library:

https://github.com/propjockey/css-counter-value

It lets you use counter() vars in calc() without JavaScript.
Plus allows you to calc() to children count globally or locally like counter() does - no localized limitations like :nth-* selectors have.

https://codepen.io/propjockey/pen/GgKMOdz??editors=1100

Plenty of fun!

@AmeliaBR for additional transparency, here's the PHP code that generates the image: https://github.com/propjockey/css-api-fetch?tab=readme-ov-file#setting-up-a-compatible-api-both-versions

@AmeliaBR exactly correct; nothing to worry about.

The server is generating an image with the IP Address encoded into the height and width, then CSS is measuring the dimensions, parsing the numbers with calc() math, and showing the values.

Technically it's unblockable cross-site requests but the exact same thing can happen in JS if JS fetched an image with similar encoding on the dimensions.

Does that make sense?

🤔 If you're building a CSS library, you could easily give your dev users an option on *where* to use your library. Default to putting everything on :root unless their HTML directs confinement

:root:not(:has(.my-library-root)),
.my-library-root {
--bunch-of-library-vars: here;
}

@Schepp @css__cafe sounds fun to me!

I just found the recordings on YT so I'll watch a handful to learn what the format/expectation is :)

@JaneOri @kizu @bramus

Here is my try: https://codepen.io/t_afif/full/EaYvBRb

Was able to make the whole code less than 50 lines! (with a slightly different approach on the backend side)

Now I have a lot of ideas to create with this trick 🤯

Spoiler: the first (easy) idea is to have random() 🤩

#CSS #HTML

@css Yup! RNG was almost my first demo but when I realized IP would be slightly alarming, I went for the laugh

Since I already have css-bin-bits, bitpacking the response into 2 16 bit values was the easy choice. 255255px element is hilarious though hahah
Looking forward to the amazing things that come out of this. url() params() will be a game changer once it's implemented!

@Schepp @css__cafe I could talk about the CPU hack for over an hour uninterrupted lol Would definitely be open to it! I can feel my anxiety skyrocketing already lol

@css Ah! That IS exactly what I figured out for that piece of the library. Prior art ftw, awesome work as usual! 💚
Will update the readme :)

@css @kizu
Here's the new code that hoists the response data to :root https://github.com/propjockey/css-api-fetch/blob/main/api-fetch-root.css

@css your article was incredibly helpful, I wound up doing it differently, backwards from what you did, and used some library specific constants/maximums to help that along. I changed it up because I ran into precision problems doing the 1 - 1 / --progress thing so I had to understand it well enough to avoid any division at all. Worked great and I wouldn't've got there without it! 💚 🙏