Fix 404/500 pages CSP conflict and replace sha512 to sha256 to reduce headers size

Author: ai

web/nginx.conf

@@ -41,7 +41,7 @@ http {
 
     add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
     add_header X-Content-Type-Options "nosniff";
-    add_header Content-Security-Policy "object-src 'none'; frame-ancestors 'none'; form-action 'none'; base-uri 'none'; style-src 'sha512-PHkQqFB5xMOzIlQKtIwhvRMW/am07I/znOSfv/p3q7zZbVRgV9NoARcwG+FSMrIMHMTKfvMD8o8PYiOYBY6fEA==' 'self'; script-src 'sha512-Rczlh6VlA4INB1ZfGQtFefldgg2D6I9iD9zuroBG15QQTjqzVczclCYoKfEqD+h5ifMmhc0d+UMAbd4fpudT3w==' 'self'";
+    add_header Content-Security-Policy "object-src 'none'; frame-ancestors 'none'; form-action 'none'; base-uri 'none'; style-src 'sha256-J1yr9jnezHa8fgkMcmmOquKcdW3HPJID3HI4njG+hY8=' 'sha256-CZnb1TLE7y6wqURRr67r0i61eIyy5Pondy3oQa/vFuc=' 'self'; script-src 'sha256-u5afvzrVcDGTOxeBQWnrSgxFv/EOJ2lqLAWD6qzSSY8=' 'self'";
 
     location ~* __ROUTES__ {
       try_files /index.html =404;

web/public/404.html

@@ -64,9 +64,11 @@
         fill: oklch(0.58 0.2 29);
         width: 200px;
         position: absolute;
-        z-index: 2;
         top: -20%;
         left: -40%;
+        &.is-below {
+          z-index: -1;
+        }
       }
       .object {
         fill: currentColor;

web/public/500.html

@@ -64,9 +64,11 @@
         fill: oklch(0.58 0.2 29);
         width: 200px;
         position: absolute;
-        z-index: -1;
         top: -20%;
         left: -40%;
+        &.is-below {
+          z-index: -1;
+        }
       }
       .object {
         fill: currentColor;
@@ -84,7 +86,7 @@
       Home
     </a>
     <div class="image">
-      <svg viewBox="0 0 24 24" class="fire">
+      <svg viewBox="0 0 24 24" class="fire is-below">
         <path
           d="M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z"
         />

web/scripts/generate-csp.ts

@@ -3,25 +3,32 @@
 // to nginx config.
 
 import { createHash } from 'node:crypto'
-import { readFileSync, writeFileSync } from 'node:fs'
+import { readFile, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
 
 const NGINX = join(import.meta.dirname, '../nginx.conf')
-const HTML = join(import.meta.dirname, '../dist/index.html')
+const LOADER = join(import.meta.dirname, '../dist/index.html')
+const ERROR = join(import.meta.dirname, '../dist/404.html')
 
-function sha512(content: string): string {
-  return createHash('sha512').update(content, 'utf8').digest('base64')
+function hash(content: string): string {
+  return `'sha256-${createHash('sha256').update(content, 'utf8').digest('base64')}'`
 }
 
-let html = readFileSync(HTML, 'utf8')
-let css = html.match(/<style>([\s\S]*?)<\/style>/)![1]!
-let js = html.match(/<script>([\s\S]*?)<\/script>/)![1]!
-
-let nginx = readFileSync(NGINX, 'utf8')
+let [loader, error, nginx] = await Promise.all([
+  readFile(LOADER, 'utf8'),
+  readFile(ERROR, 'utf8'),
+  readFile(NGINX, 'utf8')
+])
+let loaderCSS = loader.match(/<style>([\s\S]*?)<\/style>/)![1]!
+let errorCSS = error.match(/<style>([\s\S]*?)<\/style>/)![1]!
+let loaderJS = loader.match(/<script>([\s\S]*?)<\/script>/)![1]!
 
 nginx = nginx
   .toString()
-  .replace(/(style-src 'sha512-)[^']+'/g, `$1${sha512(css)}'`)
-  .replace(/(script-src 'sha512-)[^']+'/g, `$1${sha512(js)}'`)
+  .replace(
+    /style-src 'sha\d+-[^']+' 'sha\d+-[^']+'/g,
+    `style-src ${hash(loaderCSS)} ${hash(errorCSS)}`
+  )
+  .replace(/script-src 'sha\d+-[^']+'/g, `script-src ${hash(loaderJS)}`)
 
-writeFileSync(NGINX, nginx)
+await writeFile(NGINX, nginx)