Running some static code scanning on my rendered site with Sonarcloud, I found some potential security concerns with how I was loading the mermaid javascript.

Sonarcloud Scan Report

Cooling off those hotspots!

An article on Bits and Pieces had additional information on how to use SRI functionality in modern browsers. I used srihash.org to calculate the hash for the mermaid js file. After that, it was easy enough to modify layouts/partials/extend_head.html to include the integrity check:

{{ if .Page.Store.Get "hasMermaid" }}
  <script 
    src="https://cdn.jsdelivr.net/npm/mermaid@9.1.3/dist/mermaid.min.js" 
    integrity="sha384-LnGjpNDrP4cp7MIk4CpRa/lPNclrf839ryYVFx1T1mPSV3RGAZ7nlBa7pqcyGY/K" 
    crossorigin="anonymous"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

I also switched to using a specific version of the js package so that the hash would have a static file. It’s good to keep that control over which versions of scripts are running, so there are no complaints here.

An Important Detail

The crossorigin="anonymous" part is crucial to making this effective.

Without a crossorigin attribute, the browser will choose to ‘fail-open’ which means it will load the resource as if the integrity attribute was not set, effectively losing all the security SRI brings in the first place.