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 {
      /* ==== DAS RASTER LIEGT EINE EBENE TIEFER (berichtigt 23.09.2026)

         Gemessen wurde hier "#liste". Das war richtig, bis die
         Highlights am 20.09.2026 in Kanalspalten umzogen: Seither
         nimmt bereich.js dem Listenkasten sein data-galerie
         ausdruecklich wieder weg ("delete ziel.dataset.galerie") und
         setzt es an die einzelne Spalte -- sonst wurde der
         Spaltenkasten zu EINER Zelle von 376 px und die drei Accounts
         standen untereinander.

         Die Pruefung ist seither dauerhaft rot gewesen ("mit mehreren
         Spalten (1)"), ohne dass etwas kaputt war. Sie hat an einer
         Stelle gemessen, an der absichtlich kein Raster mehr steht.
         Und eine Warnung, die immer kommt, liest irgendwann niemand
         mehr.

         Gesucht wird jetzt dort, wo die Bilder wirklich liegen --
         und zwar ueber das BILD, nicht ueber einen Kastennamen: Der
         naechste Umbau darf die Huelle wieder umbenennen. */
      raster: (() => {
        const b = document.querySelector(".bildstreifen__bild");
        const k = b ? b.closest("[data-galerie]") : null;
        return k ? (k.dataset.galerie || "") : "";
      })(),
      spalten: (() => {
        const b = document.querySelector(".bildstreifen__bild");
        const k = b ? b.closest("[data-galerie]") : document.getElementById("liste");
        return k ? getComputedStyle(k).gridTemplateColumns.split(" ").filter(Boolean).length : 0;
      })(),
      /* Wie breit ist der Kasten, und wie breit eine Spalte darin?
         Ohne diese zwei Zahlen ist "eine Spalte" weder gut noch
         schlecht -- es kommt darauf an, wie viel Platz da war. */
      kastenBreit: (() => {
        const b = document.querySelector(".bildstreifen__bild");
        const k = b ? b.closest("[data-galerie]") : document.getElementById("liste");
        return k ? Math.round(k.getBoundingClientRect().width) : 0;
      })(),
      spalteBreit: (() => {
        const b = document.querySelector(".bildstreifen__bild");
        const k = b ? b.closest("[data-galerie]") : document.getElementById("liste");
        if (!k) return 0;
        const erste = getComputedStyle(k).gridTemplateColumns.split(" ")[0] || "0";
        return Math.round(parseFloat(erste) || 0);
      })(),
      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");
  /* ==== NICHT "MINDESTENS ZWEI" (berichtigt 23.09.2026) ==========

     Hier stand `m.spalten >= 2`. Das war eine Erwartung an die
     Anordnung, nicht an die Sache -- und seit die Highlights in
     Kanalspalten liegen, ist sie schlicht falsch: In einer schmalen
     Spalte gehoert EINE Kachel je Reihe, bei viel Platz zwei. So
     steht es auch im Quelltext ("gerechnet wird nichts", auto-fit).

     Gefragt wird deshalb, was wirklich zaehlt: Sind die Kacheln
     breit genug, um etwas zu erkennen? Eine Galerie, die sich in
     vier Spalten a 90 px quetscht, waere der Fehler -- nicht eine
     Spalte in einem schmalen Kasten. */
  ok(m.spalteBreit >= 140,
    `die Kacheln sind breit genug (${m.spalten} Spalte(n) à ${m.spalteBreit} px `
    + `in einem ${m.kastenBreit} px breiten Kasten)`);
  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);