Defacing

What is Defacing?

Defacing is a common attack that exploits stored XSS vulnerabilities to alter the appearance of a website for all users. It's often used by hackers to display a message or claim responsibility for the breach. Notably, hackers defaced the UK NHS website in 2018.

Stored XSS vulnerabilities are frequently used for such attacks because they persist across user sessions.

Defacement Elements

We can utilize injected JavaScript code (through XSS) to make a web page look any way we like. However, defacing a website is usually used to send a simple message (i.e., we successfully hacked you), so giving the defaced web page a beautiful look isn't really the primary target.

Four HTML elements are usually utilized to change the main look of a web page:

• Background Color: document.body.style.background
• Background Image: document.body.background
• Page Title: document.title
• Page Text: DOM.innerHTML

These can be used together to deliver a persistent message and remove original content.

Changing Background

To change a web page's background, we can choose a certain color or use an image. We will use a color as our background since most defacing attacks use a dark color for the background. To do so, we can use the following payload:

Payload to change background color:

<script>document.body.style.background = "#141d2b"</script>

• Sets background to a dark color (e.g., Hack The Box's default).
• Note: We can use any other hex value, or can use a named color like black.

Once we add our payload to the To-Do list, we will see that the background color changed:

• This will be persistent through page refreshes and will appear for anyone who visits the page, as we are utilizing a stored XSS vulnerability.

Payload to change background image:

<script>document.body.background = "https://www.hackthebox.eu/images/logo-htb.svg"</script>

Changing Page Title

We can change the page title from 2Do to any title of our choosing, using the document.title JavaScript property:

Payload:

<script>document.title = 'HackTheBox Academy'</script>

• Alters the browser tab title.

We can see from the page window/tab that our new title has replaced the previous one:

Changing Page Text

When we want to change the text displayed on the web page, we can utilize various JavaScript functions for doing so. For example, we can change the text of a specific HTML element/DOM using the innerHTML property.

Change specific element text:

document.getElementById("todo").innerHTML = "New Text";

We can also utilize jQuery functions for more efficiently achieving the same thing or for changing the text of multiple elements in one line (to do so, the jQuery library must have been imported within the page source).

Using jQuery (if loaded):

$("#todo").html('New Text');

This gives us various options to customize the text on the web page and make minor adjustments to meet our needs. However, as hacking groups usually leave a simple message on the web page and leave nothing else on it, we will change the entire HTML code of the main body, using innerHTML, as follows:

Replace entire body content:

document.getElementsByTagName('body')[0].innerHTML = "New Text";

As we can see, we can specify the body element with document.getElementsByTagName('body'), and by specifying [0], we are selecting the first body element, which should change the entire text of the web page. We may also use jQuery to achieve the same thing. However, before sending our payload and making a permanent change, we should prepare our HTML code separately and then use innerHTML to set our HTML code to the page source.

Final Defacement Payload:

<center>
    <h1 style="color: white">Cyber Security Training</h1>
    <p style="color: white">by 
        <img src="https://academy.hackthebox.com/images/logo-htb.svg" height="25px" alt="HTB Academy">
    </p>
</center>

Tip: It would be wise to try running our HTML code locally to see how it looks and to ensure that it runs as expected, before we commit to it in our final payload.

We will minify the HTML code into a single line and add it to our previous XSS payload. The final payload should be as follows:

<script>document.getElementsByTagName('body')[0].innerHTML = '<center><h1 style="color: white">Cyber Security Training</h1><p style="color: white">by <img src="https://academy.hackthebox.com/images/logo-htb.svg" height="25px" alt="HTB Academy"> </p></center>'</script>

Once we add our payload to the vulnerable To-Do list, we will see that our HTML code is now permanently part of the web page's source code and shows our message for anyone who visits the page:

By using three XSS payloads, we were able to successfully deface our target web page. If we look at the source code of the web page, we will see the original source code still exists, and our injected payloads appear at the end:

<div></div><ul class="list-unstyled" id="todo"><ul>
<script>document.body.style.background = "#141d2b"</script>
</ul><ul><script>document.title = 'HackTheBox Academy'</script>
</ul><ul><script>document.getElementsByTagName('body')[0].innerHTML = '...SNIP...'</script>
</ul></ul>

This is because our injected JavaScript code changes the look of the page when it gets executed, which in this case, is at the end of the source code. If our injection was in an element in the middle of the source code, then other scripts or elements may get added after it, so we would have to account for them to get the final look we need.

However, to ordinary users, the page looks defaced and shows our new look.

Result

Injected scripts modify the web page's appearance, despite original content being intact in the source. This leads users to perceive the site as defaced, especially when injected code runs at the end of the HTML source.