In this exercise, we’ll take a closer look at DOM-Based XSS Attacks.

A DOM-Based XSS attack occurs when an attack payload is executed by altering the DOM in the victim’s browser.

The DOM (Document Object Model) is a convention used to represent and work with objects in an HTML document. When a client-side script is executed, it can access various properties of the page and change their values. Websites are usually vulnerable to DOM-Based XSS attacks because of bad JavaScript code altering the front end.

Let’s assume that a site is running code to render a name dynamically, and this code lives within dashboard.html. The code to render the name dynamically might look something like this:

greeting.innerHTML = "Welcome " + name + "!";

Notice how this code is changing the HTML of the page using innerHTML. If an attacker wanted to implement a DOM-Based XSS attack they would inject malicious code into the name input field instead of a plaintext name. Instead of sending their name, an attacker could input a value like:

<script>alert("This is an attack!");</script>

The alert function will then be propagated to the webpage to be executed. Some webpages might accidentally allow for code to be injected in the URL as well. For example, the following URL expects a name as a parameter:


This could potentially allow the attacker to effectively do:


In reality, the attacker would disguise the URL using a URL shortener so that it is not obvious it contains a script. The encoded URL might look like this:




Take a look at dashboard.html and the code written between the <script> tags. What exactly is being done here? Where does the vulnerability lie?

Press Check Work once you think you’ve found the vulnerable code.


Try injecting JavaScript code into the First Name or Hobby field and pressing Receive Your Greeting!

Press Check Work once you think you’ve tried a hack even if the attempt is unsuccessful.


img tags have a common attribute called onerror that executes javascript code instantly if an image does not exist.

In the mini-browser, attempt to inject an alert with the text “Hacked!” by adding an img tag with "bad_image" as the src attribute. It should look like:

<img src="bad_image" onerror="alert('Hacked!')">

You should see a popup on the screen that says “Hacked!”.

Press Check Work once you think you’ve successfully hacked the mini-browser.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?