From F to A+ in 90 minutes

Turned out moz://a Observatory helps checking your web site’s security rating and this one’s had an ”F” (in US academic grading) and was thus pretty “maximum bad”.

Even though this web site doesn’t provide anything security-relevant I was somewhat interested in how much effort it might be to get the rating up to something like A or even A+, which wasn’t that hard, to be honest:

After some time of reading and fiddling, it turned out to not be thaaaat much effort, because all I had was to configure my Apache2-installation to consider a few more headers to be set in the responses (via my 000-default.conf).

Most changes were related to finding the right amount of security regarding my server’s Content Security Policy. In my case, I was not able to achieve maximum security, because I had to allow unsafe-inline in the style-src section, otherwise my embedded Mermaid diagrams would no longer render correctly, and also, had to allow custom frame sources related to *.soundcloud.com, in order to still load the embedded frames for the audio-section:

  Header set Content-Security-Policy: "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; frame-src 'self' *.soundcloud.com"

Beside of these, I basically just had to consider a few static security settings, like not allowing to access the server via insecure transports, deny the page to be embedded and similar.

  Header set Referrer-Policy "strict-origin"
  Header set Strict-Transport-Security "max-age=63072000"
  Header set X-Content-Type-Options "nosniff"
  Header set X-Frame-Options "deny"

All in all, it took about 90 minutes to read and re-configure everything, not thaaat painful, IMO.

It would’ve also been possible to get a full 120-score in that test, but this would’ve basically required two significant changes:

1. to make Astro to always generate external CSS-files, in the astro.config:

export default defineConfig({
  // ...
  build: {
    inlineStylesheets: 'never'
  },
  // ...
});  

2. to rewrite my own “browser-runtime rendering of mermaid-diagrams” to render static SVG-files instead, and to embed the static SVG-files as <img>-tags

…but I’ve been too lazy to even try, because right now, I’m still using Astro v2.9… so, I’ll keep that in mind and check out static SVG-rendering when I start fiddling/porting my stuff to Astro v4+ instead 🙈