Lab 8

This is an individual assignment.

Today we'll try to set some HTTP headers.

What's an HTTP header?

When a client (like a browser) wants to request resources from a web server, it sends a message called an HTTP request. The server responds with it's own message - an HTTP response. Just like an HTML document, these messages can have a head and a body. The body is usually content - html, javascript, or css files, images or PDFs. The headers contain information about the conversation being had between the client and server.

If we were sending things by mail instead of over the internet, the HTTP message body would be the letter inside the envelope, and the HTTP message header would be the envelope, where we put things like the address, postage, "DO NOT BEND", priority, etc.

HTTP headers can set powerful rules about security.

To see the headers for any resource on a web page, go to the devTools, and click on the 'Network' tab. Hit CMD + r to reload the page, and the click on the resource (including the HTML document). You'll see the HTTP headers sent with the HTTP response for that document.

The HTTP headers for Humber.ca
Headers of the class?

Every web server, whether it's written in C, Python, Node, PHP, etc., has a way to set the HTTP headers for a resource1.

I find that Netlify makes it pretty easy, so for today's lab, we'll set some HTTP headers on Netlify.

Next week, we'll be diving deep on all the various HTTP header fields, and you'll know this stuff inside and out. This week, I just want you to take a crack at it and do some investigating so you can come with some good questions next time.

You'll get two and a half out of a possible three marks (83.3̅%) just for having a repo with a header configuration file in it that builds a Netlify site.

You can get the other half by scoring a B+ or better when you enter your URL at securityheaders.com/ Opens in a new window.

I'm warning you now that getting the syntax right for the _headers file is a pain in the butt, so don't break your back on this one! This is mostly an opportunity to learn about the most important headers before we head into the next week.

Your mission

  1. Use an existing Netlify site of yours, or put together a new one (a one-pager is fine, but won't make setting the headers easier or harder - headers apply to the whole site unless you create exceptions).
  2. Follow the instructions for creating a custom HTTP header configuration Opens in a new window.
    • Pay attention to the note about disabling asset optimization.
  3. Make progress by inspecting the headers on your site through the browser devTools, checking and re-checking your grade on securityheaders.com (Mozilla Observatory Opens in a new window works, too) and looking at what values you need to set for which headers.
  4. When you're ready, on Blackboard, submit both:
    1. A link to your repo, and
    2. A link to your securityheaders.com report

Footnotes

  1. I am not 100% sure this is true, but all the major ones do Back to 'Every web server...'.