DOM-based XSS – The 3 Sinks

The most common type of XSS (Cross-Site Scripting) is source-based. It means that injected JavaScript code comes from server side to execute in client side.

But there’s another main type, the DOM-based one, where injected malicious input does not come from server via reflected or stored means: XSS is generated in client side by native JavaScript code.

DOM-based XSS also has reflected and stored sub-types, pretty much like it’s counterpart, the source-based XSS. They are exactly the same, with reflected/stored being provided by browser itself via its JS engine and client side storage.

However, unlike in the simple request/response model, DOM-based XSS might involve a lot of analysis of code flow in order to catch it. It’s hard to spot this flaw for static and even dynamic analysis tools.

Sources and Sinks

The DOM (Document Object Model) is the resulting program built over the HTML document received from server (source code) with JavaScript code. As you might know, that code comes embedded into the HTML document via script blocks and/or imported libraries. JavaScript code turns all HTML elements into objects and can manipulate them, altering the document in any possible way at run time.

We have almost the same XSS logic in client side as we have in server side: we need something responsible for the input and another for the output. In server side we have things like $_GET[“var”] or $_POST[“var”] for the input and echo or print commands for the output in PHP language to make our XSS situation arise.

In client side code we have sources and sinks. Think about sources as our inputs and sinks as our outputs. Sources are object properties like document.location, document.referrer, and even the parameters of the URL (after being handled) like in server side XSS. The list is huge because everything can be manipulated by JavaScript and become a potential source of a sink.

So in order to get our study of DOM-based XSS easier let’s look first at the sinks because there are only 3 main cases. Below is a page to demonstrate them. If you are experienced enough with XSS or just want to train yourself, stop this reading right now and XSS them following our #hack2learn principle.

The 3 Sinks

In our demonstration page, we have the following source code:

It has only one element, a paragraph which is dynamically updated by the native JavaScript code in the only script block of the page. There are no imports, no libraries. All 3 cases are highlighted by means of 3 lines of comments to define where the snippet of code responsible for each one of them starts.

Before the first case, Document Sink, our code starts with the API to make possible to handle the value of URL parameters: after taking the search property of document’s location (which itself is property of document) we then create a new object implementing URLSearchParams.

Document Sink

In the Document Sink, the native JavaScript code updates the current document with data controlled or provided by attacker. It makes possible the insertion in the DOM of a whole new HTML tag with javascript code or a new attribute which might be an event handler with JS code.

The value of URL parameter “name” gets stored in “username” variable for later use in an update of the document. If that variable is not null, the paragraph element is updated with the content “Hello” plus the content provided in the URL via “name” parameter. That makes possible for an attacker to insert HTML code with:<img+src+onerror=alert(1)>

Important to note here is the fact that classic “<script>alert(1)</script>” won’t work. Also several other XSS vectors because it’s a DOM insertion not a simple source reflection. Just a few will work like the one provided above.

Document Sink can appear in many ways: with innerHTML and outerHTML element properties, with document.write(), document.writeln() functions and any other way provided by JavaScript libraries to update an element or the document.

Location Sink

In the Location Sink, the native JavaScript code updates the location of the document with data controlled or provided by attacker. In this way, it’s possible to use an interesting feature of modern browsers: the JavaScript pseudo-protocol.

By taking the value of “redir” parameter the code above makes possible to redirect the browser to another address, loading another document. If we use a site we control, it would be of no use to attack a target application, since we would be out of context.

But by using the JavaScript pseudo-protocol, which is a way to run JavaScript code directly into the address bar of browsers, it’s possible to run code over the current document and its context.

In the past, data URI was used to replace that trick when “javascript” keyword was flagged by application filters and WAFs (Web Application Firewall). But now modern browsers provide a blank context for JS execution or don’t even allow the navigation anymore as a security measure.

Execution Sink

In the Execution Sink, the native JavaScript code updates its own code flow with data controlled or provided by attacker.

Usually evaluation sinks make part of big and complex code so above we will see a very simple one: there are 3 variables, one for each major stock index: Nasdaq, Dow Jones and S&P 500. Let’s not consider that their values would  come from a database in a real application, so they are not constantly changing.

The “market” object is created. After getting from URL the value of “index” parameter (to know which index to look for) we try to ensure it’s a string with toString() conversion (just a silly way to try to avoid the outcome). Then our code creates in the object “market” the property “index”, dynamically, with “eval” function. Finally, the current value of the queried index is displayed in the paragraph.

An attacker can simply XSS this by providing the JS code he/she wants to run:

Because that code will go straight to evaluation, it’s simple like that. In real world applications, most probably it will require passing some test or assignment according to code flow in order to reach the flawed point.

Other execution sinks besides “eval” are “setInterval” and “setTimeout” functions and template literals.

Those were the 3 sinks we should be aware of when looking for DOM-based XSS.


Chrome XSS Auditor – SVG Bypass

More than an year ago, in my private twitter account Brutal Secrets, I shared an interesting way to bypass Google’s Chrome anti-XSS filter called XSS Auditor. We will see now in details, from a blackbox perspective, a logical sequence of assumptions and conclusions that leads to our XSS vector responsible for the bypass.

We start with a known source of trouble for all XHTML parsers (browsers) out there: Scalable Vector Graphics or SVG. Without getting deeper into the explanation of what SVG can do (check here), all we need to know is that SVG markup is way more complex than simple XML/HTML and full of unexplored resources for an attacker.

Starting with a simple <svg> tag we proceed using an empty anchor, the <a> tag that creates an hyperlink. Nested to this anchor we will use a rectangle to create a larger clickable area, ending up with something like this:

<svg><a><rect width=100% height=100%>

check here

We are now looking for a way to interact with the element but we can’t use event handlers due to Auditor’s blocking. So we will try one of the tags used in animations, notably the <animate> one. The <animate> tag takes an attribute (with attributeName) of a parent element (in our case the <rect> one) and manipulates its value, like “width” for instance. It creates the animation effect with the help of its own attributes “from”, “to” and “dur” (duration).

<svg><a><rect width=100% height=100%><animate attributeName=width from=0 to=100% dur=2s>

check here

The interesting conclusion here is that we are in fact changing the original value of “width” attribute, in sequence. But what if we target a different attribute? Let’s take the href of the anchor (<a>) which is not set but is implicit. With some tweak in attributes and a self-closed <rect>, we are ready to go.

<svg><a><rect width=100% height=100% /><animate attributeName=href to=//>

check here


<svg><a><rect width=100% height=100%><animate attributeName=href from=// to=?>

check here

By clicking in our rectangle now, we are redirected to Google’s website. So to pop an alert box, we will just try to change it to “javascript:alert(1)”.

Not that easy. Even an attempt to fool Auditor using HTML encoding gets blocked.

<svg><a><rect width=100% height=100% /><animate attributeName=href to=javas&#99ript:alert(1)>

check here

We get back to SVG Attribute Reference and find an interesting alternative to “from” and “to”: animation elements can also use a “values” attribute which provides the same set of values for the animation.

By simply setting “values” to “javascript:alert(1)” we get blocked again. But, surprisingly, this time we pop an alert using the HTML encoded form, “javas&#99ript:alert(1)”. Strange enough, any other arbitrary attribute with our obfuscated payload will fire a blocking but that one seems “whitelisted”!

We change the <rect> for an <image> tag, more suitable to attract a victim’s click. A little addition of text/markup and… Boom!

<svg width=12cm height=9cm><a><image href=// /><animate attributeName=href values=javas&#99ript:alert(1)>

check here

This bypass was found in version 51, although it might work in several past versions. It currently works on Google Chrome v60, the latest version at the time of this publication.


The 7 Main XSS Cases Everyone Should Know

When reading material on XSS subject we usually see the classical <script>alert(1)</script> as an demonstration of such vulnerability (PoC – Proof of Concept). While very true, it doesn’t go much beyond this, making the novice in this field to look for more in order to deal with real world scenarios.

So here are the 7 cases everyone should know to be able to exploit the vast majority of XSS flaws out there. A web page to show them with their variations (single or double quotes) was built to training (click to go to it):

Right in the beginning of the source code, there’s a HTML comment with all parameters to trigger each case. All of them work for both GET and POST requests.

As you might notice, all cases are source-based which means that injection always appears in source code retrieved in the body of an HTTP response. Independent of being of reflected or stored type, important here is the context where they appear when DISPLAYED so we will always use the reflected one as main example. There are XSS flaws that don’t appear in source code, the DOM-based ones, which won’t be covered here.

Remember to try examples below only in a browser without native XSS filtering, like Mozilla Firefox.

1. URL Reflection

When URL is reflected somehow in source code, we can add our own XSS vector/payload to it. For PHP pages it’s possible to do add anything in the URL after page name (without changing it) with the use of a slash character (/).

1.”><svg onload=alert(1)>

The leading tag breaking (“>) is needed to break out of the current tag an make possible the insertion of a new one.

Although there are several reasons for different languages (reflection might appear in path or in URL parameters too), for PHP the culprit usually is the global variable $_SERVER[“PHP_SELF”] in action field of submission forms.

2. Simple HTMLi (HTML injection)

The most straightforward one, input is reflected just right in the code between existing tags, after or before them. Without the need to escape or break anything, any simple XSS vector like the ones in the form of <tag handler=jsCode> does the job.

2.<svg onload=alert(1)>

3. Inline HTMLi

Almost simple as the previous one but with a little “> prepended to break out of the current tag.

3.”><svg onload=alert(1)>

4. Inline HTMLi: No Tag Breaking

When input lands in an HTML attribute and there’s filtering of greater than character (>), it’s not possible to break out of current tag like in the previous case.

So we use an event handler appropriate to the very tag we are injecting into, like:

4.” onmouseover=alert(1)//

Which closes the value and gives room to insertion of the onmouseover event handler. Pointing to alert(1) followed by double slashes to comment out the hanging quote, that triggers the js popup when victim points his/her mouse over the affected input field.

5. HTMLi in Js (Javascript) Block

Input sometimes land into a javascript block (script tags), usually in the value of some variable of the code. But because the HTML tags has priority in the browser’s parsing, we can simple terminate the block and insert a new tag.

5.</script><svg onload=alert(1)>

6. Simple Js Injection

If the script tag is being filtered somehow, previous exploitation will fail.

So the way to go is to inject javascript code, respecting the syntax. One known way to do that is by “concatenating” the value of vulnerable variable to our desired code to execute. Because we can’t let any quote hanging, we break first, concatenate to our code (with minus sign) and then do the reverse (concatenate and then insert a quote) to get a valid javascript syntax.


7. Escaped Js Injection

In the previous case, if the quote (which is responsible for the break out of the variable’s value) is escaped with a backslash (\), injection won’t work (invalid syntax).

For that, we have a little trick: escaping the escape. We insert a leading backslash to escape the added one and then the quote will work to break. After “concatenation” to our desired js code, we need to comment out the rest because there’s no way to repeat the process in the remaining side of the injection.




Last but not least, all cases presented here are handled by our online XSS discovery service KNOXSS, in Standard and Pro versions. Check it out!