[YesWeHack] - Dojo 22

Butters Adventure v2

Scenario

Definition : DOM Clobbering is an attack where injected HTML may confuse the existing JavaScript application and therefore change the application logic.

Code overview Below is the html code used in this challenge :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<html>
<body>
<span><b id="user" style="color:red">butters@vr</b>:<b style="color:#00BFFF">~</b>$ <b id="cmd">./delete.sh</b></span>
<pre id="out"></pre>
<div>
  <form id="del" action="#delete">
    <input name="inpt" value="$input"></input>
  </form>
</div>
<script>
try {
  //You probably have an HTML injection, whatever...
  if ( document.getElementById("del") ) {
    var out = document.getElementById("out")
    out.innerText = "Butters you're grounded!"
  }
} catch (e) {
  alert("Jippiii, You solved it!!")
  alert("How? -> "+ e)
  //System is crashing!!
}
</script>

<!-- [The code below is design & popup feature once you solve it *only*. It's not a part of the challenge] -->
<img src="https://media4.giphy.com/media/l2QPtMEEbpfkoTcu4/giphy.gif">
<img src="https://media4.giphy.com/media/3oswhnfM4OHdDMjREQ/giphy.gif">
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');body{font-family: 'VT323', monospace;background-color:black;color:whitesmoke;}li{background-attachment:fixed;text-shadow:-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;list-style-type:none;color:lightgreen;font-size:32px;}img{background-attachment:relative;width:300px;height:auto;}input{outline:none;background-color:rgba(0,0,0, 0);color:white;border:0;width:500px;}a{text-decoration: none;color:greenyellow;}span{font-size: 18px;}
</style>
</body>
</html>

First of all, we know that we must catch(e){…}, and that we can perform an html injection in the < input > tag named “inpt” contained in the < form >.

We also have some restrictions regarding the html tags we must use to solve this dojo :

Exploitation We know that to achieve our goal we need to create a new tag with the same name as a function called in the script, so when the function is called it will return the html element we created.

So what happens in the application if we create an html tag with a name like getElementById?

PoC For that we can try this payload :

1

"></input><img name="getElementById

Here we gonna to escape the < input > tag, and create an < img > tag with name=getElementById as we can see in the image below.

If we inject this payload we can see that we have caught an exception and we have the alert.

As expected, the error is TypeError: document.getElementById is not a function, because when the function is called, the DOM will return the tag we injected.

Remediation Before working with objects or functions, make sure to verify their legitimacy. When filtering the DOM, it’s important to ensure that the object or function you’re dealing with is not a DOM node. To write better code, be mindful of common mistakes. For example, it’s best to steer clear of using global variables together with the logical OR operator. To protect against security vulnerabilities related to DOM-clobbering, it’s recommended to use a reliable library like DOMPurify that has been thoroughly tested.