Check out a free preview of the full Web Security course
The "Challenge 8: Solution" Lesson is part of the full, Web Security course featured in this preview video. Here's what you'd learn in this lesson:
Mike walks through the solution to Challenge 8.
Transcript from the "Challenge 8: Solution" Lesson
[00:00:00]
>> Mike North: Welcome back, so we're gonna add subresource integrity to our external assets. First thing, that we're gonna do is can we unfreeze? Perfect, so we're gonna add subresource integrity attributes to our external assets. And what we're gonna do first is, we'll go to our main layout because that's where our static assets are coming from.
[00:00:25]
It's these two here we're interested in. These and this one as well. So we can say, integrity equals and then, we're going to let the browser complain to us. And tell us exactly what those values should be as it's saying, it doesn't like them. And the last thing is, sorry, it's cross origin anonymous.
[00:00:57]
>> Mike North: This says, do not send cookies or authentication credentials along with the request, just ask for it directly. We'll save this, we'll go back here, we'll refresh. Let's make sure that our apps running in the foreground. There it is, and I expected it to complain about a bunch of stuff, let's see.
[00:01:23]
>> Mike North: Maybe, I spelled something wrong. Let's add some junk here.
>> Mike North: There we go, integrity attribute. Okay, let's add this, there we go. So it looked like, I had to attempt to add an invalid integrity attribute, starting with sha256. That just describes the algorithm that was used to make this hash of that script content.
[00:01:57]
But now, we have legit values here. So this is the legitimate value for the MUICSS, we'll put that into place. So that's this first one, just drop it right there. The second one is for the style.css. We'll grab that all the way to that quote, paste it over, and that's this one.
[00:02:21]
>> Mike North: And then, the third one, wait, are those equal? No, they're not, they just end with an equal. Third one is this and that is the last thing, and this is the script. We're gonna save and but you'll notice with the incorrect hash values, this is just HTML, there's no JavaScript, there's no CSS.
[00:02:42]
So those assets were downloaded, and then the browser said, nope, you're not allowed to become code or you're not allowed to become style, you're done. But now, when we refresh, we're all better. Something went wrong, DevTools was disconnected.
>> Mike North: I'm gonna chalk that up to this, being the Chrome nightly build.
[00:03:13]
So we've just added sub-resource integrity. Now, what would happen if we went back and sneakily changed one of our scripts here. That would be in Public folder? Yes, Sso let's add, right here any change, whatsoever. And if we look that research just got rejected down here. It didn't find a valid digest.
[00:03:45]
The content is changed, therefore the hash changes. Now, it doesn't align with what's in our HTML. We can rest easier now. So again, until we use HTTPS which we're about to talk to, we're about to talk about. You could of course modify both the HTML and the CSS.
[00:04:05]
But imagine that we did things in such a way where you couldn't tamper with that HTML file. But our CSS or our JavaScript assets they were in some CDN somewhere. Now, our assurance around that HTML file gives us the ability to reject any tampered with assets that are hosted by someone else outside of our direct control.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops