.dev and HSTS preload - How to save 71 Bytes on every http request.

Nathaniel - Dec 8 '20 - - Dev Community

TL;DR — The .dev TLD has the advantage of being on the HSTS preload list, without needing the strict-transport-security header. Giving your site a small performance boost.

I first heard about this watching Andrew Betts talk Headers for Hackers from Performance.now(), it’s a good talk.

What is HSTS?

HSTS (http strict transport security) is an http header. It lets a website tell the browser to only connect to it via https.

This helps prevent man-in-the-middle attacks. It also reduces load times for users trying to connect via http. Their browser will automatically upgrade their connection to https instead of your server redirecting them.

However, the browser can only know about your site’s HSTS policy once it’s already accessed it once. So if the initial request to your site is via http, there is still a risk. This is where HSTS preload comes in…

HSTS Preload

HSTS preload allows you to make sure browsers always connect via https, even when connecting to your website for the first time.

Appending preload to your strict-transport-security header will automatically add your domain to the HSTS preload list maintained by google.

When a user navigates to your site for the first time, most browsers will check this list. If your site is on the list, the user will upgraded to HTTPS.

.dev

Any domain with the .dev TLD are by default in the HSTS preload list. This means you get the security and performance of having the strict-transport-security header, with the bonus of not actually needing the header.

So, by using .dev you can save 71 bytes in every response from your site, and stop the client from parsing an unnecessary header.

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
Enter fullscreen mode Exit fullscreen mode

Other domains

As well as .dev, all of Google’s other TLDs are automatically on the HSTS preload list. Here's the complete list of availble google TLDs (as of 8 October 2020):

.app, .baby, .blog, .book, .buy, .cloud, .corp, .cpa, .dds, .dev, .diy, .docs, .dog, .dot, .drive, .earth, .family, .film, .free, .fun, .fyi, .game, .gmbh, .goo, .home, .inc, .live, .llc, .llp, .lol, .love, .mail, .map, .mba, .med, .mom, .moto, .movie, .music, .pet, .phd, .play, .plus, .search, .shop, .show, .site, .spot, .srl, .store, .talk, .team, .tech, .tube, .vip, .web, .wow, .you

source : icannwiki.org/google

Netlify Caveat

I really thought I was being so cheeky and clever when I did this. But of course, I host my sites on Netlify and they don't let you remove the Strict-Transport-Security header.

However they do allow you to remove this bit: ; includeSubdomains; preload, but that's still something!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .