The GET parameter boomer
is set as boomer.innerHTML
, but the issue is
that the website uses DOMPurify, which sanitizes any Javascript and only leaves behind
script-less parts. The very next statement is a sink, setTimeout
executes code
after a timeout specified in milliseconds. setTimeout
can take a function or
a string as it's argument and execute it. Here the ok
variable is being
executed, but it doesn't exist. Now they question is, can we define that ok
variable ourselves?
Yes, we can.
With DOM
Clobbering. By
injecting HTML elements into the DOM, we can create Javascript variables. So in our case we need
to create the variable ok
. To do so, we'll create an Anchor
Tag
because if we create an anchor tag with the id
set to ok
, then the
browser automatically creates a variable named ok
in Javascript. There's another
reason why we choose the anchor tag and it's because, when toString()
is called on
an anchor tag, it returns the href
property of that anchor tag object. This is
useful because not only we can control the variable creation, but also it's string value. So in
our case, when setTimeout
tries to call the provided function ok
as
the argument, it realises that it's not a function, so it calls the toString()
on
it which returns the href
property which gets executed.
<a id=ok href=tel:alert(1337)>
Things to note:
href
cannot be any arbitrary string, it has to follow
protocol:host
format, if the string doesn't follow the format, it's value
will be BaseURL/yourString
.
tel:alert(1337)
is also a valid Javascript, because it follows
label:code
syntax.
tel
is used because it's whitelisted
as one of the safe protocols to be allowed
by DOMPurify.