Demystifying an XSS payload: Part 2

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!