dogfather-universe/server/pruef-galerie.mjs

/* =====================================================================
   STUFE 5: HIGHLIGHTS ALS GALERIE -- UND DER WEG, AUF DEM BILDER
   HINAUSGEHEN (17.09.2026)

   Aus dem Plan im Vault. "Eure Clips und Bilder" zeigte Textkarten mit
   einem Anhang darunter. Ein Bild als Anhang unter einer Ueberschrift
   ist kein Highlight -- dieser Bereich lebt vom Sehen.

   ---------------------------------------------------------------------
   ZWEI DINGE, DIE BEIM MESSEN ANDERS WAREN ALS IM PLAN

   1. "Anhaenge sind schon da" -- sie hingen an AUFGABEN
      (`dateien.aufgabe_id`). Ein Eintrag konnte gar kein Bild tragen.
      Neue Spalte `eintrag_id`.

   2. UND DER WICHTIGE: Alles in dieser Ablage geht als DOWNLOAD hinaus
      (`application/octet-stream`, `Content-Disposition: attachment`).
      Das ist richtig so -- eine hochgeladene HTML- oder SVG-Datei
      wuerde im Browser als Seite DIESER Domain laufen, mit Zugriff auf
      die Sitzung. Eine Galerie braucht also einen eigenen, engen Weg.

   ---------------------------------------------------------------------
   DIE FRAGE, AUF DIE ES ANKOMMT

   "Ist das ein Bild?" wird NICHT ueber `dateien.typ` beantwortet. Diese
   Spalte traegt den vom Browser BEHAUPTETEN Typ -- wer hochlaedt,
   bestimmt ihn selbst. Eine Galerie, die ihm glaubt, liefert auf Zuruf
   alles inline aus.

   Erkannt wird an den ERSTEN BYTES. Die kann niemand behaupten.

   UND SVG IST AUSDRUECKLICH NICHT DABEI: Es ist ein Bildformat UND es
   kann Skript enthalten -- genau die Luecke, gegen die die Regel gebaut
   wurde. Ein Format, das beides ist, gehoert nicht in die Ausnahme.

   Aufrufen mit:  node server/pruef-galerie.mjs
   Bild:          SCHIRM=1 node server/pruef-galerie.mjs
   ===================================================================== */

import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { fileURLToPath } from "node:url";
import { eigenerPort } from "./helfer-port.mjs";
import { heuteLokal } from "./helfer-tag.mjs";

const PORT = await eigenerPort(import.meta, "pruef-galerie");
const ordner = mkdtempSync(join(tmpdir(), "ws-gal-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.WORKSPACE_DATEN = join(ordner, "daten");
process.env.PORT = String(PORT);
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
import { notbremse } from "./helfer-notbremse.mjs";
await import("./index.js");
notbremse(180_000, "pruef-galerie");
await new Promise((r) => setTimeout(r, 700));
const BASIS = `http://127.0.0.1:${PORT}`;

process.on("uncaughtException", (f) => { console.error("ABSTURZ:", f); process.exit(7); });
process.on("unhandledRejection", (f) => { console.error("ABSTURZ (Versprechen):", f); process.exit(7); });

let fehler = 0, geprueft = 0;
const melde = (t) => console.log(t);
const ok = (b, t) => { geprueft++; console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes, createHmac } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const schluessel = randomBytes(32).toString("hex");
d.prepare("INSERT INTO einstellungen (schluessel, wert, geaendert, von)"
  + " VALUES (?,?,?,NULL) ON CONFLICT(schluessel) DO NOTHING")
  .run("code_kennung_schluessel", schluessel, jetzt);
function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, salt, 64,
    { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  d.prepare("INSERT INTO personen"
    + " (name, rolle, code_hash, code_salt, code_n, code_kennung, aktiv, erstellt)"
    + " VALUES (?,?,?,?,?,?,1,?)")
    .run(name, rolle, hash, salt, 32768,
      createHmac("sha256", schluessel).update(code).digest("hex"), jetzt);
}
anlegen("Filipe", "admin", "CODE-DOGI-0001");
anlegen("Marina", "modi", "CODE-MODI-0001");
d.close();

async function anmelden(kachel, code) {
  const a = await fetch(BASIS + "/workspace/api/anmelden", {
    method: "POST", headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ rolle: kachel, code }),
  });
  return (a.headers.getSetCookie?.() || []).map((z) => z.split(";")[0]).join("; ");
}
const dogi = await anmelden("admin", "CODE-DOGI-0001");
const modi = await anmelden("creator", "CODE-MODI-0001");

/* ---------- Ein Highlight und die Dateien dazu ----------------------- */
const a = await fetch(BASIS + "/workspace/api/bereich/highlight", {
  method: "POST",
  headers: { "Content-Type": "application/json", cookie: dogi, origin: BASIS },
  body: JSON.stringify({ art: "clip", titel: "Casper springt ins Bild", datum: heuteLokal() }),
});
const eintragId = (await a.json().catch(() => null))?.id || 0;

/* ECHTE DATEIANFAENGE, keine erfundenen: Ein PNG faengt mit
   \x89PNG\r\n\x1a\n an, ein JPEG mit FFD8FF. Wer hier Platzhalter
   nimmt, prueft die eigene Erfindung. */
/* EIN ECHTES, DEKODIERBARES PNG (1x1, blau). Der erste Entwurf hatte
   nur den Dateikopf plus Nullen -- die Bytepruefung im Server nahm es
   an, der Browser konnte es aber nicht zeichnen. Das Bild verschwand
   dann durch den `error`-Handler in bereich.js, und die Pruefung fand
   im Raster nichts.

   Das war kein Fehler im Haus, sondern in der Pruefung -- aber ein
   nuetzlicher: Er hat nebenbei gezeigt, dass der Handler tut, was er
   soll. Ein kaputtes Bild hinterlaesst keinen leeren Rahmen. */
const PNG = Buffer.from(
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
  "base64");
const SVG = Buffer.from(
  '<svg xmlns="http://www.w3.org/2000/svg"><script>alert(1)</script></svg>');
const HTML = Buffer.from("<!DOCTYPE html><html><body><script>alert(1)</script></body></html>");

async function hochladen(inhalt, name, typBehauptet, eintrag = eintragId) {
  const kopf = {
    cookie: dogi, origin: BASIS,
    "content-type": typBehauptet,
    "x-dateiname": encodeURIComponent(name),
  };
  if (eintrag) kopf["x-eintrag"] = String(eintrag);
  const r = await fetch(BASIS + "/workspace/api/dateien", {
    method: "POST", headers: kopf, body: inhalt,
  });
  return { status: r.status, daten: await r.json().catch(() => null) };
}

/* =======================================================================
   1. EIN BILD HAENGT AM BEITRAG
   ======================================================================= */
melde("");
melde("=== 1. Das Bild am Highlight ===");
let idPng = 0;
{
  ok(eintragId > 0, `ein Highlight angelegt (#${eintragId})`);
  const r = await hochladen(PNG, "casper.png", "image/png");
  ok(r.status === 201, `ein PNG hochgeladen (${r.status} ${r.daten?.fehler || ""})`);
  idPng = r.daten?.id || 0;

  const l = await fetch(BASIS + "/workspace/api/bereich/highlight", { headers: { cookie: dogi } });
  const j = await l.json().catch(() => null);
  const e = (j?.eintraege || []).find((x) => x.id === eintragId);
  ok(Array.isArray(e?.bilder) && e.bilder.length === 1,
    `der Beitrag bringt sein Bild mit (${e?.bilder?.length ?? 0})`);
  ok(e?.bilder?.[0]?.id === idPng, "und zwar genau das hochgeladene");
}

/* =======================================================================
   2. ES GEHT ALS BILD HINAUS -- UND NUR ALS BILD
   ======================================================================= */
melde("");
melde("=== 2. Der Bildweg ===");
{
  const r = await fetch(`${BASIS}/workspace/api/dateien/${idPng}/bild`, { headers: { cookie: dogi } });
  ok(r.status === 200, `das PNG kommt (${r.status})`);
  ok(r.headers.get("content-type") === "image/png",
    `als image/png (${r.headers.get("content-type")})`);
  /* INLINE, sonst zeigt der Browser es nicht an, sondern laedt es. */
  ok(/^inline/.test(r.headers.get("content-disposition") || ""),
    `und inline (${r.headers.get("content-disposition")})`);
  /* DIE DREI SCHUTZKOEPFE muessen mit. Ohne `nosniff` darf der Browser
     den Typ selbst raten -- und dann waere die ganze Pruefung an den
     ersten Bytes umsonst. */
  ok(r.headers.get("x-content-type-options") === "nosniff", "mit nosniff");
  ok(/default-src 'none'/.test(r.headers.get("content-security-policy") || ""),
    "und mit enger Inhaltsregel");

  /* GEGENPROBE: Der alte Weg liefert dieselbe Datei weiterhin als
     Download aus -- daran hat sich nichts geaendert. */
  const alt = await fetch(`${BASIS}/workspace/api/dateien/${idPng}/inhalt`, { headers: { cookie: dogi } });
  ok(alt.headers.get("content-type") === "application/octet-stream",
    `der alte Weg bleibt ein Download (${alt.headers.get("content-type")})`);
}

/* =======================================================================
   3. WAS NICHT INLINE HINAUSGEHT -- DER EIGENTLICHE PUNKT
   ======================================================================= */
melde("");
melde("=== 3. Was kein Bild ist ===");
{
  /* SVG IST EIN BILDFORMAT UND KANN SKRIPT ENTHALTEN. Genau deshalb
     steht es nicht in der Ausnahme. */
  const s = await hochladen(SVG, "hübsch.svg", "image/svg+xml");
  ok(s.status === 201, `ein SVG laesst sich ablegen (${s.status})`);
  const sr = await fetch(`${BASIS}/workspace/api/dateien/${s.daten?.id}/bild`, { headers: { cookie: dogi } });
  ok(sr.status === 404, `aber NICHT als Bild ausgeliefert (${sr.status})`);

  /* EINE HTML-DATEI, DIE SICH ALS PNG AUSGIBT. Das ist der Fall, den
     ein Blick auf `dateien.typ` durchgelassen haette: Der behauptete
     Typ stimmt, der Inhalt nicht. */
  const h = await hochladen(HTML, "bild.png", "image/png");
  ok(h.status === 201, `eine HTML-Datei mit der Behauptung "image/png" wird abgelegt (${h.status})`);
  const hr = await fetch(`${BASIS}/workspace/api/dateien/${h.daten?.id}/bild`, { headers: { cookie: dogi } });
  ok(hr.status === 404,
    `und trotz der Behauptung NICHT als Bild ausgeliefert (${hr.status})`);

  /* UND UMGEKEHRT: ein echtes PNG, das sich als Text ausgibt, geht
     durch. Ohne diese Zeile hiesse "404" nur, dass der Weg immer
     ablehnt. */
  const p = await hochladen(PNG, "getarnt.txt", "text/plain");
  const pr = await fetch(`${BASIS}/workspace/api/dateien/${p.daten?.id}/bild`, { headers: { cookie: dogi } });
  ok(pr.status === 200 && pr.headers.get("content-type") === "image/png",
    `ein echtes PNG mit falscher Behauptung geht durch (${pr.status})`);
}

/* =======================================================================
   4. WER DAS BILD SEHEN DARF
   ======================================================================= */
melde("");
melde("=== 4. Die Sicht ===");
{
  /* EIN BILD AM COMMUNITY-BEITRAG FOLGT DEM BEITRAG, nicht der
     Dateiablage. Die Ablage-Regel haengt an Creator-Zuordnungen -- ein
     Modi hat keine, er saehe sonst nie ein Highlight, obwohl es fuer
     ihn gemacht ist. */
  const r = await fetch(`${BASIS}/workspace/api/dateien/${idPng}/bild`, { headers: { cookie: modi } });
  ok(r.status === 200, `ein Modi sieht das Highlight-Bild (${r.status})`);

  /* GEGENPROBE: Eine Datei OHNE Beitrag faellt auf die normale
     Ablage-Regel zurueck -- und die gilt fuer ihn nicht. */
  const lose = await hochladen(PNG, "intern.png", "image/png", null);
  const lr = await fetch(`${BASIS}/workspace/api/dateien/${lose.daten?.id}/bild`, { headers: { cookie: modi } });
  ok(lr.status === 404,
    `eine lose Datei der Ablage dagegen nicht (${lr.status})`);
}

/* =======================================================================
   5. IM BROWSER: DIE GALERIE
   ======================================================================= */
melde("");
melde("=== 5. Was man sieht ===");
const { chromium } = await import(
  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();
try {
  const kontext = await browser.newContext({ viewport: { width: 1100, height: 900 } });
  await kontext.addCookies(dogi.split("; ").map((k) => {
    const [name, ...rest] = k.split("=");
    return { name, value: rest.join("="), domain: "127.0.0.1", path: "/" };
  }));
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("console", (e) => { if (e.type() === "error") konsole.push(e.text()); });
  await seite.goto(`${BASIS}/workspace/bereich.html?b=highlight`, { waitUntil: "networkidle" });
  await seite.waitForSelector(".bildstreifen__bild", { timeout: 15_000 });
  await seite.waitForTimeout(600);

  const m = await seite.evaluate(() => {
    const bilder = [...document.querySelectorAll(".bildstreifen__bild")];
    return {
      raster: document.getElementById("liste")?.dataset.galerie || "",
      spalten: getComputedStyle(document.getElementById("liste"))
        .gridTemplateColumns.split(" ").filter(Boolean).length,
      anzahl: bilder.length,
      /* WIRKLICH GELADEN, nicht nur im Quelltext: Ein kaputtes Bild hat
         naturalWidth 0 -- und sieht im Foto aus wie ein Rahmen. */
      geladen: bilder.filter((b) => b.naturalWidth > 0).length,
      alt: bilder.map((b) => b.alt),
      /* Anspringbar: Eine Galerie aus nicht erreichbaren Kacheln ist
         fuer einen Teil der Zuschauer keine Galerie. */
      verweise: document.querySelectorAll(".bildstreifen__feld[href]").length,
    };
  });

  ok(m.raster === "ja", "die Liste ist ein Raster");
  ok(m.spalten >= 2, `mit mehreren Spalten (${m.spalten})`);
  ok(m.anzahl >= 1, `${m.anzahl} Bilder im Raster`);
  ok(m.geladen === m.anzahl, `alle wirklich geladen (${m.geladen} von ${m.anzahl})`);
  ok(m.alt.every((t) => t && t.length > 5),
    `jedes hat eine Beschreibung ("${m.alt[0] || ""}")`);
  ok(m.verweise === m.anzahl, `und jedes ist anspringbar (${m.verweise})`);

  /* DER EIGENTLICHE BEWEIS DIESES ABSCHNITTS: Am Beitrag haengen VIER
     Dateien -- zwei echte PNGs, ein SVG und eine HTML-Datei, die sich
     als PNG ausgibt. Im Raster stehen ZWEI. Die beiden anderen holt
     der Browser, bekommt 404 und der `error`-Handler raeumt sie weg:
     kein leerer Rahmen, kein kaputtes Symbol.

     Das ist die Stelle, an der die Bytepruefung im Server und die
     Oberflaeche zusammenarbeiten -- und die Zahl 2 von 4 ist der
     Beleg. */
  const angehaengt = await (await fetch(BASIS + "/workspace/api/bereich/highlight",
    { headers: { cookie: dogi } })).json()
    .then((j) => (j.eintraege || []).find((x) => x.id === eintragId)?.bilder?.length ?? 0);
  ok(angehaengt === 4, `am Beitrag haengen ${angehaengt} Dateien`);
  ok(m.anzahl === 2,
    `im Raster stehen nur die ${m.anzahl} echten Bilder -- SVG und getarnte HTML nicht`);

  /* DIE KONSOLE: Genau diese beiden 404 sind gewollt. Alles andere
     nicht. Ein pauschales "Konsole egal" waere der bequeme Weg und
     wuerde jeden echten Fehler mitverstecken. */
  const unerwartet = konsole.filter((z) => !/404/.test(z));
  ok(unerwartet.length === 0,
    unerwartet.length ? `Konsole: ${unerwartet[0]}`
      : `nur die ${konsole.length} gewollten 404 der Nicht-Bilder in der Konsole`);

  if (process.env.SCHIRM) {
    const pfad = fileURLToPath(new URL("pruef-galerie.png", import.meta.url));
    await seite.screenshot({ path: pfad, fullPage: false });
    melde("  --   Bildschirmfoto: server/pruef-galerie.png");
  }
  await kontext.close();
} finally {
  await browser.close();
}

melde("");
melde(`${geprueft} Pruefungen, ${fehler} Fehler`);
melde(fehler ? "NICHT IN ORDNUNG" : "ALLES IN ORDNUNG");
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* Aufraeumrest */ }
process.exit(fehler ? 1 : 0);