HTTP Headers Tutorial : Part 1-The basics

The Hypertext Transfer Protocol (HTTP) is the driving force behind the internet. It allows communication between browsers and servers.An important component of HTTP messages is the  HTTP Header. In this series of posts we’re going to take a deep dive to understand what they are and how to use them.

This tutorial is composed of several posts :

  • Part 1- The basics
  • Part 2- Authentication
  • Part 3- Caching
  • Part 4- Content Negotiation
  • Part 5- Cookies
  • Part 6- Redirects
  • Part 7- Conditionals
  • Part 8- Compression
  • Part 9- Range Requests
  • Part 10- Connection Management
  • Part 11- Security

What are HTTP Headers?

Before we dive in, let’s understand what an HTTP header actually is. HTTP headers are part of the HTTP message sent between client and server. The message sent from the client is called the HTTP Request and the message returned from the server is the HTTP Response.

HTTP headers allow the client (browser) and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon ‘:‘, then by its value (without line breaks). Leading white space before the value is ignored.

Type of Headers

  • General / Message header: Apply to both request and response messages and relate to the message itself rather than the entity body.
    • Headers related to intermediaries, including Cache-Control, Pragma, and Via
    • Headers related to the message, including Transfer-Encoding and Trailer
    • Headers related to the request, including Connection, Upgrade, and Date
  • Request header: Apply generally to the request message and not to the entity body, with the exception of the Range header.
    • Headers about the request, including Host, Expect, and Range
    • Headers for authentication credentials, including User-Agent and From
    • Headers for content negotiation, including Accept, Accept-Language, and  Accept-Encoding
    • Headers for conditional requests, including If-Match, If-None-Match, and If-Modified-Since
  • Response header: Apply to the response message and not the entity body. They include:
    • Headers for providing information about the target resource, including Allow and Server
    • Headers providing additional control data, such as Age and Location
    •  Headers related to the selected representation, including ETag, Last-Modified, and Vary
    • Headers related to authentication challenges, including Proxy-Authenticate and WWW-Authenticate
  • Entity /Representation header: Apply generally to the request or response entity body (content). They include:
    • Headers about the entity body itself including Content-Type, Content-Length, Content-Location, and Content-Encoding
    • Headers related to caching of the entity body, including Expires

Example

When you type https://www.samuelnmensah.com in the address bar, your browser sends an HTTP message as shown below. The first line specifies the Verb, Uri & HTTP version. Following that are the HTTP headers. The headers in this message read something like this

  • Host : I would like to make a get request to the root of the resources located at www.samuelnmensah.com:443 using HTTP 1.1
  • Accept : I (browser) would like to negotiate the response that you (server) send back. Here are my preferred choices (mime-types) : html, xhtml+xml, any
  • Accept-Encoding : Here are the encoding types that I (browser) understand, gzip, deflate and br
  • Accept-Language : I prefer english to be sent back to me
  • DNT : I love my privacy so please don’t track me
  • Upgrade-Insecure-Requests : security is important to me so upgrade our communication channel to use encryption
  • User-Agent : I’m making this request from the Chrome browser
GET / HTTP/1.1
Host: www.samuelnmensah.com:443
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
DNT: 1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome Safari/537.36



After that, your browser receives an HTTP response that may look like this.

HTTP/1.1 200 OK
Cache-Control: no-cache, must-revalidate, max-age=0
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 38850
Content-Type: text/html; charset=UTF-8
Date: Wed, 13 Dec 2017 14:00:29 GMT
Expires: Wed, 11 Jan 1984 05:00:00 GMT
Link: <https://www.samuelnmensah.com/wp-json>; rel="https://api.w.org/"
Server: nginx/1.12.2
Vary: Accept-Encoding

The first line is the status line, followed by HTTP headers. There are a variety of headers sent back which we will examine into detail in the upcoming posts.

How to View Headers

You can view headers in any modern browser by right-clicking and choosing to inspect. This will present a window where you can drill down via a network tab to see the headers associated with the HTTP request.

 

 

In our next post we’ll look at Authentication headers.