movieloop-frontend/scripts/csp-inline-script-hashes.test.ts

import { createHash } from 'node:crypto';
import { readFileSync } from 'node:fs';
import { describe, expect, it } from 'vitest';
import {
  cspHashToken,
  cspInlineScriptHashes,
  inlineScripts,
} from './csp-inline-script-hashes.mjs';

/**
 * The CSP hash for index.html's inline theme script is computed from the built
 * file at build time. It used to be hardcoded, guarded only by a comment
 * asking whoever edited the script to regenerate it; the bytes are what the
 * browser hashes, so an edit or a different line ending would have silently
 * blocked the page's own script.
 */

const sha = (s: string) =>
  `'sha256-${createHash('sha256').update(s, 'utf8').digest('base64')}'`;

describe('inlineScripts', () => {
  it('returns the exact body of every inline script, untrimmed, and skips external ones', () => {
    const html = `<html><head>
<script type="module" src="/assets/index.js"></script>
<script>
  (function(){ document.documentElement.classList.add('dark'); })();
</script>
<script src=/assets/other.js></script>
<script data-x="1">console.log(1)</script>
</head></html>`;
    expect(inlineScripts(html)).toEqual([
      "\n  (function(){ document.documentElement.classList.add('dark'); })();\n",
      'console.log(1)',
    ]);
  });

  it('is empty for a page with no inline scripts', () => {
    expect(inlineScripts('<script src="a.js"></script>')).toEqual([]);
  });
});

describe('cspHashToken', () => {
  it("produces the 'sha256-<base64>' token the browser expects", () => {
    expect(cspHashToken('x')).toBe(sha('x'));
  });

  it('is sensitive to line endings - one of the ways a hardcoded value could drift', () => {
    expect(cspHashToken('a\nb')).not.toBe(cspHashToken('a\r\nb'));
  });
});

describe('cspInlineScriptHashes', () => {
  it('joins one token per inline script, in document order', () => {
    const html = '<script>one</script><script src="x"></script><script>two</script>';
    expect(cspInlineScriptHashes(html)).toBe(`${sha('one')} ${sha('two')}`);
  });

  it("matches the repo's own index.html theme script", () => {
    // Whatever the checkout's line endings, the token must be the hash of the
    // bytes as they are; that is what the browser hashes.
    const html = readFileSync('index.html', 'utf8');
    const [body] = inlineScripts(html);
    expect(body).toContain("localStorage.getItem('theme')");
    expect(cspInlineScriptHashes(html)).toBe(sha(body ?? ''));
  });
});