/* ===================================================================== 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( ''); const HTML = Buffer.from(""); 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);