What is HSTS? Why is it Important for Websites?
Approx. 2300 words, 10 mins
Hello there! My name is Ken and I am a Chinese A Level student. Welcome to Ken's Study Journey website with Computer Science knowledge explanations!
Recently, HSTS has been implemented on my website to enhance security. Although HTTPS plays an important role, hackers can attack while redirecting from HTTP.
We have already learned HTTPS, SSL and TLS in IGCSE (0478) and A Level Computer Science (9618, 9608), but HSTS is beyond these syllabuses and it is an extension knowledge.
Websites like Baidu, Google, YouTube, University of Cambridge, and University of Oxford have already implemented HSTS so people can browse the Internet securely.
This is my first knowledge explanation on my new website. From now on, I will post some knowledge explanations of Mathematics (CAIE Syllabus Codes: 0580, 0606, 9709, 9231), Physics (0625, 9702), Chemistry (0620, 9701) and Computer Science (0478, 9618, 9608) that are explicit and easy to understand on my website, along with my excellent study tips.
Do you know how and why can HSTS further enhance visitor's security on a website? Let's dive in!
What is HSTS?
HSTS stands for HTTP Strict Transport Security. It is an extra layer that further ensures visitor's security.
Nowadays, an increasing number of websites, including my website, have started using HTTPS security protocol, especially banking and online booking/shopping websites. Hackers cannot read or modify encrypted data. HTTPS uses security certificates with encryption algorithms and keys.
Normal users do not know computer terms such as HTTP, HTTPS and SSL, so they usually type web addresses without typing "https://". Sometimes, hackers can intercept data while redirecting to HTTPS from HTTP which is very dangerous, but HSTS can force browsers to visit HTTPS site and redirect internally (inside the browser without requesting the server) if you do not add "https://" on the address bar. The browser will redirect to HTTPS website later on after the first visit.
It also can prevent browsers from accessing the website with no exceptions if a hacker intercepts the HSTS transmission, like this:
The Image Says:
Attackers might be trying to steal your information from www.kenstudyjourney.com (for example, passwords, messages, or credit cards). Learn more
www.kenstudyjourney.com normally uses encryption to protect our information When Google Chrome tried to connect to www.kenstudyjourney.com this time, the website sent back unusual and incorrect credentials. This may happen when an attacker is trying to pretend to be www.kenstudyjourney.com, or a Wi-Fi sign-in screen has interrupted the connection. Your information is still secure because Google Chrome stopped the connection before any data was exchanged.
You cannot visit www.kenstudyjourney.com right now because the website uses HSTS. Network errors and attacks are usually temporary, so this page will probably work later.
The Conflict between HSTS and WiFi Login Page
Please note that this is normal if you are using a public WiFi. The WiFi router is trying to redirect you to the WiFi login page. The WiFi router can redirect you to its login page because it can change the data in the insecure HTTP transmission, so HTTPS websites cannot be accessed before logging to the WiFi.
Due to the development of HTTPS and HSTS, it is difficult to find a website that allows HTTP connection without HSTS.
Apple, Microsoft and I provided a test page to see whether a WiFi contains a login page, which can be directly accessed by HTTP. You can visit http://captive.apple.com, http://www.msftncsi.com or http://test.kenstudyjourney.com in your browser. They normally display a word Success, but it redirects to login pages in public WiFis.
Did you know?
New iPhone, iPad and MacBook usually visit captive.apple.com automatically to test after connecting to a WiFi. So, it can pop up a login page automatically.
If you are seeing the image above when visiting my website, apart from public networks with a login page, don't be panic and you should stop visiting my website first. The only thing you can do is to change WiFi networks or use cellular data (3G, 4G or 5G) on your phone.
Programmers on some websites may forget to add HTTPS redirection on their websites, although they have enabled HTTPS with SSL certificates. It means that the browser will not use HTTPS secure protocol if you do not add "https://" prefix in the address bar.
By the way, I recommend you to try to add "https://" prefix before the web address when you visit a website. You can remove it or change back to "http://" only when you see an HTTPS error page (i.e. no HTTPS enabled and no SSL certificates provided).
For example, you can type https://www.google.com when you access Google website.
The HSTS Response Header
When you access a website with HSTS, the server will send this header, which will be stored on your browser like Cookies. It means that this website must be accessed with HTTPS within the next 180 days (15552000 seconds) in this browser.
The time of HSTS can be set and changed by website administrators or programmers. It is recommended to set this for over 180 days (half a year).
HSTS can be auto-renewed. The header is always sent whenever you access my website. If you access my website on the second day, the expiration date will be changed to the next 180 days.
In 2020, when I used WordPress on my previous website, I didn't decide to enable HSTS because I was afraid that people cannot use my website if someone intercepts the network or the SSL certificate contains an error.
Some websites, like Cloudflare, have enabled a special feature that further enhances HSTS security. This is called: HSTS Preload.
As we know, it is insecure to visit a website without "https://" prefix for the first time. Before visiting a website, there is no HSTS header in your browser, so it may be dangerous when redirecting to HTTPS from HTTP.
However, HSTS Preload solved this problem. Every new browser has its preload list. Even if you hadn't visit a website, it must use HTTPS at all.
Look at this header, it is a little bit different from the header I mentioned above.
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
The website must satisfy with the following requirements if you want to add your website into the preload list of major browsers:
- The website must have a valid SSL certificate.
- The period must be at least one year (365 days, 31536000 seconds).
- The HSTS header must include subdomains. For example, planner.kenstudyjourney.com is a subdomain of kenstudyjourney.com
- HTTPS, redirections and HSTS must be enabled on all subdomains.
- The header must include an option "preload", which tells browsers that this website wants to add to the preload list.
If a website keeps satisfy these requirements for a few months, the domain will be added to the preload lists automatically.
Internal Redirection to HTTPS
Now, let's talk about how does internal redirection on browsers work if a website has enabled HSTS.
Internal redirection can prevent hackers on public WiFi from redirecting you to a fake website while redirecting to HTTPS.
When we firstly access my website using insecure HTTP at home (http://www.kenstudyjourney.com), the browser will receive these headers.
HTTP/1.1 301 Moved Permanently
Did you know?
There are several types of HTTP status codes. They indicate the status of a server and it is handled by browsers. These are the common status codes:
- 200 OK (This is sent when the webpage is working normally.)
- 301 Moved Permanently (This is sent when the server redirects to another URL.)
- 400 Bad Request (This is sent when the request does not satisfy with website's requirements.)
- 403 Forbidden (This is sent when the server has blocked access. For example, this is common when website blocks IP addresses, countries/regions.)
- 404 Not Found (Most common. This is sent when a resource cannot be found on the server.)
- 429 Too Many Requests (This is sent when there are too many requests within a period of time. It may be exceeded the quota set by administrators.)
- 500 Internal Server Error (This is sent when an error is occured at the code of the back end (server side).)
- 503 Service Unavailable (This is sent when the server is overloaded or when the website is under maintenance.)
You can see that it is then redirected to the HTTPS version of my website.
When the browser accesses my HTTPS website, it will receive the following headers and the website content.
HTTP/1.1 200 OK
After the browser receives the HSTS header, it will store into the browser cache.
Now, when you go to a public WiFi and access my HTTP website again, the response header is a little bit different.
HTTP/1.1 307 Internal Redirect
So, why is this? This is because the browser has stored the HSTS policy. This only costs about 2ms and the request is not sent to my server while redirecting. I will talk about revealing the response headers in the next section - if you are interested in.
That's why HSTS is crucial for websites. It can redirect websites to HTTPS without transmitting data with servers.
Revealing Response Headers
In most browsers with development tools, like Chrome, Firefox and Microsoft Edge (except for Safari), you can see the codes, request headers and response headers of a website. These kinds of information can be used for programmers to debug websites.
Now, I will teach you how to see the response headers, including redirections and HSTS policy, on your browsers.
Firstly, open your browser and press F12 or option+command+I key on the keyboard to open developer tools before accessing a website, and click “Network”.
Then, you can enter any websites you want to test on the address bar.
When the files list appears, move to the top and click the first one (or the one directly related to the website). You can see Internal Redirect with a 307 status code or Redirection with a 301 status code was received (redirection can be 301 or 302). Below the status code, the location indicates which URL should the browser redirect to.
Click on the second one, it will show the 200 OK status code and the HSTS header with a duration (max-age).
If you can see "Strict-Transport-Security", the website has enabled HSTS. The max-age indicates the validity in seconds.
Checking for HSTS in Safari
If you are using Safari, there is another method to see whether a website has enabled HSTS.
First, you need to access the website you want to check so that the browser can receive and store HSTS headers.
Then, open preferences by pressing command and comma keys on your keyboard. Click Privacy and Manage Website Data. Search the website's domain name. If it has enabled HSTS, you will see that it displays "HSTS Policy".
Checking for HTTPS Security Grade
In fact, there is a tool that checks how is a website secure. It is called: SSL Labs, which is provided by Qualys.
It check whether the website has valid certificates, correct and secure protocols (TLS and SSL), and HSTS policies.
Its grades are very similar to the grades in CAIE (A+ (A*), A, B, C, D, E, F, T (U)).
In fact, my website got an A+ grade because I used secure protocols and enabled HSTS (I call it A* because I am studying Cambridge IGCSE and International AS and A Level). This indicates that students can study on my website safely without interception by hackers.
If you want to get an A+ grade on your website, it needs to satisfy with the following requirements:
- Has a valid SSL certificate (can be the free Let's Encrypt);
- The certificate needs to have strong encryption (at least 1024 bits on Key Exchange);
- Disabled all SSL and old versions of TLS (SSL2.0, SSL3.0, TLS1.0 and TLS1.1). Using old versions of SSL may be vulnerable to PODDLE attack. It is similar to disabling old 2G and 3G networks.;
- Enabled HSTS for at least 180 days (you do not need to enable preload);
- Use modern cipher suites (at least 256 bits);
HSTS is a record that can be stored on browsers, which can prevent hacker's interception when redirecting to HTTPS from HTTP. So, it can enhance website's security.
Alright! This is the end of the knowledge explanation of HSTS. Thanks for reading and I hope you can understand the security measure on websites.
Subscribe to my email newsletter to receive my latest articles, latest news, latest study tips and tutorials, some useful knowledge in real life, and more!
If you like this explanation, please click the thumb up button below and share this article. Also, you can write down your comment below if you have any ideas. This is the first time I write knowledge explanations. If it has any errors, you can contact me to correct them.
Still have questions or cannot understand my knowledge explanations? Don't be hesitant to contact me and I am here to help you. I speak English and Chinese.