Solution for PortSwigger Academy Lab: Reflected XSS into a template literal with angle brackets, single, double quotes, backslash, and backticks Unicode-escaped

The following is my documentation on PortSwigger’s Academy labs.

End Goal: Perform an XSS attack that calls the alert function inside the template string

In this lab the target site will be emulating a blog that handles the search function with JavaScript template literals. We’ll go through what that means and how to take advantage of it, but first a reminder of the general guide we will be using to complete the lab:

Find entry points.
Submit random alphanumeric values.
Determine the context of the entered string.
Test a candidate payload.
Test alternative payloads.

Finding our entry points

If we were bug hunting we would first find and make note of every entry point on the site. The target site has both a search box, and a comment section that we could abuse, but in this case we know that we will be targeting the search box as it is specifically mentioned in the lab’s description.

Submitting random alphanumeric values and determining the context of the entered string

First we’ll enter our random string, “1nfornography” for ego reasons. Once we get a response we’ll inspect the page and keep an eye out for any JavaScript tags and instances where our string appeared.

After inspecting we can find our string appear twice. Once in a <h1> and again insined of a JavaScript tag with document.getElementById. Let’s see if we can poke some holes into this website.

Testing a candidate payload

In this step we will craft a payload and see what happens. If we are lucky we solve the lab and move on with our day. If not, we’ll see what the website does or does not do with it, learn from the response, and iterate our payload.

We’ll try an oldy but a goody:

1nfornography'-alert(document.domain)

Now let’s send it away and see what it does…

…and we have not solved the lab. No worries though, let’s take a look at the site’s code!

We can see under the JavaScript tag that our single quotation was escaped and switched out with Unicode. It also looks like there are some backticks (`) under the tag. This is an important discovery as it gives us a clue as to what is going on. The site uses template literals. But what are template literals?

JavaScript template literals are string literals that allow embedded JavaScript expressions. The embedded expressions are evaluated and are normally concatenated into the surrounding text. Template literals are encapsulated in backticks instead of normal quotation marks, and embedded expressions are identified using the ${...} syntax.¹

Further…

When the XSS context is into a JavaScript template literal, there is no need to terminate the literal. Instead, you simply need to use the ${...} syntax to embed a JavaScript expression that will be executed when the literal is processed.

Crafting our final payload

Now that we know that you can use the ${...} syntax to our advantage it is time to iterate our payload. We’ll just swap out our single quotation and place our alert call into the above syntax. our payload will look something like this

1nfornography ${alert(document.domain)}

…now we just send it away and…

We are successful in solving the lab! What’s more is that if we inspect our the page after accepting the alert window we can see our payload in action.

The site processed our payload without escaping it and we can see that it shows up as “undefined” in the <h1> tag.

Footnotes

PortSwigger: Cross-site scripting contexts, XSS in JavaScript Template Literals ↩︎