Put the build page's policy first, and fix the review's other findings

- base.njk writes a page's Content-Security-Policy first in <head>, before the
  inline color-scheme script, and an Eleventy transform adds each inline
  script's hash to script-src, so the policy covers every script on the page.
- The test PNG's IDAT failed its CRC and zlib check; it is a valid 2x2 red
  PNG now, and the test checks the picture reaches the content.
- The README describes embed-my's /build redirect as a step of its own, and
  says the bundles test runs unzip, as the skill's steps do.

Author: alekswebnet

README.md

@@ -24,7 +24,7 @@ pnpm e2e       # the build page and the bundles in a browser, against _site/: bu
                # per machine: pnpm exec playwright install chromium
 ```
 
-`pnpm dev` serves the pages as Eleventy writes them; the build page's script is there only after a `pnpm build`.
+`pnpm dev` serves the pages as Eleventy writes them; the build page's script is there only after a `pnpm build`. The bundles test unzips a bundle with `unzip`, as the h5p-author skill's steps do: macOS and Linux have it, and so does CI's Ubuntu runner; on Windows, run the tests under WSL.
 
 Pushes to `main` deploy through [.github/workflows/pages.yml](.github/workflows/pages.yml). Pull requests get a build check from [.github/workflows/build.yml](.github/workflows/build.yml), which runs the browser tests too.
 
@@ -66,7 +66,7 @@ Nothing leaves the browser. A link can carry the source in its fragment, which n
 
 The player's Service Worker is in `/h5p/assets/` too, so its scope is `/h5p/assets/h5p/`: no other page of the site is under it. The address names who runs the page, as H5P Group's trademark policy asks of a name with "H5P" in it, and the page uses the word descriptively.
 
-The page and the bundles were embed-my.github.io's `/build` and `/bundles/` until 2026-11-10. `/build` there now redirects here with its fragment, so the links chats wrote before still build.
+The page and the bundles were embed-my.github.io's `/build` and `/bundles/` until 2026-11-10. Its `/build` becomes a redirect here that keeps the fragment, so the links chats wrote before still build: [embed-my/embed-my.github.io#18](https://github.com/embed-my/embed-my.github.io/pull/18), a step of its own, deployed once this page is live.
 
 ## The bundles
 

e2e/build.spec.ts

@@ -19,7 +19,7 @@ const RIVERS = {
 }
 
 /** A 2×2 PNG, red. */
-const PNG = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVR4nGP4z8DAwMDAxMDAwMDAAAANHQEDasKb6QAAAABJRU5ErkJggg==', 'base64')
+const PNG = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVR42mP4z8AARAwQCgAf7gP9Y167WwAAAABJRU5ErkJggg==', 'base64')
 
 /** Collects console errors, CSP reports, page errors and requests that leave the origin. */
 function watch(page: Page, baseURL: string | undefined): { problems: string[], elsewhere: string[] } {
@@ -170,5 +170,7 @@ test('a source that names a file waits for it, then builds with it', async ({ pa
   await page.locator('#build').click()
   await expectPlays(page)
   await expect(page.locator('#status')).toContainText('1 media file')
+  // The picture reaches the content and decodes: 2×2, as chosen.
+  await expect.poll(() => page.frameLocator('h5p-player iframe').first().locator('img').first().evaluate((img: HTMLImageElement) => img.naturalWidth)).toBe(2)
   expect(problems, problems.join('\n')).toEqual([])
 })

eleventy.config.js

@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
 import attributes from "./src/_data/pdfjsAttributes.js";
 
@@ -16,6 +17,19 @@ export default function (eleventyConfig) {
   // The docs run the exact package version they describe, served from this site.
   eleventyConfig.addPassthroughCopy({ "node_modules/@missing-elements/pdfjs-viewer/dist": "pdfjs-viewer/vendor" });
 
+  // A page with a Content-Security-Policy (`csp` in its front matter, written first in <head> by
+  // base.njk, and holding no double quote) allows its inline scripts by hash, as they are written:
+  // the color-scheme script has to run before the page paints, so it stays inline.
+  eleventyConfig.addTransform("csp-inline-script-hashes", function (content) {
+    if (!(this.page.outputPath || "").endsWith(".html")) return content;
+    const scriptSrc = /<meta http-equiv="Content-Security-Policy" content="[^"]*?script-src [^;"]*/;
+    if (!scriptSrc.test(content)) return content;
+    const hashes = [...content.matchAll(/<script(?![^>]*\ssrc=)[^>]*>([\s\S]*?)<\/script>/g)]
+      .map(([, source]) => ` 'sha256-${createHash("sha256").update(source).digest("base64")}'`)
+      .join("");
+    return content.replace(scriptSrc, (directive) => directive + hashes);
+  });
+
   let markdown;
   eleventyConfig.amendLibrary("md", (md) => {
     markdown = md;

src/_includes/base.njk

@@ -2,14 +2,14 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  {%- if csp %}
+  <meta http-equiv="Content-Security-Policy" content="{{ csp | safe }}">
+  {%- endif %}
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="light dark">
   <script>
     try { document.querySelector('meta[name="color-scheme"]').content = localStorage.getItem("color-scheme") ?? "light dark"; } catch {}
   </script>
-  {%- if csp %}
-  <meta http-equiv="Content-Security-Policy" content="{{ csp }}">
-  {%- endif %}
   <title>{{ title }}</title>
   <meta name="description" content="{{ description }}">
   <link rel="canonical" href="{{ site.url }}{{ page.url }}">

src/h5p/build/index.njk

@@ -2,9 +2,11 @@
 layout: base.njk
 title: Build an H5P activity · Missing Elements
 description: Turn the source an AI chat wrote with the h5p-author skill into a .h5p file, in your browser. Nothing is uploaded.
-# The page's only policy: GitHub Pages sends no headers. Packages it built play in the player's frame,
-# under the policy the player's Service Worker gives each response there. A file a source names by
-# web address is fetched by the build, so any host may be connected to.
+# The page's only policy: GitHub Pages sends no headers. base.njk writes it first in <head>, and the
+# site's inline color-scheme script is added to script-src by its hash at build (eleventy.config.js).
+# Packages it built play in the player's frame, under the policy the player's Service Worker gives
+# each response there. A file a source names by web address is fetched by the build, so any host may
+# be connected to.
 csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; font-src 'self'; connect-src * data: blob:; worker-src 'self' blob:; frame-src 'self' blob:; object-src 'none'; base-uri 'self'"
 ---
 {#- The markup build-page.ts wires up, built into /h5p/build/build-page.js by Vite (vite.config.ts). -#}