​Compute sha256 of CSP <script/> in NodeJS

Automatically generate the SHA-256 hash of the script tags for the Content Security Policy.

​I have been using the same strategy to compute automatically ​SHA-256​ hash for my <script /> tags since a couple of years and as I recently applied it again at work and in Papyrs (I am currently migrating the kit that generate the blogspaces from vanilla JavaScript to Astro), I thought it could be an interesting subject for a new short blog post.

Getting started

While sha256​ can be set manually, I personally rather like to generate these automatically once the ​build​ script is over — as a post-processing job. This means that I rely on the fact that what is built is trustable and that I compute the values once the scripts have been generated.

To do so, I create a dedicated script — e.g. ./build-csp.mjs ​​ — that I append to my build script:

// package.json

{
    "scripts": {
        "build:csp": "node build-csp.mjs",
        "build": "astro build && npm run build:csp"
    }
}

Search and update

​As I aim to inject the shas at the end of the process, I add a placeholder within the Content Security Policy (CSP) to search and update the computed values. e.g. in following CSP ​meta tag I used the placeholder ​{{EXTRA_SHAS}}:

<meta
    http-equiv="Content-Security-Policy"
    content="default-src 'none';
             script-src 'self' {{EXTRA_SHAS}};
/>

Because such a placeholder is not a valid policy, the browser would throw an error while evaluating the rules. What can notably happen when I develop since I post process only the production build.

That is why I often just avoid the use of CSP for my local environment. e.g. in my Astro project I skip the rendering of the ​meta​ tag if not a ​PROD​ build.

---
const csp = import.meta.env.PROD;
---

{
  csp && (
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none';
      script-src 'self' {{EXTRA_SHAS}};
    />
  )
}

List all HTML files