title: How is this XSS attack working?
body: <p><strong><em>SPOILER ALERT: This question contains an answer to one of the problems from the <a href="https://xss-game.appspot.com" rel="nofollow noreferrer">Google's XSS Challenge</a>! Please stop reading further if you're not interested in knowing the answer right now.</em></strong></p>
  
  <hr>
  
  <p>I'm able to get pass the <a href="https://xss-game.appspot.com/level4" rel="nofollow noreferrer">level 4 of the challenge</a>, however, I still don't know how exactly the exploit is working. The following is the code from Google's XSS challenge - Level 4:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;!-- Internal game scripts/styles, mostly boring stuff --&gt;
      &lt;script src="/static/game-frame.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="/static/game-frame-styles.css" /&gt;
  
      &lt;script&gt;
        function startTimer(seconds) {
          seconds = parseInt(seconds) || 3;
          setTimeout(function() { 
            window.confirm("Time is up!");
            window.history.back();
          }, seconds * 1000);
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body id="level4"&gt;
      &lt;img src="/static/logos/level4.png" /&gt;
      &lt;br&gt;
      &lt;img src="/static/loading.gif" onload="startTimer('{{ timer }}');" /&gt;
      &lt;br&gt;
      &lt;div id="message"&gt;Your timer will execute in {{ timer }} seconds.&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically, they are using Django framework (<a href="https://security.stackexchange.com/a/27807/22401">which uses a bunch of security measure against XSS</a>). The variable <code>timer</code> carries the input from the user. The goal of this activity is to alert a message by sending a payload which can bypass Django's XSS security.</p>
  
  <p>I'm able to alert a message using one of the following payloads:</p>
  
  <pre><code>');alert('xss
  </code></pre>
  
  <p>OR</p>
  
  <pre><code>3') || alert('1
  </code></pre>
  
  <p>I'm able to clear the level using the above payloads but I'm still not sure where exactly the alert() method is being called? In the <code>onload</code> handler OR within the <code>startTimer()</code> method?</p>
  
  <p>I'm confused because if I check the source HTML of the page after submitting the payload, Django is encoding the payload:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!-- Internal game scripts/styles, mostly boring stuff --&gt;
      &lt;script src="/static/game-frame.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="/static/game-frame-styles.css" /&gt;
  
      &lt;script&gt;
        function startTimer(seconds) {
          seconds = parseInt(seconds) || 3;
          setTimeout(function() { 
            window.confirm("Time is up!");
            window.history.back();
          }, seconds * 1000);
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body id="level4"&gt;
      &lt;img src="/static/logos/level4.png" /&gt;
      &lt;br&gt;
      &lt;img src="/static/loading.gif" onload="startTimer('&amp;#39;);alert(&amp;#39;xss');" /&gt;
      &lt;br&gt;
      &lt;div id="message"&gt;Your timer will execute in &amp;#39;);alert(&amp;#39;xss seconds.&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>