If you do not know what HTTP Headers are, let me run a quick introduction, and if you do, then it would be just a refreshment.
What is HTTP anyways?
HTTP stands for Hyper Text Transfer Protocol, which is the protocol that we use on our browsers and to visit web pages and similar services. Since HTTP is part of the TCP, stack than it means that the flow works just like PING PONG. Below a simple graphic to explain it:
More about HTTP
HTTP is a protocol and it has several methods. The most used methods are:
The HTTP GET method is used to request a specific URL or file, some examples below:
HTTP GET http://domain.com/file.txt HTTP GET domain.com/contact-form/ HTTP GET https://www.domain.com/secure-file.html
This is basically what happens when you put a domain on the browser bar and click enter, or when you click on a link within a website. Your browser then generates an HTTP GET request to the server asking for that URL.
Its basically a request from the visitor to a server asking the server to send information.
The HTTP POST method is used on the opposite way. The POST is used when the visitor sends information to the server to process. Some examples can be:
- Filling out a contact form and clicking SEND. The POST method that the visitor sends, it will contain all the information of the contact form, and the server will receive the info and process it accordingly.
- Filling out any form.
- Adding products to shopping cart.
- Doing a checkout process on any e-commerce website.
HTTP POST www.domain.com/contact-form/?filled=yes&name=John%20Doeemail@example.com&phone=1234567&comments=no
We do not usually see the POST contents on the browsers unless you use your browser’s Developer Tools to check on what is happening on the background.
Now that we’ve covered the basics, let’s talk about HTTP HEADERS!
What are the HTTP HEADERS?
HTTP Headers is all the extra values that are added to the HTTP GET & POST requests. Below a quick example:
First we do the request
HTTP GET salrocks.com
Then the server answered this:
HTTP/1.1 301 Moved Permanently Server: nginx Date: Sat, 27 Jan 2018 01:08:18 GMT Content-Type: text/html Content-Length: 178 Connection: keep-alive Location: https://salrocks.com/
What does that mean?
Let’s break it down shall we?
HTTP/1.1 301 Moved Permanently
The HTTP 301, is a what is called a permanent redirect. This will tell your browser to load a different page, it will get the value from the LOCATION header.
The SERVER header, it will tell you what software is the web server using to serve websites. On this case the web server used is NGINX. Other values could be Apache, LiteSpeed, ISS, etc.
Date: Sat, 27 Jan 2018 01:08:18 GMT
The DATE header provides a timestamp of the time the request was served.
The CONTENT header will tell you what type of media file is, if its a text, media file or binary file. It will depend on the MIME TYPES setup on the server.
This one, the CONTENT-LENGTH header will simply tell you the size of the file requested.
As discussed on the HTTP 301 header, the Location will tell the server what URL it should load instead of the http://salrocks.com that was requested initially.
Ok so that’s simple right? Let’s move on. Let’s now try to load the https://salrocks.com to see what happens. Let’s go!
HTTP GET https://salrocks.com
And now the server answer was this:
HTTP/2 200 server: nginx date: Sat, 27 Jan 2018 00:18:39 GMT content-type: text/html; charset=UTF-8 strict-transport-security: max-age=86400 vary: Accept-Encoding vary: Cookie link: <https://wp.me/5zKS6>; rel=shortlink
Let’s break the answer now, since there are new values and new headers there. We are just getting started.
content-type: text/html; charset=UTF-8
As you can see the CONTENT-TYPE header now included a charset setting besides the MIME TYPE.
The STRICT-TRANSPORT-SECURITY header is related to HSTS and the policy that tells your browser how long to cache the request.
vary: Accept-Encoding vary: Cookie
The VARY header tells the other proxies if they should cache a similar request or if they should request a new one..
link: <https://wp.me/5zKS6>; rel=shortlink
The LINK header provides a relationship of the present request to the link provided on this header and the relationship. On this case it tells you that https://wp.me/5zKS6 is a SHORTLINK to https://salrocks.com
How do you use HTTP HEADERS to troubleshoot issues?
Checking the HTTP Headers of your website it can help you solve all of the following issues:
- Too Many Redirects.
- Failure in forms. The POST event might have gotten a HTTP 404, 403 or 500 error.
- SEO issues with 302 or 301 redirects.
- Caching issues (if an URL is cached, missed or expired).
- Media expiration status.
- CDN cluster from which the asset is served.
Soon I will be writing about HTTP HEADERS for Sucuri, CloudFlare and Kinsta.