Challenge 3: XSS Attachment

[00:00:00]
>> Mike North: All right welcome back, so we're going to jump into this first exercise here, or sorry this third exercise here. The scenario I want you to imagine, we don't have this implemented in our app because it would make this a little bit more difficult to play with, certainly not impossible, but we want to allow image uploads which are hosted on the same domain as our app.

[00:00:21]
The important thing that this introduces is any script that is in this that we can trick the browser into executing, that will be a same origin request with the credentials that are associated with this origin. You'll get that cookie. If you transfer a bank account balance like that, you're credentials will be passed along.

[00:00:43]
So we're gonna allow users to upload images, and for some reason because the product team requested it, you just have the ability to rename stuff. So essentially they end up with the ability to get the squirrel.html file. So we already saw what happens when we visit that URL.

[00:01:02]
Basically it's the same file, it is that squirrel.html and squirrel.jpg in your examples folder. They are byte for byte identical, except based on whether we are requesting it as a document request or whether it's an image, the browser's going to treat it completely differently. So in terms of creating mischief, you have a little tool that I built for you.

[00:01:27]
And I did not build the interesting part of this, which is the library that reads and writes this data. I simply built a little command line thing around it. So I don't deserve much credit here. But you can run node and then it's this program in the script folder called XFJS.

[00:01:43]
You can add double dash help to that if you want to say something similar to what you're looking at now. But basically you can read that text data that's in the comment field of that jpeg header. You can read that and you pipe it to pbcopy. That'll just add it to your clipboard.

[00:02:01]
The other command, the lower one, it'll basically write data in a file that you specify to that jpg header. I'd do it this way because one of the constraints here has to do with this particular exploit, I don't know if it's an exploit. But this particular technique can only be performed if all of your text is on one single line.

[00:02:27]
So you can't have a multiline html document. It has to be one single line. But what we're gonna do for the second example, we'll read everything in scratch.html, which is a file you'd have to create, and it'll put that into the jpg under that comment field. And so using this combination, you should be able to manipulate that squirrel image and cause some trouble with it, and basically put your own text, replace the text that's in there with your own text.

[00:02:58]
So I would advise like, create an HTML file, use the first command to get stuff on the clipboard, paste that in, use that as a starting point because there is some stuff that's useful in there. For example, there are a few characters that begin, think of it like the part of a file that indicates that this is a JPG, that ends up being rendered as text.

[00:03:20]
So if you were to select everything on your screen you'd actually pick that up. But we kind of hide that with a comment so that's why our HTML might begin with a comment so that we get rid of all that garble mess. So there are some things in there you might wanna preserve, but you can experiment with how this works and how the browser responds to different MIME types.

[00:03:43]
Just note that you have to have one line of stuff in that HTML file or whatever text file you wanna create and you can run the second command and it'll write that data to the image and then you can load it again in the browser.