We know that, in DOM-Based Attacks, the malicious code is client-side. To prevent this attack developers must be very careful with the type of code used in the browser.
To be more specific, these types of attacks happen when data from a user-controlled source (like user name or redirect URL taken from the URL fragment) reaches a sink, which is a function like eval()
or a property setter like .innerHTML
, that can execute arbitrary JavaScript code.
There are several methods and attributes which can be used to directly render HTML content within JavaScript. If these methods are provided with malicious input, then an XSS vulnerability could result. For example:
// Attribute: element.innerHTML = "<HTML> Tags and markup"; // Method: document.write("<HTML> Tags and markup");
Instead, one can replace these methods with an attribute like textContent
.
// Will add as an actual HTML element. element.innerHTML = "<maliciousHTML>"; // Will render as text on the webpage. element.textContent = "<displaysAsText>";
Ideally, one could take a step further and avoid rendering user input, especially if it affects DOM elements such as the document.url
, document.location
, or document.referrer
.
Lastly, one should validate and sanitize all user input in order to prevent any data manipulation.
Instructions
In our index.html file, we currently have a line of code within our <script>
tags to display the current Uniform Resource Identifier (URI):
document.write("<b>Current URL</b> : " + document.baseURI);
Note: A URL is a type of URI. The term URL is more specific and specifies details about which protocol to use while the term URI is more general.
Let’s separate the HTML and JavaScript code. Display the “Current URL” within the <section>
tags instead.
- The text
Current URL:
should be enclosed in<b>
tags. - Follow that with a
<span>
tag that has theid
"contentholder"
. Make sure to leave the content in the<span>
tags empty.
Now, set the <span>
‘s content equal to document.baseURI
.
- Use the
getElementById
method to target the<span>
with theid
"contentholder"
. - Once targeted, append the
textContent
method to it. - Next, make this element’s text content equal to
document.baseURI
. - Once completed, make sure to comment out the original
document.write
method.