AWS For Front-End Engineers, v2

Lambda for Updating Headers

Steve Kinney

Steve Kinney

AWS For Front-End Engineers, v2

Check out a free preview of the full AWS For Front-End Engineers, v2 course

The "Lambda for Updating Headers" Lesson is part of the full, AWS For Front-End Engineers, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve updates the Lambda function to write the correct security headers on the viewer response behavior. Mozilla's Observatory tool is used to check security headers and issues a grade based on how safe and secure a website is configured.


Transcript from the "Lambda for Updating Headers" Lesson

>> So if we look at the notes, because this is again more code than you probably want to type. This is the code that we're going to kind of drop in. And if we see an error, we can kind of go deal with it in a second. But it's basically going to add a bunch of CSP headers, because we take our current site.

Let's actually fix it first for a second. I will tell you right now, I think it gets a B+, no, maybe less than a might get an F from the Mozilla observatory, just because it doesn't have all the right headers that have been set. It's like, hey, you should do this and you should do these other things so you don't get hacked.

Because one just doesn't do them for us. So we don't have that kinda in place. So what we want to do is, we can go to observatory, Mozilla, and you put in any site. I'll show you the one that I made kind of earlier, which is superawesome.XYZ instead, I'm clearly not good at coming up with names.

It will scan the site. This is a version as the other one kind of deploys to the previous yellow version. This is a version that has all the checks passing but out of the box that is not how it works. So we can go ahead let's say that this redeploy, yes.

So now let's put in And we'll go do another scan. Got an F, that's not good, we didn't do better than that we would like to go from an F to an A+, and again like I said like, we've just got all we have to do is fix some of the headers effectively all I did was go through all the things that it was yelling at me for and adjust them.

That's a little bit outside the scope of this we kind of just look at it together. But basically, we wanna do is go through and then as the request comes in we modify all the headers, setting them to just the headers that should be set right because this is the way the ability to program or CDN becomes fairly helpful so let's go ahead and just look at that so you can just see.

It's just setting the most important ones in the Content-Security-Policy which is like cool, will allow only images for myself Scripts from ourself styles from our own domain, so on and so forth. Turn off the X frame options, so on and so forth. These are just kind of the suggestions just to prove that it worked.

Right now the server is Amazon s3, cuz that's the origin. I like a lot of times, if your site in the header goes, Ruby on Rails 4.0, which was like end of life in 2015. And the security vulnerabilities are known, you've just said a here's how to own me.

This is ours actually out of the box says Amazon S3. I have I think the hard part of inventing your own framework is that you need to name it first. So welcome to my new framework early on eels. It doesn't exist yet, but that's as far as anyone go to this website.

They don't know that, as far as I know they're going to be looking for the documentation for Erlang on eels and this is how I become a thought leader, so let's go ahead we will grab this code and kind of put it in place. There if you wanna try a different one.

There's a few other recipes in here as well. There's one where I get the client side routes working. They're kind of variations on a theme. So let's actually look at all of them real quick and we'll pick which one we like the most. I like the security header ones cuz I need an A plus, because I'm a millennial who needs validation.

But if we want to handle those client side routes. So here we know that all of the client side routes are notes, and then a number and so we can basically look at the URI on the request object we get from the event. If it matches this note slash possibly edit, change it to URI on the way in the cloud front, which CloudFront will be like, cool, I'll ask s3 for index that HTML, which will totally be okay.

And but like they won't change the actual response header. So it'll say CloudFront will say to s3, give me index. HTML will tell the browser. I got notes slash zombie. Here it is. So we actually have our 200 3200s. And our 404 will be 404s. Now clearly, I haven't have a simple app where like notes slash a word will do the trick.

So what we did was we basically we knew the general typography or application, we had all the routes pretty much specked out. And so we had a little bit more robust version of this for the actual structure of our application. But the same basic principle will work in this case the security headers we saw you can also implement a redirect so this would be an origin request so if we leave the cache.

We can actually take generate our own response before we ever touch s3, respond to the request with this URL, and they'll be redirected. So you can do a whole bunch of stuff. You can program the CDN in all sorts of interesting and different ways. It's just basically taking those requests and responses and doing various different things with them as well.

So let's say, it's a recall if you need to know, nobody play right now we're recording. It's the same video that you could expect because I'm a child on the internet. So let's go in here. Let's grab this one. If it doesn't work, we'll do some debugging in a second because I believe that was our issue.

So we'll go into lambda, we will have our version one here it is. in this case we're gonna go back to our code now if you click on the code and you try to type things It looks like you have a cursor. You can move around. Doesn't do anything till you hit edit code.

Then, it looks exactly the same, but now you can type, so we'll paste that in as well, we'll save it, and deploy it. Again, hitting deploy does not deploy to cloud front, then you go to Actions, Deploy to Lambda@Edge Look again, hopefully, once you have this in place, most of it should work.

This should be the viewer response. On the way out, change the headers in every way that we need so that they pass the Mozilla test. I acknowledge what I'm doing. And that should go out at this point. Awesome. So successfully created version two or your function associated with the cloud front trigger, function has been replicated across all the regions.

Great, our lambda edge did in fact cook. Right as you can see it is it is running, and I just recently rebrand the Mozilla observatory. I can run it again if nobody believes me. Will get to run at once every five minutes. So I ran out while the opportunity was there.

And you can see we went from an F previously to an A+ just by fixing those headers. And that is one of the powers of the programmable CDN aspect here, right, which is previously would have been, well, this is what it does. Wait for a feature to come out or something along those lines the idea that if you needed to modify stuff or like I said set cookies or do any custom logic that you can do it and this is happening at the edge right close to your users right like it depends if you're still talking to a database located in Des Moines then like you're still gonna pay some of those costs.

But if you can like also set up, so as few requests go back to that API, is simply just get me the latest top trending items for the Twitter sidebar. That's not even necessarily, possibly too much scope to a user. There are things you can probably move to the edge and cache.

And then obviously, a user's personal stuff is usually probably unique to them. But maybe you keep that with a TTL. So they keep refreshing the page. It's not slamming on your servers. They're getting a cached version. So maybe one even if you like, set a TTL on something like that from down to 30 seconds that means one request gets through every 30 seconds at that point.

And for the API's, there's a web application firewall and stuff like that you can use that origin shield you can do even more protection around that as well. For static assets, we're mostly just trying to, we know that we can basically store it for a really long time, until we cast the invalidation on a deploy or something along those lines.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now