<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>The "Quiz Your Friends" XSS Exploit | tait.tech</title><linkrel="stylesheet"href="/assets/css/style.css"><metaname="viewport"content="width=device-width, initial-scale=1.0"></head><body><divid="wrapper"><nav><inputtype="checkbox"id="menu"><labelfor="menu">☰</label><divclass="menu-content"><ahref="/"class="nav-link">Home</a><ahref="/blog/"class="nav-link">Blog</a><ahref="/links/"class="nav-link">Links</a><ahref="https://github.com/TTWNO/"class="nav-link"target="_blank"rel="noopener noreferrer">Code</a></div></nav><main><header><h1>The "Quiz Your Friends" XSS Exploit</h1><spanclass="post-date"></span></header><hr><divclass="article"><h2id="todo-write-intro">TODO write intro</h2><h2id="how-i-found-this-exploit">How I Found This Exploit</h2><p>While filling in one of my friend’s surveys I thought it would be funny for them to know it is me without anyone else knowing. We were young and had <codeclass="language-plaintext highlighter-rouge">Inspect Element</code>ed a few things together, so it was a safe bet that an HTML joke would let them know.</p><p>I decided to write my name like so: <codeclass="language-plaintext highlighter-rouge"><b>Steve</b></code>. Steve is in reference to the <ahref="https://minecraft.gamepedia.com/Player">main character</a> in the video game Minecraft.</p><figure><imgsrc="/assets/img/qyf-xss/2-bold.png"/><figcaption><p>Me typing in my name as <spanclass="mono"><b>Steve</b></span>.</p></figcaption></figure><p>Now in theory this should have shown in in the leaderboard as: “<b>Steve</b>” However, to my horror and excitement, I saw this in the leaderboard:</p><figure><imgsrc="/assets/img/qyf-xss/3-steve-board.png"/><figcaption><p><spanclass="mono"><b>Steve</b></span> displaying in the leaderboard as bold text: <b>Steve</b></p></figcaption></figure><p>The text “Steve” showed up <strong>in bold</strong> on the leaderboard. This told me all I needed to know. How did this happen? You might wonder.</p><h3id="server-side-validation">Server-Side Validation</h3><p>Here is a great demonstration why you should do most of your validation on the server side. As a user, I can edit any of the HTML, CSS, or Javascript your server serves to me.</p><p>Quiz your friends uses the <codeclass="language-plaintext highlighter-rouge">maxlength=20</code> HTML attribute on the name input field. Imagine trying to fit in a script tag doing anything useful with 20 characters! Don’t forget that includes the <codeclass="language-plaintext highlighter-rouge"><script></code> tag. That would leave 13 characters for Javascript. Although I’m sure a genius would be able to <ahref="https://code.golf/">code golf</a> that, I know I couldn’t.</p><p>Now obviously I can edit any HTML that a server has sent to me. If I open up my inspect element window, I can go ahead and change that <codeclass="language-plaintext highlighter-rouge">maxlength</code> attribute to anything I want. Let’s change it to 100!</p><figure><imgsrc="/assets/img/qyf-xss/5-maxlength.png"alt="An image of the Quiz Your Friends name input field with inspect element. THe code reads: <font class="style6"><input class="inputbutton" name="takername" type="text" id="takername" maxlength="20" width="425" placeholder="Your First Name" style="text-align: center; text-decoration:inherit; font-size:38px;" tabindex="-1"></font>"/><figcaption> Manually changing the maxlength attribute. </figcaption></figure><p>In theory, there is a way that a site can stop people from just putting in their name of any length: server-side validation. The server <em>could</em> check to see if the input is too long and reject it if it is. The Quiz My Friends server has <em>no such checks in place</em>. Therefore, I can send an almost arbitrary load to them. Being
