Challenge 3: Solution

[00:00:01]
>> Mike North: I'm just gonna demonstrate how you could change this little file we've been playing with and replace the content that's in there, this HTML, or what the browser is treating as HTML, with your own text. So I'm just gonna copy this from the slide, it's a command that basically runs a little node script, which we can see what the node script does by itself.

[00:00:27]
It'll read a file as an image. I know it has an HTML extension there, that's just so we can view it as HTML. But you can see that this is the text, this matches what the browser is rendering, right? So if we pipe that to pbcopy, it'll end up on our clipboard.

[00:00:46]
And we're just gonna create a new file here called scratch.html.
>> Mike North: And I can paste the contents of that in here, make sure that we're dealing with only one line. And what we can do then is we can run a command that instead of saying read here, it's just gonna say write.

[00:01:07]
And we can add one more argument, and that is the file from which text content is going to be read. What this program will do is it'll insert that content into the image here. So if I were to say,
>> Mike North: Instead of, let's just change the h1 tag which is here, hello students.

[00:01:31]
>> Mike North: We'll say hello squirrels.
>> Mike North: There's no squirrel. We'll do a hamster.
>> Mike North: Okay, so now we get to see if Unicode characters,
>> Mike North: Throw this for a loop or not.
>> Mike North: So here's what we're gonna do. We can write to this file, so just here's the piece that we edited.

[00:02:01]
>> Mike North: Save it, run this program. Okay, so it's showing us the original data. The existing data it found was hello students, right there. And here we've got,
>> Mike North: It still says updated data, interesting. Let's do a refresh and see if that's just a bug in the program.
>> Mike North: And did we edit the right spot?

[00:02:33]
>> Mike North: Interesting, there's write, squirrel, scratch.
>> Student: There is an HTML file, though.
>> Mike North: That's a good question.
>> Student: Like you write to HTML file.
>> Mike North: That's it.
>> Student: No, you write two examples, HTML, not to JPEG, right? You should be writing to JPEG since it's EXIF.
>> Mike North: It could be, but,

[00:03:02]
>> Mike North: Interesting.
>> [INAUDIBLE]
>> Mike North: So, there's my scratch.
>> Mike North: I'm running this three times like I'm gonna get a different result here. So, let's see, let's just try to make this like foo.
>> Mike North: Interesting, it does not wanna update my data for some reason.
>> Student2: Wanna try writing to the JPEG file?

[00:03:35]
>> Mike North: Okay, let's try that. Maybe there's some sensitivity to file type here. So I'm just gonna change this back to a JPEG, rename it.
>> Mike North: We're gonna read the data from that file. So read it from the JPEG, pipe it to pbcopy.
>> Mike North: Get rid of this. And what's on our clipboard?

[00:03:57]
That is what we expect. So now if we change that,
>> Mike North: And save it in our scratch and write, but this time to a JPEG.
>> Mike North: We've got squirrels. Okay, so apparently the library I'm using does not want to write to things that have that HTML extension. So we'll rename it back, refresh, and we've got Hello Squirrels.

[00:04:28]
So what we've shown here, we can put arbitrary text in this file. The browser will treat it as HTML. If you look at the HTML, you'll note at the very end, we've got this comment field. If we were to leave that off, let's see what would happen. So, I'm gonna save this file.

[00:04:45]
We're going to write it again. Oops, undefined is not a function cuz there's no JPEG there. So, let me copy this. So we'll say mv examples /squirrel.html examples/squirrel.jpg. Then run this command then,
>> Mike North: Yep, thank you.
>> Mike North: Okay, let's see how far we got there.
>> Mike North: Okay, so let's just do it step by step rather than try to three shot it here, or one shot it.

[00:05:52]
>> Mike North: So there's none of that, which is fine. So now we'll run our little write thing.
>> Mike North: Okay, and now we'll rename it. Just do it the way we did before.
>> Mike North: So if we didn't have that comment at the end,
>> Mike North: Is it still, now the comment's back.

[00:06:17]
Save, rewrite.
>> Mike North: We've gotta rename again.
>> Mike North: There we go. Now it's undefined cuz scratch.html has nothing. Is that why?
>> Mike North: I know, I've been accidentally manipulating that file there. All right, once more, I'm gonna start this from the top. I'm just gonna reset that image.
>> Mike North: So now squirrel.jpg, that is a squirrel.

[00:06:55]
If we click on it, this looks like a squirrel, as everyone can clearly see. So we will read that data out to our clipboard, and that is this command here, the one that says read. Okay, we've got that, we’ll paste it in our scratch. I’m just gonna delete that comment at the end and save this, and we will write that back out to the image.

[00:07:21]
>> Mike North: And now we can rename this to an HTML file.
>> Mike North: And when we refresh, you see all this junk at the bottom. So this where when you're testing for these things, oftentimes we'll have the leading part of a comment or the trailing edge to close an existing comment.

[00:07:40]
When you're doing XSS type stuff, oftentimes you're trying to basically get yourself out of one context or into another, or into one context, or to finish off and hide a bunch of crap. Effectively what's been done here, and even if we look at the CSS, there's some work to, this is why I suggested you start with this as a baseline.

[00:08:03]
There's this piece of thing in the body. And effectively, what's happening here is the body is invisible. There's that visibility hidden. And then this is the div that's only it is visible, right, the body is by default hidden. If we turn that on, you would clearly see there's some shenanigans going on here.

[00:08:22]
So you can create something that looks completely normal by putting together CSS and a little comment escaping and so on. So that is code injection into an image.