Demystifying an XSS payload: Part 2
Yet another XSS payload reversing writeup. Hang on to learn more on event capturing & bubbling and tabindex attribute!
XSS is FUN! Super common and super easy to understand. But as we progress more and more, easy XSS bugs leveraging alert(1) are becoming rare.
And you must have seen a lot of different payloads that amazing researchers like Gareth Heyes, Michal Bentkwoski, Dr. Mario Heiderich, Terjanq come up with…
The payloads look cool and mysterious but if you don’t understand those payloads, they don’t serve you well right — how do you know when to use a specific payload. Get the point right!
So its quite important to understand what’s the use-case for a payload. Otherwise it is as good as a tool in the hands of a script-kiddie! And you might not like to be called one, right?! Atleast I don’t!!
And therefore, you have to understand what the payload actually does, under-the-hood, why does it works, how does it do what it does, … Right!
And therefore I am writing this post to tell you about another (maybe common), but quite interesting XSS payload.
Maybe you already know what this payload does, but maybe you don’t fully understand all the details… So it might be better to hang on and see what I have to say about it :)
In the end, it will all be worth it!
The Payload
So here’s the payload, that we have been talking about till now:
<some_tag id=x tabindex=1 onfocus=alert(1)></some_tag>
where, some_tag can be an existing HTML tag or a custom tag.
Say you found an XSS vulnerability on a website and were able to slip in this payload and it worked, gave you a nice alert box and maybe some cash as well.
Now what? We’re done and let’s look for another target right? NO!
Let’s stick in and see what this payload even does.
Can you tell me what tabindex is? What if its not there? Will things still work?
What if tabindex is set to something other than 1. Why do we need id attribute?
Ask questions! It’s quite important.
The Answers
Let’s cover things and assemble them piece by piece. Slow and easy :)
What’s tabindex?
My friend — MDN — tells me this:
I am sure you must have seen pages containing text fields, buttons etc and when you press TAB key, you would have seen those fields get a border (that is, it got the focus).
Consider this simple HTML page:
When I press tab, you can see the text box gets light up and then the Submit button gets this border or colored outline (depending on which browser you are using!).
This happened because these elements are present in the tab index and thus participate in the keyboard navigation.
Great but what’s tabindex anyways?
Not every element can get focus this way — take div tags for instance or a paragraph (p tag). In that case we can use the tabindex attribute to tell the browser — “Hey we would want to make this element focusable, please add it to the navigation sequence.”
Let’s add a few divs to the navigation sequence:
Notice that I have added a few div’s all having tabindex attribute.
If you try to press TAB key, div with the content “World?!” gets into focus.
If you press TAB again, it moves to “Okay??!”, next it goes to “Woah??!” and then to “LOL??!” and finally to the input and button, as you press TAB again and again.
Great! But what about the very first div — it also had the tabindex attribute right. But that was set to -1, meaning it won’t be added to the navigation sequence but using Javascript, we can focus on it!
And now you might be thinking — “Okay great! I can make a focusable element using this trick. But where does it helps?”
Great question! When an element can be focused, if you have assigned an id attribute to it, you can reference that from the URL itself (using the fragment to focus on a particular section of the page).
And if you check the payload again, it suddenly starts to make more sense:
<some_tag id=x tabindex=1 onfocus=alert(1)></some_tag>
What it really does is: Makes the tag focusable and assigns it an id so we can reference it in the page URL (in the fragment). And onfocus, our sweet XSS payload would get triggered!
You could have used onfocusin or onfocusout attributes as well, which would get triggered when the element is about to gain focus or about to loose focus, respectively.
Btw if you are curious and check the focusin event page on MDN:
You might see the words like focusin bubbles while focus does not.
What does it means? Surely Javascript is not mocking at us right now and making bubbles lol!
Capturing & Bubbling
So here’s a quick primer on what capturing and bubbling means.
Say you have 3 div elements one inside the other:
What would happen if I have defined an onclick event on all the 3 divs and I click the innermost div? Will add the 3 div’s get the event? That is, will the event propagate?
And if it will then how will it go — outside in or inside out?
And that’s what capturing and bubbling is all about — whether it is outside in (capturing) or inside out (bubbling).
When an event happens on an element, 3 phases occur — capture phase, target phase and bubbling:
And thus, if we want to inform the parent about an event happening on the child before target child gets to know it, we would go for event capturing. And if we need to get notified after the target child has been notified, we would go for bubbling.
So in short its just — when do you wish to know about the event happening on the child — before or after.
That’s what capturing and bubbling means.
So, focusin bubbles means that the parent will get notified of the child being in focus after the child has come to focus. Nothing fancy there…
Closing Thoughts
I hope you enjoyed this post and learnt something interesting. Or maybe it was a payload you already knew about, but hopefully I gave to an important point to always dig deeper and understand what the payload actually is all about! This will take you much ahead and give you an edge over your peers and maybe personal satisfaction :)
Let me know your feedback in the comments below and feel free to connect on twitter: @_SecurityGOAT
Lastly, if you have been enjoying my work and would love to support me, consider checking my Patreon page or you can even Buy Me a Coffee :)
See ya!
Until next time, keep learning and happy hacking.
