Website badges

Some weeks ago, I wrote about GitLab badges, but I presented only some general badges that can be applied to any GitLab projects.

If you maintain like me some websites , more specific badges can help you in your day to day. Personally, I usually add the four following badges on my website projects:

• Website Status
• Security Headers
• HSTS Preload List
• Mozilla Observatory

You will find below the text that you can quickly copy and paste to reproduce these badges inside your GitLab projects. Do not forget to adapt them! 🧙

Website Status

• Name : Website Status
• Link : https://www.benjaminrancourt.ca
• Badge image URL : https://img.shields.io/website?url=https%3A%2F%2Fwww.benjaminrancourt.ca

Imagine you were coding and you are ready to submit a Merge Request to ask a teammate to review your code. You go to your repository on GitLab and you are stunned: this tiny badge is red! This means your website is down down down to Goblin Town. 😱

Important : this badge should not be your only way to know if your website is down. Consider using a monitoring service instead.

Unlike the other badges below, I use here the default cache of 60 minutes, as it is also the minimum to do not overload the Shields.io servers.

Security Headers

• Name : Security Headers
• Link : https://securityheaders.com/?q=https%3A%2F%2Fwww.benjaminrancourt.ca&followRedirects=on
• Badge image URL : https://img.shields.io/security-headers?url=https%3A%2F%2Fwww.benjaminrancourt.ca&cacheSeconds=2419200

Do you know the website Security Headers? It is a free tool that analyzes the HTTP response headers of a webpage and ranks it according if the page implements six headers correctly that help to secure a site:

• Content-Security-Policy
• Permissions-Policy
• Referrer-Policy
• Strict-Transport-Security
• X-Content-Type-Options
• X-Frame-Options

In the case of that badge, I personally put a cache of four weeks as, if you already implemented them, it should not change overnight.

The badge is useful in case you accidentally add a defect in one of these headers or if a new security header is added. For example, the Permissions-Policy was added this year if I remember correctly.

HSTS Preload List

• Name : HSTS Preload List
• Link : https://hstspreload.org/?domain=benjaminrancourt.ca
• Badge image URL : https://img.shields.io/hsts/preload/benjaminrancourt.ca?cacheSeconds=2419200

The browsers use the HSTS Preload List to connect to a website only on HTTPS connections before the first visit. To be in that list, the domain must satisfy the following requirements:

• Serve a valid certificate
• Redirect from HTTP to HTTPS
• Serve all subdomains over HTTPS
• Have a valid HSTS header with a max-age of one year minimum, such as Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Once all requirements are fulfilled, you can submit your domain and sometimes after, your domain will be listed.

You can certainly question the existence of this badge, as the domain should not be removed normally if you do not ask for that. But, if the requirements changed or if you do not fulfill the requirements anymore, your website will be deleted off that list. In that case, it costs practically nothing to add that badge.

For the previous reasons, I also put a cache of one month on the badge image, as the previous one.

Also, if you fork your repository to create a new website, the badge will serve you as a remember to opt in the Preload List. 😉

Mozilla Observatory

• Name : Mozilla Observatory
• Link : https://observatory.mozilla.org/analyze/www.benjaminrancourt.ca
• Badge image URL : https://img.shields.io/mozilla-observatory/grade/www.benjaminrancourt.ca?publish&cacheSeconds=1209600

The Mozilla Observatory offers three principal tools:

• The HTTP Observatory, to validate some HTTP headers
• The TLS Observatory, to analyze and inspect on Transport Layer Security (TLS) services
• The SSH Observatory, to scan SSH configuration

Unfortunately, the badge shows only the result coming from the HTTP Observatory test. However, you can simply click on it to see the complete results. The Mozilla tool also aggregate on a distinct view third-party tests from various websites:

• ssllabs.com
• ImmuniWeb
• tls.imirhil.fr
• Security Headers
• HSTS Preload List

Conclusion

With these four badges, you can see quickly if your website is up and know if its security is up to date.

Do you have other badges you like for your websites? 🧐