Last updated: September 9, 2021
Read time: 4 Minutes
DOM Invader's Augmented DOM tab greatly simplifies the process of injecting and tracking the flow of input through the DOM in order to identify DOM XSS vulnerabilities. This is achieved by injecting a "canary" string.
A canary is just a unique, easily identifiable string that you inject into a source. You can then see whether this string appears in any sinks, confirming that you are able to control their input.
Injecting a canary
DOM Invader generates a random, alphanumeric canary for you. It will automatically monitor the DOM for occurrences of this canary as you browse the target site.
On the Augmented DOM tab, you have the following options for injecting the canary:
- Automatically add the canary to all sources. You can enable this feature from the DOM Invader settings.
- Copy the canary and manually insert it into individual sources via the target site's web interface or the URL, for example.
- Automatically add the canary to each query parameter by clicking Inject canary into URL. If there are none, DOM Invader will add its own parameter to use instead.
- Automatically add the canary to any form fields on the page by clicking Inject canary into forms. In this case, you need to submit the form to actually inject the canary.
If you inject the canary using one of the provided buttons, DOM Invader will also append it with:
- A sequential number, which is unique to each parameter or form field on the page. This will be useful later for determining which sinks are accessible from which sources.
A series of test characters that may be useful for constructing an exploit if they appear unencoded or unescaped in a sink. These characters are:
For example, if the URL contains two parameters, injecting the canary would result in a query string that looks something like this:
Changing the canary
You can change or update the canary that DOM Invader uses at any time. Just click the Burp Suite icon in the upper-right corner of the browser to open the DOM Invader settings, then change the canary to whatever you want. Just make sure you reload the page when prompted.
If you want, you can even set the canary to an empty string. This enables you to view all the known sources on the page.
Identifying controllable sources and sinks
The augmented DOM makes identifying potential DOM XSS vectors just as easy as looking for reflected XSS. After you inject a canary, DOM Invader automatically parses the DOM and generates a tree view of all sources and sinks where your canary appears. It will even sort the list of sinks in order of how interesting they are, with the most interesting ones at the top.
If you expand the tree, you can see the value of the sink, with your canary highlighted.
Once you've identified the controllable sources, you can manually inject probing payloads into each of them to test what you can and can't successfully pass into the different sinks.
Viewing all potential sinks
To get an overview of all the potential sources and sinks that are available on the page, change the canary to an empty string. Note that the presence of a sink doesn't necessarily indicate a vulnerability as you may still be unable to pass malicious input into it.
Searching the augmented DOM
By default, the Augmented DOM tab will show all sources and sinks that contain your canary. However, you can use the Search function to filter the results based on a different string. You might do this in order to:
View only those sinks that are controllable from a specific source. For example, as DOM Invader numbers the canary it injects in each source, you might search for
Check for sinks that are not escaping or encoding characters that may be useful for constructing an exploit. For example, you might inject a double-quote after the canary and then search for
CANARY". This will filter the results so that you only see sinks where double-quotes are rendered normally, which may indicate a vulnerability. Although DOM Invader automatically appends test characters to your canary, you might find that injecting them individually allows you to reach more sinks.
As you type a search string, DOM Invader will automatically highlight any occurrences of this string in the respective source/sink values, just like it does for the base canary.
You can click Search for canary at any time to once again show all sources and sinks that contain the original canary string.
Studying the stack trace
For each source and sink, DOM Invader provides the link for a stack trace. Clicking this link outputs the stack trace to the console.
You can then use this to drill into the client-side code to see exactly where your input is called by the sink.
Remember to use the pretty print option where available.
Studying the context of your injected payload in this way can help you when constructing an exploit. For example, you can look at:
- Which characters and tags are surrounding your input.
- What validation is being performed on your input.
- Whether there are any prerequisite conditions to ensure that your payload flows into the sink. For example, if the sink is only accessible on a particular branch of a conditional statement, any payload you want to inject into it must fulfill these conditions.