Published: 20 April 2022 at 14:00 UTC
Updated: 20 April 2022 at 14:07 UTC
Transition based events without style blocks
So, recently, I was updating our XSS cheat sheet to fix certain vectors that had been made obsolete by browser updates. Whilst looking at the vectors, the transition events stuck in my head. They needed a style block as well as the event:
I wanted to remove the requirement of a style block. I wondered what browser styles are added by default? I did a bit of Googling and a page on W3Schools led me to my discovery. Certain tags had focus selectors – this was super interesting, because that would mean that a transition would work with them! Looking through the list I noticed that outline was being used and then I remembered that Chrome puts an outline around an element when you make it focusable for accessibility.
This meant we could remove the requirement of the style block if we applied the transition to the outline property. This vector works with any focusable tag:
Proper XSS hacking! Just like the old days.
SVG “use” element vectors
Here’s the base64 decoded:
xmlns:xlink='http://www.w3.org/1999/xlink' width="100" height="100">
Although you don’t have to use base64 of course – you could also do this:
If you liked these vectors and want to learn more, I’d recommend the XSS section on our Web Security Academy where you can hone your skills with our interactive labs – or visit our XSS cheat sheet to find even more.