It has been years that I mistaking HSTS as HPKP 
— it’s not! HSTS is a way to make sure your website should ONLY be loaded in HTTPS. HPKP is the ancient internet standard for securing your webapps.
What’s pinning/HPKP?
Certificate Pinning or often called HTTP Public Key Pinning is a mechanism to tell your browser to make sure to only accept response if the public key being used by the HTTP Server matches one from what the HTTP Header says. This prevents attacker using a valid (green) certificate while doing MITM attack.
I remember that one of the older recommendations on securing webapps are by pinning your certificates’ Public Key hashes via HTTP Header. The idea is, when the attacker do MITM to your connections and somehow able to obtain SSL Certificates from other trusted providers, your user’s browser will refuse to connect the website because the public key hash doesn’t match.
This was introduced on April 2015 (via RFC 7469), and finally deprecated on 2017 and the support is removed from browsers starting Chrome version 72. This was phased out in respect of migrating to the better standard Certificate Transparency (CT).
Why is it bad?
It introduces a lot of risks that hard to recover. For example:
- Lockout Risk
When misconfigured or your keys are missing, your webapp will be inaccessible—lockout. - Due to that, a lot of planning is needed, essentially adding extra overhead on maintenance and stuffs.
What’s HSTS?
HTTP Secure Transport Security is a mechanism that force your browser to connect to your website via HTTPS only. If the server unable to serve the HTTPS connection, the browser will just reject it. This make sure your website always served via secure connections.
This is the currently living standard of web security, though usually this will be more encouraged if you’re serving large number of customer or your webapp needs to be PCI-compliant. In most cases, you can just add the header to your website, then the next time browser connect, it will make sure that it connects via HTTPS. Though, the weakness is that your user needs to be connected to remember this configuration first. This first connection is the weakest link. To prevent this, you can add your webapp to browser’s HSTS preload list, so that your browser already know to make sure that your user needs to connect via HTTPS to access your webapp. One exception for some of Google’s Domain: .app, and .dev. Those url have been added by to the HSTS site list by default. You can’t access those website/webapps if the server doesn’t serve HTTPS.