<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > The "Quiz Your Friends" XSS Exploit | tait.tech< / title >
< link rel = "stylesheet" href = "/assets/css/style.css" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< / head >
< body >
< div id = "wrapper" >
< nav >
< input type = "checkbox" id = "menu" >
< label for = "menu" > ☰ < / label >
< div class = "menu-content" >
< a href = "/" class = "nav-link" > Home< / a >
< a href = "/tutoring/" class = "nav-link" > Tutoring< / a >
< a href = "/blog/" class = "nav-link" > Blog< / a >
< a href = "/links/" class = "nav-link" > Links< / a >
< a href = "https://github.com/TTWNO/" class = "nav-link" target = "_blank" rel = "noopener noreferrer" > Code< / a >
< / div >
< / nav >
< h1 > The "Quiz Your Friends" XSS Exploit< / h1 >
< h4 class = "post-date line-under" > < / h4 >
< div class = "article" >
< h2 id = "todo-write-intro" > TODO write intro< / h2 >
< h2 id = "how-i-found-this-exploit" > How I Found This Exploit< / h2 >
< p > While filling in one of my friend’
funny for them to know it is me without anyone else knowing.
We were young and had < code class = "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: < code class = "highlighter-rouge" > < b> Steve< /b> < / code > .
Steve is in reference to the < a href = "https://minecraft.gamepedia.com/Player" > main character< / a > in the video game Minecraft.< / p >
< figure >
< img src = "/assets/img/qyf-xss/2-bold.png" / >
< figcaption >
< p > Me typing in my name as < span class = "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 >
< img src = "/assets/img/qyf-xss/3-steve-board.png" / >
< figcaption >
< p > < span class = "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 >
< h3 id = "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 < code class = "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’ < code class = "highlighter-rouge" > < script> < / code > tag.
That would leave 13 characters for Javascript.
Although I’ < a href = "https://code.golf/" > code golf< / a > that, I know I couldn’ < / 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 < code class = "highlighter-rouge" > maxlength< / code > attribute to anything I want.
Let’ < / p >
< figure >
< img src = "/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 able to send something potentially very large (more than a few megabytes) is a vulnerability of its own.
Imagine being able to send entire executable programs as your “name” in one of these quizzes?< / p >
< h4 id = "hacking" > Hacking:< / h4 >
< p > So I went on my merry way thinking about ways to use malicious javascript.
Then, I thought that might be mean, so I decided to warn users instead.
I filled in the name with a script tag and a call to < code class = "highlighter-rouge" > alert()< / code > to warn the user about this site.< / p >
< p > < code class = "highlighter-rouge" > JAVASCRIPT_NAME.JPG< / code > < / p >
< p > I ran out of room before I could finish it. Hmmm.
What if I do “Inspect Element” and manually override the max-length attribute?< / p >
< p > The unfortunate truth is: this worked as well!< / p >
< p > Not only could I manually set the max-length by changing it in the HTML,
but there were no client-side OR server-side checks to make sure the name I was sending was less than or equal to 20 characters.< / p >
< p > If Javascript checked it, it would have stopped me (although maybe not a professional).
If the server checked it, it could have stopped almost anyone.< / p >
< h2 id = "executing-an-exploit" > Executing An Exploit< / h2 >
< p > Suppose we’ < a href = "https://www.quizyourfriends.com/" > Quiz Your Friends< / a >
and you decide you want to hack your friend’
How can this be done?< / p >
< h4 id = "creating-a-quiz" > Creating A Quiz< / h4 >
< p > Here is my quiz below:< / p >
< p > < code class = "highlighter-rouge" > CREATING_QUIZ.IMG< / code > < / p >
< h4 id = "setting-a-name-with-an-html-tag" > Setting A Name With an HTML Tag< / h4 >
< p > Just like the image above, about how I found out about this vulnerability: go ahead and use an HTML tag in your name to test this out.< / p >
< p > < code class = "highlighter-rouge" > BOLD_ITALIC_STEVE.JPG< / code > < / p >
< / div >
< footer >
This page is mirrored on < a href = "https://beta.tait.tech/2020-04-27-quiz-your-friends-xss.html" > beta.tait.tech< / a > .
< / footer >
< / div >
< / body >
< / html >
