Eigenes CSS je Element für alle, eigenes Skript nur für Administratoren

Dokumentschema v13. Der neue Reiter "Erweitert" im Editor nimmt zu jedem
Element eigenes CSS und eigenes Skript auf.

Eigenes CSS parst `CustomCode` und schreibt es selbst wieder aus, mit einem
Selektor, den die Klasse setzt und der nie aus der Eingabe stammt. Erlaubt
sind Eigenschaften für das Element und verschachtelte Regeln mit `&`
(`&:hover`, `& > p`, `& .block-text`). Weil neu serialisiert wird, kann eine
überzählige `}` den Block nicht verlassen. Abgewiesen: @-Regeln,
Backslash-Escapes, `expression()`, fremde Selektoren und jede Adresse außer
einem einzelnen `/` oder `https://`. Das darf jeder mit Editorrolle.

Eigenes Skript ist etwas anderes: beliebiges JavaScript auf der
veröffentlichten Website. Deshalb nur für Administratoren, durchgesetzt beim
Schreiben über einen Vergleich mit dem gespeicherten Stand - ein Editor kann
eine Seite mit Skript weiter bearbeiten, das Skript aber nicht anfassen, auch
nicht über eine selbst gebaute Anfrage. Ausgeliefert wird es als
`/assets/seite/{id}.js` und nur für veröffentlichte Seiten, jedes Skript in
einer eigenen Closure mit gesuchtem `element` und `try`/`catch`. Nur eine
Seite mit eigenem Skript sendet `script-src 'self'`, jede andere behält
`script-src 'none'`; inline ist nirgends erlaubt. In der Editorvorschau wird
nichts ausgeführt.

Zwei echte Löcher kamen beim Testen heraus und sind behoben: `& .block-text`
wurde zu `#id.block-text`, weil das führende Leerzeichen wegtrimmt wurde, und
`url(//fremd.example/x.png)` kam durch, weil jede Adresse mit `/` erlaubt war.

201 PHP-Tests / 716 Assertions unter PHP 8.2.12 und 8.4.22, Playwright-
Editortest und öffentliche Browserprüfung grün. Nicht geprüft: der Reiter
"Erweitert" ist nicht von Hand bedient und nicht mit einem Screenreader
getestet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

docs/ARCHITECTURE.md

@@ -332,3 +332,18 @@ Zeilenumbrüche werden in beiden Zweigen zu `<br>`. Vorher behielt ein Text, der
 Ein Textblock, der nach dem Filtern leer ist, wird abgewiesen – dieselbe Regel wie für einen von Hand geleerten Textblock. Wer nur ein verbotenes Element einfügt, bekommt also eine Meldung statt eines stillschweigend leeren Blocks.
 
 Im Editor gibt es zwei Sichten auf denselben Wert: eine Formatierungsansicht mit Werkzeugleiste und eine HTML-Ansicht mit der Auszeichnung. Eingefügter Inhalt wird als reiner Text übernommen. Die Werkzeugleiste nutzt `execCommand`; das ist abgekündigt, aber das Einzige, was alle Browser für diese Aufgabe umsetzen, und da der Server ohnehin normalisiert, kann eine Browsereigenheit nichts Unerwartetes speichern.
+
+## ADR 028 – Eigenes CSS und eigenes Skript je Element (Dokumentschema v13, 12.09.2026)
+
+Umut wollte an jedem Element eigenes CSS **und** eigenes Skript setzen können. Beides ist umgesetzt, aber nicht gleich behandelt, weil beides sehr Unterschiedliches anrichten kann.
+
+**Eigenes CSS** wird von `CustomCode` geparst und selbst wieder ausgeschrieben, mit einem Selektor, den diese Klasse setzt und der nie aus der Eingabe stammt. Akzeptiert werden Eigenschaften für das Element und verschachtelte Regeln, die mit `&` beginnen – `&:hover`, `& > p`, `& .block-text`. Weil die Ausgabe neu serialisiert wird, kann eine überzählige `}` den Block nicht verlassen. Abgewiesen werden @-Regeln, Backslash-Escapes, `expression()` und jede Adresse, die nicht mit einem einzelnen `/` oder `https://` beginnt. Fremde Selektoren gibt es nicht. Das darf jeder mit Editorrolle: das Ergebnis kann hässlich sein, aber keinen Code ausführen.
+
+**Eigenes Skript ist etwas anderes.** Es ist beliebiges JavaScript auf der veröffentlichten Website; wer es setzen darf, kann Code im Browser jedes Besuchers und jedes Administrators ausführen. Das lässt sich nicht entschärfen, nur eingrenzen:
+
+- **Nur Administratoren.** Durchgesetzt wird das beim Schreiben, indem die Skripte der eingehenden Fassung mit den gespeicherten verglichen werden. Ein Editor kann eine Seite mit Skript also weiter bearbeiten und speichern, aber das Skript nicht anfassen – auch nicht über eine selbst gebaute Anfrage. Im Panel ist das Feld für ihn nur lesbar, was dieselbe Regel bloß sichtbar macht.
+- **Als eigene Datei, nicht inline.** `/assets/seite/{id}.js` liefert die Skripte einer **veröffentlichten** Seite, jedes in einer eigenen Closure mit bereits gesuchtem `element` und einem `try`/`catch`, damit ein Fehler die anderen nicht mitnimmt. Ein Skript aus einem Entwurf wird nicht ausgeliefert.
+- **Die strenge Richtlinie bleibt die Voreinstellung.** Nur eine Seite, die tatsächlich ein eigenes Skript trägt, sendet `script-src 'self'`. Jede andere behält `script-src 'none'`. Inline-Skript ist nirgends erlaubt.
+- **In der Editorvorschau wird nichts ausgeführt.** Die Vorschau soll das Layout zeigen, nicht Code laufen lassen, der die Seite unter den Händen des Bearbeiters verändert.
+
+Zwei echte Löcher kamen beim Testen heraus. `& .block-text` wurde zu `#id.block-text`, weil das führende Leerzeichen wegtrimmt wurde – aus dem Nachfahren wurde derselbe Knoten, die Regel traf das falsche Element. Und `url(//fremd.example/x.png)` kam durch, weil die Prüfung jedes `/` erlaubte: eine protokollrelative Adresse hätte über das Schema der Seite von Dritten geladen. Beides ist behoben und durch Tests abgedeckt.

docs/AUSBAUPLAN.md

@@ -128,7 +128,7 @@ Umut hat den Umfang von G erweitert. Vier Punkte, in dieser Reihenfolge:
 
 1. ~~**Kopf- und Fußbereich frei aus Elementen bauen**~~ — **erledigt am 12.09.2026** (ADR 026). Ursprünglicher Wortlaut: **Kopf- und Fußbereich frei aus Elementen bauen**, genau wie eine Sektion – keine feste Marke, keine feste Navigation im Template. Dazu wiederverwendbare Sektionen, die *verknüpft* und nicht kopiert werden: eine Änderung erreicht jede Seite, die sie nutzt.
 2. ~~**Rich Text in Textelementen**~~ — **erledigt am 12.09.2026** (ADR 027). Umgesetzt für Textblöcke mit Werkzeugleiste und HTML-Ansicht; gefiltert wird auf dem Server beim Speichern. Überschrift, Button und Zitat bleiben bewusst Klartext.
-3. **Eigenes CSS und eigenes Skript je Element.** Eigenes CSS ist unkritisch und für alle mit Editorrolle nutzbar. **Eigenes Skript ist es nicht:** es ist gespeichertes, ausführbares JavaScript auf der Website. Wer es setzen darf, kann Code im Browser jedes Administrators ausführen. Deshalb: nur für Administratoren, Ausgabe über eine seiteneigene Skriptdatei statt inline, keine Ausführung in der Editorvorschau, und `script-src 'self'` nur auf Seiten, die tatsächlich ein Skript tragen. Der Preis steht in der Oberfläche.
+3. ~~**Eigenes CSS und eigenes Skript je Element.**~~ — **erledigt am 12.09.2026** (ADR 028). Ursprünglicher Wortlaut: **Eigenes CSS und eigenes Skript je Element.** Eigenes CSS ist unkritisch und für alle mit Editorrolle nutzbar. **Eigenes Skript ist es nicht:** es ist gespeichertes, ausführbares JavaScript auf der Website. Wer es setzen darf, kann Code im Browser jedes Administrators ausführen. Deshalb: nur für Administratoren, Ausgabe über eine seiteneigene Skriptdatei statt inline, keine Ausführung in der Editorvorschau, und `script-src 'self'` nur auf Seiten, die tatsächlich ein Skript tragen. Der Preis steht in der Oberfläche.
 4. **Verwaltung neu gestalten** – einfacher, schöner, ohne Nachdenken bedienbar. Gestaltungsfreiheit ausdrücklich bei mir; der bisherige Stil ist nicht bindend. Das betrifft Navigation zwischen den Bereichen, die Seitenliste, die Panels im Editor und die Formularseiten, die derzeit alle als lange Formulartabellen gebaut sind.
 
 Abnahme: Kopf- und Fußbereich sind im Editor gestaltbar und öffentlich sichtbar. Eine verknüpfte Sektion auf zwei Seiten ändert sich an beiden Stellen gleichzeitig. Ein Textelement lässt sich formatiert und als HTML bearbeiten, und keine Auszeichnung außerhalb der Positivliste übersteht das Speichern. Eigenes CSS wirkt, eigenes Skript wirkt nur für Administratoren gesetzt und nur auf der veröffentlichten Seite. Die Verwaltung ist ohne Anleitung bedienbar.

docs/QUALITY.md

@@ -1,5 +1,15 @@
 # Qualitätsbericht – erster ausführbarer Prototyp
 
+## Ergänzung: eigenes CSS und eigenes Skript, 12.09.2026
+
+- **201 PHP-Tests / 716 Assertions** unter PHP 8.2.12 und PHP 8.4.22, **15 JavaScript-Modelltests**, der vollständige Playwright-Editortest mit axe (null Verstöße) und die öffentliche Browserprüfung.
+- **Zehn abgewiesene CSS-Eingaben** erreichen kein Dokument, darunter die Ausbruchsversuche: `color:red} body{display:none`, ein fremder Selektor `body { … }`, `@import`, `@media`, `url(javascript:alert(1))`, `url(//fremd.example/x.png)`, ein Backslash-Escape und `expression()`.
+- Fünf erlaubte CSS-Formen werden korrekt auf das Element bezogen, einschließlich `& > p` und `& .block-text`.
+- **Zwei echte Löcher kamen dabei heraus.** `& .block-text` wurde zu `#id.block-text`, weil das führende Leerzeichen wegtrimmt wurde – aus dem Nachfahren wurde derselbe Knoten, die Regel traf das falsche Element. Und `url(//fremd.example/x.png)` kam durch, weil jede Adresse mit `/` erlaubt war: eine protokollrelative Adresse hätte über das Schema der Seite von Dritten geladen. Beides behoben, beides durch einen Test abgedeckt.
+- Skriptauslieferung geprüft: eigenes Skript erscheint **nie** im HTML, sondern nur unter `/assets/seite/{id}.js` mit `text/javascript`, in einer eigenen Closure mit gesuchtem `element`. Die Seite mit Skript sendet `script-src 'self'`, eine Seite ohne behält `script-src 'none'` und liefert für ihre Adresse 404. **Ein Skript aus einem gespeicherten, aber unveröffentlichten Entwurf wird nicht ausgeliefert.**
+- Rollenprüfung geprüft: der Vergleich mit dem gespeicherten Stand weist Ändern, Entfernen und Hinzufügen eines Skripts ab und lässt ein unverändertes Skript durch – ein Editor kann eine Seite mit Skript also weiter bearbeiten, ohne das Skript anfassen zu können.
+- **Nicht geprüft:** der Reiter „Erweitert“ ist nicht von Hand bedient und nicht mit einem Screenreader getestet. Ob ein eingesetztes Skript im Browser tatsächlich läuft, ist ebenfalls nicht ausgeführt worden – geprüft ist, dass die Datei mit dem erwarteten Inhalt ausgeliefert wird und dass die Richtlinie sie zulässt.
+
 ## Ergänzung: formatierter Text, 12.09.2026
 
 - **182 PHP-Tests / 685 Assertions** unter PHP 8.2.12 und PHP 8.4.22, **15 JavaScript-Modelltests**, der vollständige Playwright-Editortest mit axe (null Verstöße) und die öffentliche Browserprüfung.

docs/STATUS.md

@@ -1,6 +1,6 @@
 # Projektstatus
 
-Stand: 12.09.2026. Arbeitstitel Kant CMS. **Formatierter Text mit Werkzeugleiste und HTML-Ansicht, serverseitig gegen eine Positivliste gefiltert. Kopf- und Fußbereich sind frei gestaltbare Blockdokumente, dazu verknüpfte wiederverwendbare Sektionen (Arbeitspaket G, Teil 1). Frei wählbare Startseite; `/sitemap.xml` und Geschwister waren lokal nie erreichbar und sind es jetzt. Seiten verschieben mit automatischen Weiterleitungen, Papierkorb, Fassungsverlauf und geplante Veröffentlichung (Arbeitspaket F). Browsertests wiederhergestellt und erweitert; dabei drei echte Fehler gefunden und behoben, darunter die in der Vorschau wirkungslose Gestaltung. Direktbearbeitung in der Vorschau, Kontrastwarnung, Gestaltungsvorlagen und Bildauswahl für Hintergrundbilder. Der Editor gestaltet frei statt über feste Auswahllisten: eigene Farbpalette, Schriften, und jede Eigenschaft je Block, je Gerät und für den Hover-Zustand frei einstellbar (Dokumentschema v10). SEO-Grundlage mit Sitemap, robots.txt, Weiterleitungen und strukturierten Daten (Arbeitspaket E). Formulare mit serverseitiger Validierung, Einwilligung, E-Mail-Versand und Spamschutz (Arbeitspaket D). Tabs als fortschreitende Verbesserung mit JavaScript (Dokumentschema v7). Zehn neue Blöcke für die Abschnitte der Pilotstartseite (Arbeitspaket C). Beiträge mit Datum, Autor, Auszug, Beitragsbild, Kategorien, Schlagwörtern, Archiven, einbettbarer Beitragsliste und RSS (Arbeitspaket B). Menüs mit Seiten-, Anker- und externen Zielen ersetzen die fest verdrahtete Navigation (Arbeitspaket A). Seiten und Beiträge lassen sich im Browser anlegen und löschen, mit Adresshierarchie bis vier Ebenen.** Die vollständige Phase-1-Abnahme bleibt wegen des fehlenden UX-Builder-Referenzabgleichs offen.
+Stand: 12.09.2026. Arbeitstitel Kant CMS. **Eigenes CSS je Element für alle, eigenes Skript nur für Administratoren und nur als eigene Datei. Formatierter Text mit Werkzeugleiste und HTML-Ansicht, serverseitig gegen eine Positivliste gefiltert. Kopf- und Fußbereich sind frei gestaltbare Blockdokumente, dazu verknüpfte wiederverwendbare Sektionen (Arbeitspaket G, Teil 1). Frei wählbare Startseite; `/sitemap.xml` und Geschwister waren lokal nie erreichbar und sind es jetzt. Seiten verschieben mit automatischen Weiterleitungen, Papierkorb, Fassungsverlauf und geplante Veröffentlichung (Arbeitspaket F). Browsertests wiederhergestellt und erweitert; dabei drei echte Fehler gefunden und behoben, darunter die in der Vorschau wirkungslose Gestaltung. Direktbearbeitung in der Vorschau, Kontrastwarnung, Gestaltungsvorlagen und Bildauswahl für Hintergrundbilder. Der Editor gestaltet frei statt über feste Auswahllisten: eigene Farbpalette, Schriften, und jede Eigenschaft je Block, je Gerät und für den Hover-Zustand frei einstellbar (Dokumentschema v10). SEO-Grundlage mit Sitemap, robots.txt, Weiterleitungen und strukturierten Daten (Arbeitspaket E). Formulare mit serverseitiger Validierung, Einwilligung, E-Mail-Versand und Spamschutz (Arbeitspaket D). Tabs als fortschreitende Verbesserung mit JavaScript (Dokumentschema v7). Zehn neue Blöcke für die Abschnitte der Pilotstartseite (Arbeitspaket C). Beiträge mit Datum, Autor, Auszug, Beitragsbild, Kategorien, Schlagwörtern, Archiven, einbettbarer Beitragsliste und RSS (Arbeitspaket B). Menüs mit Seiten-, Anker- und externen Zielen ersetzen die fest verdrahtete Navigation (Arbeitspaket A). Seiten und Beiträge lassen sich im Browser anlegen und löschen, mit Adresshierarchie bis vier Ebenen.** Die vollständige Phase-1-Abnahme bleibt wegen des fehlenden UX-Builder-Referenzabgleichs offen.
 
 Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt. Noch kein Remote und kein Push.
 
@@ -25,6 +25,8 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 - Auf ausdrücklichen Nutzerwunsch lokalen Administrator `umut` mit zufälligem Passwort angelegt und im In-App-Browser erfolgreich angemeldet. Das Passwort steht in keiner Projektdatei; nur der Hash in der lokalen Datenbank. Keine Browser-Passwortspeicherung ausgelöst.
 - Seitenerstellung und -löschung im Browser: `POST /admin/pages` (ab `ROLE_EDITOR`) legt Seite oder Beitrag mit gültigem Startdokument als privaten Entwurf an; `POST /admin/pages/{id}/delete` (nur `ROLE_ADMIN`) entfernt eine Seite mit allen Revisionen. Beide mit CSRF-Token, Fehlermeldungen als Flash und ohne JavaScript bedienbar.
 - Adresshierarchie: neue Spalten `path`, `parent_id`, `type`, `created_at` über Migration `20260912000400`; websiteweit eindeutiger Pfad statt eindeutigem Slug, Tiefe bis vier Ebenen, Beiträge ohne Unterseiten, reservierte Adressen und Adressableitung aus dem Titel. Öffentliche Route bedient verschachtelte Pfade wie `/leistungen/webdesign`; ein Lookahead hält `/admin`, `/media` und `/assets` aus dem Auffangmuster.
+- **Eigenes CSS je Element** (Dokumentschema v13) im neuen Reiter „Erweitert“: Eigenschaften für das Element und verschachtelte Regeln mit `&`. Der Selektor wird vom Server gesetzt, die Ausgabe neu serialisiert – eine überzählige `}` kann den Block nicht verlassen. Abgewiesen: @-Regeln, Backslash-Escapes, `expression()`, fremde Selektoren und jede Adresse außer einem einzelnen `/` oder `https://`. Für jeden mit Editorrolle.
+- **Eigenes Skript je Element nur für Administratoren.** Durchgesetzt beim Schreiben durch Vergleich mit dem gespeicherten Stand – ein Editor kann eine Seite mit Skript weiter bearbeiten, das Skript aber nicht anfassen, auch nicht über eine eigene Anfrage. Ausgeliefert als `/assets/seite/{id}.js` nur für **veröffentlichte** Seiten, jedes Skript in einer eigenen Closure mit `element` und `try`/`catch`. **Nur eine Seite mit eigenem Skript sendet `script-src 'self'`**, jede andere behält `script-src 'none'`; inline ist nirgends erlaubt. In der Editorvorschau wird nichts ausgeführt.
 - **Formatierter Text in Textblöcken** (Dokumentschema v12): fett, kursiv, unterstrichen, durchgestrichen, Code, hervorgehoben, hoch-/tiefgestellt, Absätze, Listen und Links. Im Editor eine Werkzeugleiste plus **HTML-Ansicht**; eingefügter Inhalt kommt als reiner Text an. **Gefiltert wird auf dem Server beim Speichern**, nicht im Editor und nicht beim Rendern – was in der Datenbank liegt, ist schon sicher. Nicht erlaubte Elemente werden ausgepackt, der Text bleibt; `script`, `style`, `iframe` und Verwandte werden samt Inhalt entfernt. Attribute fallen weg außer `href` nach Adressprüfung. Ältere Dokumente behalten Klartextsemantik und werden weiter maskiert.
 - **Kopf- und Fußbereich sind Blockdokumente** unter `/admin/partials`, im selben Editor gestaltbar wie eine Seite. Im Template steht keine Marke und keine Navigation mehr; ein neuer Block `menu` zeigt einen Menüplatz. Geteilte Bereiche haben keinen Entwurf und keine Veröffentlichung – gespeichert heißt live – und dürfen keine Hauptüberschrift enthalten, weil jede Seite ihre eigene bringt.
 - **Wiederverwendbare Sektionen werden verknüpft, nicht kopiert** (Block `partialref`, Dokumentschema v11): die Seite speichert nur die Adresse, eine Änderung erreicht jede Seite, die sie einbindet. Zyklen werden abgewiesen, Verschachtelung auf drei Ebenen begrenzt, eine entfernte Sektion hinterlässt keine Lücke und der Verweis bleibt gespeichert. Die Abschnittsvorlagen kopieren weiterhin – beide Wege stehen bewusst nebeneinander.
@@ -59,8 +61,9 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 
 ## Geprüft
 
-- 182 PHP-Tests / 685 Assertions unter PHP 8.2.12 und 8.4.22 erfolgreich; zusätzlich 15 JavaScript-Modelltests, der vollständige Playwright-Editortest und die öffentliche Browserprüfung. Abgedeckt sind Migration/Erhaltung, Versionen, ungültige Geräte-/Typ-/Design-/Effektwerte, Vererbung/Reset/Undo, Vorlage-/Galerie-IDs, Uploadvalidierung und Neuencodierung, Metadatenkonflikte, Archivierung sowie sichere Bildquellen.
+- 201 PHP-Tests / 716 Assertions unter PHP 8.2.12 und 8.4.22 erfolgreich; zusätzlich 15 JavaScript-Modelltests, der vollständige Playwright-Editortest und die öffentliche Browserprüfung. Abgedeckt sind Migration/Erhaltung, Versionen, ungültige Geräte-/Typ-/Design-/Effektwerte, Vererbung/Reset/Undo, Vorlage-/Galerie-IDs, Uploadvalidierung und Neuencodierung, Metadatenkonflikte, Archivierung sowie sichere Bildquellen.
 - Neu geprüft (15 Tests): privater Entwurf nach dem Anlegen, verschachtelte Pfade mit gleichem Slug unter verschiedenen Eltern, abgewiesene Adressen (Großbuchstaben, Schrägstrich, leer, reserviert, unbekannter Typ, fehlendes Elternteil) ohne Schreibzugriff, doppelte Adresse, Tiefengrenze, Beiträge ohne Unterseiten, Löschen mit allen Revisionen samt Schutz für Elternseiten und veraltete Versionen, sowie dass die CMS-Routen nicht vom öffentlichen Auffangmuster verschluckt werden. Über HTTP zusätzlich: anonyme Schreibversuche, CSRF für Anlegen und Löschen, Adressableitung aus dem Titel, kein Löschangebot und HTTP 403 für die Editorrolle, erfolgreiches Löschen als Administrator.
+- Eigener Code geprüft: fünf CSS-Formen werden korrekt auf das Element bezogen, darunter `& .block-text` mit erhaltenem Nachfahren-Leerzeichen. **Zehn abgewiesene CSS-Eingaben** erreichen kein Dokument: Ausbruch mit `}`, fremder Selektor, `@import`, `@media`, `javascript:`-Adresse, protokollrelative Adresse, Backslash-Escape, `expression()`, Eigenschaft ohne Wert und unsinniger Eigenschaftsname. Eigenes CSS erscheint im Seiten-Stylesheet, eigenes Skript **nur** als Datei mit `script-src 'self'` ausschließlich auf dieser Seite; eine Seite ohne eigenes Skript behält `script-src 'none'` und liefert keine Datei. Ein Skript aus einem unveröffentlichten Entwurf wird nicht ausgeliefert. Der Rollenvergleich weist Ändern, Entfernen und Hinzufügen eines Skripts ab und lässt unveränderte Skripte durch.
 - Formatierter Text geprüft: **dreizehn Fälle** durch den Filter, darunter erlaubte Auszeichnung und Listen, ein `script` samt Inhalt entfernt und der Text danach erhalten, Ereignisattribut entfernt, `class`/`style` entfernt und das Element ausgepackt, `javascript:`-Link zu Text geworden, Bild mit `onerror` entfernt, `iframe` entfernt, unausgeglichene Auszeichnung geschlossen, lokaler Link erhalten, externer Link mit `rel="noopener"`, Klartext maskiert und Umbruch zu `<br>`. Dazu: gefiltert wird beim Speichern (die Datenbank enthält schon die sichere Fassung), ein nach dem Filtern leerer Textblock wird abgewiesen ohne zu schreiben, ab v12 erscheint Auszeichnung als Auszeichnung in einem `div`, vor v12 maskiert in einem `p`, und in einem geteilten Bereich gilt derselbe Filter.
 - Bereiche geprüft: die eingesetzten Kopf- und Fußbereiche erscheinen als gewöhnliche Blöcke, der Navigationsblock zeigt das Menü, und eine Änderung am Kopfbereich erreicht beide Seiten gleichzeitig. Ein leerer Bereich rendert nichts statt einer kaputten Hülle. Verknüpfte Sektion geprüft: auf zwei Seiten sichtbar, die Seitendokumente enthalten nur die Adresse, eine Änderung wirkt an beiden Stellen, `usedBy` nennt beide Seiten, und nach dem Entfernen bleiben die Seiten heil und der Verweis erhalten. Abgewiesen werden: Hauptüberschrift in einem geteilten Bereich, Sektion mit Selbstbezug, zweiter Kopfbereich und das Löschen von Kopf- oder Fußbereich.
 - Startseite geprüft: eine andere veröffentlichte Seite wird zur Wurzel, antwortet unter `/`, ihre eigene Adresse leitet mit 301 dorthin, die bisherige Wurzel wird eine gewöhnliche Seite und ist wieder verschiebbar. Sitemap, strukturierte Daten und Menüauflösung folgen derselben Entscheidung. Solange eine Seite die Wurzel ist, werden Umbenennen und Papierkorb abgewiesen. Drei ungültige Wurzelangaben (nicht vorhanden, leer, Großbuchstaben) ändern nichts.
@@ -103,7 +106,8 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 - Mediathek derzeit für statische Bilder: keine Videos/PDFs/SVGs, Lightbox/Slideshow, freie Bildzuschnitte, Ordner, Paginierung oder physische Löschung. Bild-URLs sind öffentlich; Archivieren schützt keine vertraulichen Dateien. Originale werden durch optimierte Varianten ersetzt. Einblendungen starten beim Laden, nicht beim Scrollen.
 - Sektionen bieten die vorhandenen Farb-/Breitentokens geräteübergreifend. Benutzerverwaltung und Passwortänderung sind noch nicht als Browseroberfläche verfügbar.
 - **Offene redaktionelle Feststellung:** `/grundlagen` trägt einen im Editor gesetzten Textblock in `#d08080` auf hellem Grund – 2,75:1, unter der AA-Schwelle. Die Farbe wurde **nicht** verändert, weil sie eine Nutzerentscheidung ist; die Prüfung nennt sie bei jedem Lauf, und die Kontrastwarnung im Editor meldet sie ebenfalls.
-- **Aus Umuts erweitertem Auftrag noch offen** (Paket G2 im Ausbauplan): eigenes CSS und eigenes Skript je Element, und die Neugestaltung der Verwaltung. Die Sicherheitsfolgen des Skriptfelds stehen dort.
+- **Aus Umuts erweitertem Auftrag noch offen** (Paket G2 im Ausbauplan): die Neugestaltung der Verwaltung.
+- Eigenes CSS kennt keine Gerätevarianten – dafür sind die Vorschaugrößen im Designbereich da. Eigenes Skript hat keine Fassungsverwaltung außer der Seitenhistorie und keine Prüfung auf Syntaxfehler; ein fehlerhaftes Skript schreibt in die Browserkonsole und lässt die Seite sonst unangetastet.
 - Formatierter Text gilt nur für Textblöcke. Überschrift, Button, Zitat und die Titel von Karten, Tabs und Akkordeon bleiben Klartext; Auszeichnung in einer Überschrift bringt mehr Ärger als Nutzen. Die Werkzeugleiste ist nicht mit einem Screenreader geprüft.
 - Offen: der Papierkorb wird nicht automatisch geleert, es gibt keine Aufbewahrungsfrist, und Weiterleitungen aus einem Verschiebevorgang lassen sich nur einzeln in den Einstellungen entfernen.
 - Weiterhin keine Erprobung mit einem Screenreader. Bei der Direktbearbeitung wiegt das: dass der Fokus sinnvoll wandert und der Zustandswechsel angekündigt wird, ist durch axe nicht abgedeckt.
@@ -124,7 +128,7 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 
 ## Nächster konkreter Schritt
 
-Paket G2 aus `docs/AUSBAUPLAN.md`: eigenes CSS und Skript je Element, danach die Neugestaltung der Verwaltung. Dazu den Editor mit einem Screenreader prüfen. Danach der Rest von Arbeitspaket G (Inline-Ausbau, globale Bereiche für Header und Footer, wiederverwendbare Sektionen). Danach Arbeitspaket F aus `docs/AUSBAUPLAN.md`: Seiten umbenennen und verschieben mit Aktualisierung aller Kindpfade und automatischer Weiterleitung, frei wählbare Startseite, geplantes Veröffentlichen, Revisionsliste mit Wiederherstellung und ein Papierkorb statt sofortigem Löschen.
+Paket G2, letzter Punkt: die Verwaltung neu gestalten – einfacher, schöner, ohne Anleitung bedienbar, mit Gestaltungsfreiheit. Dazu den Editor mit einem Screenreader prüfen. Danach der Rest von Arbeitspaket G (Inline-Ausbau, globale Bereiche für Header und Footer, wiederverwendbare Sektionen). Danach Arbeitspaket F aus `docs/AUSBAUPLAN.md`: Seiten umbenennen und verschieben mit Aktualisierung aller Kindpfade und automatischer Weiterleitung, frei wählbare Startseite, geplantes Veröffentlichen, Revisionsliste mit Wiederherstellung und ein Papierkorb statt sofortigem Löschen.
 
 `kant-it.de` ist seit 12.09.2026 als Pilotwebsite bestimmt. Der öffentliche Bestand wurde erhoben (WordPress 7.1, Flatsome 3.20.9 mit eigenem Child-Theme, WPForms Lite, Complianz, Google-Rezensionen, eigenes Plugin `kant-nova-chat`) und die noch offene Arbeit daraus in `docs/AUSBAUPLAN.md` in elf Arbeitspakete aufgeschlüsselt. Erhoben wurde ausschließlich die öffentlich ausgelieferte Startseite; ohne Backendzugang sind Beitragsbestand, Formularkonfiguration, Benutzer und Flatsome-Shortcodes nicht inventarisierbar. Keine externe Veröffentlichung erfolgt.
 

public/assets/admin.css

@@ -87,3 +87,7 @@
 .rt-surface ul,.rt-surface ol{margin:0 0 8px;padding-left:20px}
 .rt-surface a{color:#a4510f}
 .rt-source{min-height:150px;border:0;border-radius:0;font-family:ui-monospace,monospace;font-size:12px;line-height:1.6}
+
+/* Own CSS and own script per element. */
+.own-code{font-family:ui-monospace,monospace;font-size:12px;line-height:1.6;min-height:110px}
+.own-code[readonly]{background:#f4f5f1;color:var(--muted)}

public/assets/editor.js

@@ -12,6 +12,7 @@ const $ = selector => document.querySelector(selector);
 // same document, draft and preview endpoints, so this file does not care which one it drives.
 const api = root.dataset.api;
 const editingArea = 'page' !== root.dataset.kind;
+const mayScript = 'true' === root.dataset.canScript;
 let history, selected = null, version, revisionId, publishedRevisionId, csrfToken;
 let busy = false, conflict = false, previewTimer, previewController, previewSequence = 0;
 let device = 'desktop', propertyPanel = 'content', designTokens, designSchema, designPanel, pendingPreset = null;
@@ -140,6 +141,7 @@ function renderProperties() {
     panel.append(note);
     return;
   }
+  if (block && propertyPanel === 'advanced') { renderAdvanced(block, panel); return; }
   if (block && propertyPanel === 'design') { renderDesign(block, panel); return; }
   const field = (label, key, value, options = {}) => {
     const id = `property-${key}`;
@@ -268,6 +270,47 @@ function renderProperties() {
   }
 }
 
+/**
+ * Own CSS and own script for one element.
+ *
+ * CSS is scoped to the element by the server, so it cannot reach the rest of the page; everyone
+ * with the editor role may use it. A script is arbitrary JavaScript on the published site, so it
+ * is shown read only unless the account is an administrator - and the server refuses a change
+ * either way, this is only the honest version of the same rule.
+ */
+function renderAdvanced(block, panel) {
+  const area = (labelText, key, value, help, rows) => {
+    const id = `own-${key}`;
+    const label = document.createElement('label'); label.htmlFor = id; label.textContent = labelText;
+    const input = document.createElement('textarea');
+    input.id = id; input.rows = rows; input.spellcheck = false; input.className = 'own-code';
+    input.value = value ?? '';
+    input.addEventListener('change', () => {
+      history.change(doc => {
+        upgradeDocument(doc, 13);
+        const current = locate(doc.blocks, block.id)?.block;
+        if (!current) return;
+        if ('' === input.value.trim()) delete current[key];
+        else current[key] = input.value;
+      });
+      changed();
+    });
+    const note = document.createElement('p'); note.className = 'field-help'; note.innerHTML = help;
+    panel.append(label, input, note);
+    return input;
+  };
+
+  area('Eigenes CSS', 'css', block.css, 'Eigenschaften für dieses Element, zum Beispiel <code>letter-spacing: 2px</code>. Verschachtelte Regeln beginnen mit <code>&amp;</code>, etwa <code>&amp;:hover { opacity: .8 }</code> oder <code>&amp; .block-text { font-size: 20px }</code>. Der Server setzt den Selektor selbst, sodass die Regeln dieses Element nicht verlassen können. @-Regeln und andere Selektoren sind nicht vorgesehen.', 7);
+
+  const scriptInput = area('Eigenes Skript', 'script', block.script, mayScript
+    ? '<strong>JavaScript auf der veröffentlichten Seite.</strong> Die Variable <code>element</code> zeigt auf dieses Element. Ausgeliefert wird es als eigene Datei, nicht inline, und in dieser Vorschau wird es nicht ausgeführt. Auf Seiten mit eigenem Skript erlaubt die Sicherheitsrichtlinie Skripte von dieser Website - überall sonst bleibt sie streng.'
+    : 'Eigenes Skript kann nur ein Administrator ändern, weil es Code im Browser jedes Besuchers ausführt. Der Inhalt ist hier nur zu sehen.', 7);
+  if (!mayScript) {
+    scriptInput.readOnly = true;
+    scriptInput.setAttribute('aria-describedby', 'own-script-locked');
+  }
+}
+
 function renderDesign(block, panel) {
   if (designSchema && designPanel) {
     designPanel(panel);

src/Content/CustomCode.php

@@ -0,0 +1,249 @@
+<?php
+
+namespace App\Content;
+
+use App\Domain\InvalidDocument;
+
+/**
+ * Own CSS and own script per element (document schema v13).
+ *
+ * The two are not comparable in what they can do, so they are not treated alike.
+ *
+ * **CSS** is parsed and written out again by this class, scoped to the block. A declaration list
+ * and nested rules starting with `&` are accepted; anything else is refused. Because the output is
+ * re-serialised, a stray `}` cannot escape the block, and `@import` or a `javascript:` URL never
+ * gets through. Everyone with the editor role may use it.
+ *
+ * **Script** is arbitrary JavaScript on the published site. There is no way to make that harmless:
+ * whoever may set it can run code in the browser of every visitor and every administrator. It is
+ * therefore reserved for administrators, checked on the way in by comparing against what is
+ * already stored, delivered as a separate file instead of inline, and never executed in the
+ * editor preview. The strict script policy stays in place on every page that carries none.
+ */
+final class CustomCode
+{
+    public const MAX_CSS = 4000;
+    public const MAX_SCRIPT = 8000;
+
+    public static function supports(mixed $schemaVersion): bool
+    {
+        return is_int($schemaVersion) && $schemaVersion >= 13;
+    }
+
+    /**
+     * Checks own CSS and returns it unchanged. Throws with a message meant for the editor.
+     *
+     * @throws InvalidDocument
+     */
+    public function checkCss(string $css): string
+    {
+        if (mb_strlen($css) > self::MAX_CSS) {
+            throw new InvalidDocument(sprintf('Eigenes CSS ist auf %d Zeichen begrenzt.', self::MAX_CSS));
+        }
+        // Parsing happens in compileCss; doing it here too makes a bad value fail on saving
+        // rather than silently disappearing when the page is rendered.
+        $this->parse($css);
+
+        return $css;
+    }
+
+    /** @throws InvalidDocument */
+    public function checkScript(string $script): string
+    {
+        if (mb_strlen($script) > self::MAX_SCRIPT) {
+            throw new InvalidDocument(sprintf('Eigenes Skript ist auf %d Zeichen begrenzt.', self::MAX_SCRIPT));
+        }
+        // The script is delivered as its own file, so a closing tag cannot end anything - but a
+        // value containing one is a sign of markup pasted into the wrong field.
+        if (false !== stripos($script, '</script')) {
+            throw new InvalidDocument('Eigenes Skript enthält keinen HTML-Code. Bitte nur JavaScript einsetzen.');
+        }
+
+        return $script;
+    }
+
+    /**
+     * Turns own CSS into rules scoped to one block.
+     *
+     * @return string CSS, safe by construction; empty when there is nothing to emit
+     */
+    public function compileCss(string $blockId, string $css): string
+    {
+        if (1 !== preg_match('/^[a-zA-Z0-9_-]{1,64}$/D', $blockId)) {
+            return '';
+        }
+        $out = '';
+        foreach ($this->parse($css) as $suffix => $declarations) {
+            if ('' === $declarations) {
+                continue;
+            }
+            // The selector is written here, never taken from the input.
+            $out .= sprintf('#%s%s{%s}', $blockId, $suffix, $declarations);
+        }
+
+        return $out;
+    }
+
+    /**
+     * Splits own CSS into the block's own declarations and its nested rules.
+     *
+     * @return array<string, string> suffix (''; ':hover'; ' .block-text') to declaration list
+     *
+     * @throws InvalidDocument
+     */
+    private function parse(string $css): array
+    {
+        $css = trim($css);
+        if ('' === $css) {
+            return [];
+        }
+        if (str_contains($css, '@')) {
+            throw new InvalidDocument('In eigenem CSS sind @-Regeln wie @import oder @media nicht vorgesehen. Für Gerätewerte gibt es die Vorschaugrößen im Designbereich.');
+        }
+        if (str_contains($css, '\\')) {
+            throw new InvalidDocument('In eigenem CSS sind Backslash-Escapes nicht vorgesehen.');
+        }
+        if (preg_match('/expression\s*\(/i', $css)) {
+            throw new InvalidDocument('In eigenem CSS ist expression() nicht vorgesehen.');
+        }
+        // A single slash is a local path; two are protocol relative and would load from a
+        // third party over whatever scheme the page happens to use.
+        if (preg_match('/url\s*\(\s*["\']?\s*(?!(?:\/(?!\/)|https:\/\/))/i', $css)) {
+            throw new InvalidDocument('In eigenem CSS sind nur Adressen erlaubt, die mit / oder https:// beginnen.');
+        }
+
+        $rules = ['' => ''];
+        $rest = $css;
+        // Nested rules first, so what remains is a plain declaration list.
+        while (preg_match('/&([^{}]{0,80})\{([^{}]{0,1000})\}/', $rest, $match, PREG_OFFSET_CAPTURE)) {
+            // Only the right side is trimmed: a leading space is the descendant combinator,
+            // so "& .block-text" must stay "#id .block-text" instead of becoming
+            // "#id.block-text", which would target the element itself.
+            $suffix = preg_replace('/\s+/', ' ', rtrim($match[1][0])) ?? '';
+            if (1 !== preg_match('/^[a-zA-Z0-9 ,.:>+~_\[\]="\'-]*$/D', $suffix)) {
+                throw new InvalidDocument(sprintf('„&%s“ ist als verschachtelter Selektor nicht erlaubt.', $suffix));
+            }
+            $rules[$suffix] = $this->declarations($match[2][0]);
+            $rest = substr_replace($rest, '', $match[0][1], strlen($match[0][0]));
+        }
+        if (str_contains($rest, '{') || str_contains($rest, '}')) {
+            throw new InvalidDocument('Eigenes CSS besteht aus Eigenschaften für dieses Element und aus verschachtelten Regeln, die mit & beginnen. Andere Selektoren sind nicht vorgesehen.');
+        }
+        $rules[''] = $this->declarations($rest);
+
+        return $rules;
+    }
+
+    /** @throws InvalidDocument */
+    private function declarations(string $block): string
+    {
+        $out = [];
+        foreach (explode(';', $block) as $declaration) {
+            $declaration = trim($declaration);
+            if ('' === $declaration) {
+                continue;
+            }
+            $parts = explode(':', $declaration, 2);
+            if (2 !== count($parts)) {
+                throw new InvalidDocument(sprintf('„%s“ ist keine CSS-Eigenschaft in der Form name: wert.', mb_substr($declaration, 0, 40)));
+            }
+            $property = strtolower(trim($parts[0]));
+            $value = trim($parts[1]);
+            if (1 !== preg_match('/^-{0,2}[a-z][a-z0-9-]{0,40}$/D', $property)) {
+                throw new InvalidDocument(sprintf('„%s“ ist kein CSS-Eigenschaftsname.', mb_substr($property, 0, 40)));
+            }
+            if ('' === $value || 1 !== preg_match('/^[a-zA-Z0-9 ,.%#()\/:_+*-]{1,300}$/D', $value)) {
+                throw new InvalidDocument(sprintf('Der Wert von „%s“ enthält Zeichen, die in eigenem CSS nicht vorgesehen sind.', $property));
+            }
+            $out[] = $property.':'.$value;
+        }
+
+        return implode(';', $out);
+    }
+
+    /** Every block's own CSS of a document, already scoped. */
+    public function compileDocument(array $document): string
+    {
+        if (!self::supports($document['schemaVersion'] ?? null)) {
+            return '';
+        }
+        $out = '';
+        $walk = function (array $blocks) use (&$walk, &$out): void {
+            foreach ($blocks as $block) {
+                if (is_string($block['css'] ?? null) && '' !== trim($block['css'])) {
+                    $out .= $this->compileCss((string) ($block['id'] ?? ''), $block['css']);
+                }
+                $walk($block['children'] ?? []);
+            }
+        };
+        $walk($document['blocks'] ?? []);
+
+        return $out;
+    }
+
+    /**
+     * Every block's own script, keyed by block ID.
+     *
+     * @return array<string, string>
+     */
+    public function scriptsOf(array $document): array
+    {
+        if (!self::supports($document['schemaVersion'] ?? null)) {
+            return [];
+        }
+        $scripts = [];
+        $walk = function (array $blocks) use (&$walk, &$scripts): void {
+            foreach ($blocks as $block) {
+                if (is_string($block['script'] ?? null) && '' !== trim($block['script']) && is_string($block['id'] ?? null)) {
+                    $scripts[$block['id']] = $block['script'];
+                }
+                $walk($block['children'] ?? []);
+            }
+        };
+        $walk($document['blocks'] ?? []);
+
+        return $scripts;
+    }
+
+    /**
+     * The script file for one document: each block's script in its own closure, with the element
+     * it belongs to already looked up. A failing script does not stop the others.
+     */
+    public function compileScript(array $document): string
+    {
+        $parts = [];
+        foreach ($this->scriptsOf($document) as $blockId => $script) {
+            if (1 !== preg_match('/^[a-zA-Z0-9_-]{1,64}$/D', $blockId)) {
+                continue;
+            }
+            $parts[] = sprintf(
+                "/* %s */\n(() => {\n  const element = document.getElementById(%s);\n  if (!element) return;\n  try {\n%s\n  } catch (error) {\n    console.error('Eigenes Skript von %s:', error);\n  }\n})();",
+                $blockId,
+                json_encode($blockId, JSON_THROW_ON_ERROR),
+                $script,
+                $blockId,
+            );
+        }
+
+        return [] === $parts ? '' : implode("\n", $parts)."\n";
+    }
+
+    /**
+     * Refuses a write that would add, change or remove a script without the administrator role.
+     *
+     * Checked by comparing with what is stored, so an editor can keep saving a page that already
+     * carries a script without being able to touch it.
+     *
+     * @throws InvalidDocument
+     */
+    public function assertScriptsUnchanged(array $incoming, array $stored): void
+    {
+        $before = $this->scriptsOf($stored);
+        $after = $this->scriptsOf($incoming);
+        ksort($before);
+        ksort($after);
+        if ($before !== $after) {
+            throw new InvalidDocument('Eigenes Skript darf nur von einem Administrator geändert werden. Die übrigen Änderungen wurden nicht gespeichert.');
+        }
+    }
+}

src/Content/DocumentValidator.php

@@ -6,7 +6,7 @@ use App\Domain\InvalidDocument;
 
 final class DocumentValidator
 {
-    public function __construct(private StyleCompiler $styles = new StyleCompiler())
+    public function __construct(private StyleCompiler $styles = new StyleCompiler(), private CustomCode $code = new CustomCode())
     {
     }
 
@@ -32,7 +32,7 @@ final class DocumentValidator
     public function validate(array $document, bool $requireHeading = true): void
     {
         $schemaVersion = $document['schemaVersion'] ?? null;
-        $this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], true), 'Unsupported document schema.');
+        $this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], true), 'Unsupported document schema.');
         $this->text($document['title'] ?? null, 160);
         $this->text($document['description'] ?? null, 320);
         $this->require(is_array($document['blocks'] ?? null) && array_is_list($document['blocks']), 'Blocks must be a list.');
@@ -65,6 +65,17 @@ final class DocumentValidator
         // else it would produce a details element without its group.
         $this->require('accordionitem' !== $type || 'accordion' === $parentType, 'An accordion entry belongs into an accordion.');
         $this->require('tabitem' !== $type || 'tabs' === $parentType, 'A tab belongs into a tab group.');
+        foreach (['css', 'script'] as $own) {
+            if (!isset($block[$own])) {
+                continue;
+            }
+            // Own code is checked when it is stored, so a bad value fails with a message instead
+            // of disappearing silently at render time. Who may set a script is a question of role
+            // and is answered in the controller, not here.
+            $this->require(CustomCode::supports($schemaVersion), 'Own code requires schema v13.');
+            $this->require(is_string($block[$own]), sprintf('"%s" must be text.', $own));
+            'css' === $own ? $this->code->checkCss($block[$own]) : $this->code->checkScript($block[$own]);
+        }
         if (isset($block['style'])) {
             // Free styling: any property of StyleSchema, per device, with an optional hover value.
             // The old token based layout.design keeps working unchanged next to it.

src/Content/PageRepository.php

@@ -369,6 +369,21 @@ final class PageRepository
         return $page;
     }
 
+    /** A published page by ID, used to serve its own script file. */
+    public function findPublishedById(string $id, string $locale = 'de'): ?array
+    {
+        $row = $this->db->fetchAssociative(
+            'SELECT p.id, p.path, r.document FROM page p JOIN revision r ON r.id = p.published_revision_id AND r.page_id = p.id WHERE p.id = ? AND p.locale = ? AND p.website_id = ? AND p.deleted_at IS NULL',
+            [$id, $locale, 'default'],
+        );
+        if (false === $row) {
+            return null;
+        }
+        $row['document'] = json_decode($row['document'], true, 512, JSON_THROW_ON_ERROR);
+
+        return $row;
+    }
+
     public function listForEditor(): array
     {
         return $this->db->fetchAllAssociative('SELECT p.id, p.slug, p.path, p.parent_id, p.type, p.locale, p.version, p.published_revision_id, p.draft_revision_id, p.excerpt, p.author, p.published_at, p.featured_media_id, p.robots, p.og_media_id, p.publish_at, r.document FROM page p LEFT JOIN revision r ON r.id = p.draft_revision_id AND r.page_id = p.id WHERE p.website_id = ? AND p.deleted_at IS NULL ORDER BY p.path', ['default']);

src/Controller/EditorController.php

@@ -2,6 +2,7 @@
 
 namespace App\Controller;
 
+use App\Content\CustomCode;
 use App\Content\DemoContent;
 use App\Content\DocumentValidator;
 use App\Content\MenuRepository;
@@ -25,7 +26,7 @@ use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;
 #[Route('/admin')]
 final class EditorController extends AbstractController
 {
-    public function __construct(private PageRepository $pages, private DocumentValidator $validator, private MenuRepository $menus, private PostRepository $posts, private Theme $theme, private StyleCompiler $styles, private RedirectRepository $redirects, private PartialRepository $partials, private CsrfTokenManagerInterface $csrf)
+    public function __construct(private PageRepository $pages, private DocumentValidator $validator, private MenuRepository $menus, private PostRepository $posts, private Theme $theme, private StyleCompiler $styles, private RedirectRepository $redirects, private PartialRepository $partials, private CustomCode $code, private CsrfTokenManagerInterface $csrf)
     {
     }
 
@@ -362,6 +363,9 @@ final class EditorController extends AbstractController
                 if (!is_array($body['document'] ?? null)) {
                     throw new \InvalidArgumentException();
                 }
+                if (!$this->isGranted('ROLE_ADMIN')) {
+                    $this->code->assertScriptsUnchanged($body['document'], $page['document']);
+                }
                 $page['draft_revision_id'] = $this->pages->saveDraft($id, $body['document'], $body['expectedVersion']);
                 $page['document'] = $body['document'];
             }

src/Controller/PageController.php

@@ -2,6 +2,7 @@
 
 namespace App\Controller;
 
+use App\Content\CustomCode;
 use App\Content\FormRepository;
 use App\Content\MenuRepository;
 use App\Content\PageRepository;
@@ -18,7 +19,7 @@ use Symfony\Component\Routing\Attribute\Route;
 
 final class PageController extends AbstractController
 {
-    public function __construct(private PageRepository $pages, private MenuRepository $menus, private PostRepository $posts, private FormRepository $forms, private RedirectRepository $redirects, private SiteSettings $settings, private PartialRepository $partials, private Theme $theme, private StyleCompiler $styles, private string $secret, private string $siteOrigin)
+    public function __construct(private PageRepository $pages, private MenuRepository $menus, private PostRepository $posts, private FormRepository $forms, private RedirectRepository $redirects, private SiteSettings $settings, private PartialRepository $partials, private CustomCode $code, private Theme $theme, private StyleCompiler $styles, private string $secret, private string $siteOrigin)
     {
     }
 
@@ -44,9 +45,9 @@ final class PageController extends AbstractController
             $theme = $this->theme->load();
             // Theme first, block styles after, so a block always wins over the site defaults.
             $sections = $this->sections($page['document'], $areas);
-            $styles = $this->theme->css($theme).$this->styles->compileDocument($page['document']);
+            $styles = $this->theme->css($theme).$this->styles->compileDocument($page['document']).$this->code->compileDocument($page['document']);
             foreach ([...array_values($areas), ...array_values($sections)] as $extra) {
-                $styles .= $this->styles->compileDocument($extra);
+                $styles .= $this->styles->compileDocument($extra).$this->code->compileDocument($extra);
             }
             $googleFonts = $this->theme->googleFontsUrl($theme);
         }
@@ -65,6 +66,9 @@ final class PageController extends AbstractController
                 'postLists' => $this->postLists($page['document']),
                 'postMeta' => 'post' === $page['type'] ? $this->posts->termsFor($page['id']) : null,
                 'needsTabs' => $this->hasType($page['document'], 'tabs'),
+                // Own scripts arrive as one file per page, never inline, so the policy can stay
+                // hash based and no page without a script loses its strict setting.
+                'pageScript' => [] === $this->code->scriptsOf($page['document']) ? null : '/assets/seite/'.$page['id'].'.js',
                 'forms' => $this->formStates($page, $request->query->getString('gesendet')),
                 'breadcrumbs' => $this->breadcrumbs($page),
                 'structuredData' => $this->structuredData($page),
@@ -75,7 +79,9 @@ final class PageController extends AbstractController
             ]);
         }
 
-        return $this->shell($response, null !== $page && $this->hasType($page['document'], 'tabs'), $styles, null !== $googleFonts);
+        $wantsScript = null !== $page && ($this->hasType($page['document'], 'tabs') || [] !== $this->code->scriptsOf($page['document']));
+
+        return $this->shell($response, $wantsScript, $styles, null !== $googleFonts);
     }
 
     /**
@@ -301,6 +307,28 @@ final class PageController extends AbstractController
         return $lists;
     }
 
+    /**
+     * The own scripts of one published page, as a single file.
+     *
+     * A file instead of inline markup, so the policy stays hash based and every page without a
+     * script keeps `script-src 'none'`. Only published content is served: a draft script must not
+     * run for a visitor.
+     */
+    #[Route('/assets/seite/{id}.js', name: 'page_script', requirements: ['id' => '[a-zA-Z0-9_-]{1,64}'], methods: ['GET'])]
+    public function pageScript(string $id): Response
+    {
+        $row = $this->pages->findPublishedById($id);
+        $script = null === $row ? '' : $this->code->compileScript($row['document']);
+        if ('' === $script) {
+            throw $this->createNotFoundException('Diese Seite hat kein eigenes Skript.');
+        }
+        $response = new Response($script, 200, ['Content-Type' => 'text/javascript; charset=UTF-8']);
+        $response->headers->set('X-Content-Type-Options', 'nosniff');
+        $response->headers->set('Cache-Control', 'no-store');
+
+        return $response;
+    }
+
     /**
      * The header and footer documents. Absent areas simply render nothing, so a site without a
      * header is a valid site rather than a broken one.

src/Controller/PartialController.php

@@ -2,6 +2,7 @@
 
 namespace App\Controller;
 
+use App\Content\CustomCode;
 use App\Content\DocumentValidator;
 use App\Content\MenuRepository;
 use App\Content\PartialRepository;
@@ -33,6 +34,7 @@ final class PartialController extends AbstractController
         private MenuRepository $menus,
         private Theme $theme,
         private StyleCompiler $styles,
+        private CustomCode $code,
         private CsrfTokenManagerInterface $csrf,
     ) {
     }
@@ -128,6 +130,9 @@ final class PartialController extends AbstractController
             if (!isset($body['expectedVersion']) || !is_int($body['expectedVersion'])) {
                 throw new \InvalidArgumentException();
             }
+            if (!$this->isGranted('ROLE_ADMIN')) {
+                $this->code->assertScriptsUnchanged($document, $partial['document']);
+            }
             $this->partials->save($id, $document, $body['expectedVersion']);
             $partial['document'] = $document;
             $partial['version'] = $body['expectedVersion'] + 1;

templates/admin/editor.html.twig

@@ -7,7 +7,7 @@
 {% block body %}
 {# The API base decides what is edited. An area is shared, so it has no draft and no
    publication: saving is live, and the publish button is left out. #}
-<div id="editor" data-api="{{ area ? '/admin/partials/' ~ area.id : '/admin/api/pages/' ~ page.id }}" data-kind="{{ area ? area.kind : 'page' }}" data-can-publish="{{ not area and is_granted('ROLE_PUBLISHER') ? 'true' : 'false' }}">
+<div id="editor" data-api="{{ area ? '/admin/partials/' ~ area.id : '/admin/api/pages/' ~ page.id }}" data-kind="{{ area ? area.kind : 'page' }}" data-can-script="{{ is_granted('ROLE_ADMIN') ? 'true' : 'false' }}" data-can-publish="{{ not area and is_granted('ROLE_PUBLISHER') ? 'true' : 'false' }}">
     <header class="editor-header">
         <a class="back-link" href="{{ area ? path('admin_partials') : path('admin_pages') }}" aria-label="{{ area ? 'Zur Bereichsübersicht' : 'Zur Seitenübersicht' }}">← <span>{{ area ? 'Bereiche' : 'Seiten' }}</span></a>
         <div class="editor-page-name"><h1>{{ subject.title }}</h1><span>{{ area ? kinds[area.kind]|default('Bereich') : '/' ~ (page.slug == 'home' ? '' : page.slug) }}</span></div>
@@ -37,7 +37,7 @@
             <nav id="breadcrumbs" class="breadcrumbs" aria-label="Ausgewähltes Element"></nav>
             <div class="canvas-scroll" tabindex="0" role="region" aria-label="Vorschau scrollen"><div id="preview-stage"><iframe id="preview" title="Vorschau der bearbeiteten Seite" sandbox="allow-same-origin" class="viewport-desktop"></iframe></div></div>
         </section>
-        <aside class="right-panel" aria-label="Eigenschaften"><div class="panel-section"><p class="eyebrow">FEINSCHLIFF</p><h2 id="properties-title">Seiteneinstellungen</h2><div class="property-tabs" role="group" aria-label="Eigenschaftenbereich"><button data-panel="content" aria-pressed="true">Inhalt</button><button data-panel="design" aria-pressed="false">Design</button></div><div id="properties"><p class="muted">Inhalte werden geladen …</p></div></div><div class="panel-note">Die Vorschau zeigt deinen Entwurf. Besucher sehen weiterhin den veröffentlichten Stand.</div></aside>
+        <aside class="right-panel" aria-label="Eigenschaften"><div class="panel-section"><p class="eyebrow">FEINSCHLIFF</p><h2 id="properties-title">Seiteneinstellungen</h2><div class="property-tabs" role="group" aria-label="Eigenschaftenbereich"><button data-panel="content" aria-pressed="true">Inhalt</button><button data-panel="design" aria-pressed="false">Design</button><button data-panel="advanced" aria-pressed="false">Erweitert</button></div><div id="properties"><p class="muted">Inhalte werden geladen …</p></div></div><div class="panel-note">Die Vorschau zeigt deinen Entwurf. Besucher sehen weiterhin den veröffentlichten Stand.</div></aside>
     </main>
     <noscript><p class="notice error">Zum Bearbeiten muss JavaScript aktiviert sein. Die öffentliche Website funktioniert ohne JavaScript.</p></noscript>
     <dialog id="publish-dialog" aria-labelledby="publish-title"><h2 id="publish-title">Seite veröffentlichen?</h2><p>Der gespeicherte Entwurf ersetzt den bisher sichtbaren Inhalt dieser Seite.</p><div class="dialog-actions"><button id="cancel-publish" class="secondary">Abbrechen</button><button id="confirm-publish" class="primary">Jetzt veröffentlichen</button></div></dialog>

templates/page.html.twig

@@ -19,6 +19,9 @@
     {% if page.document.schemaVersion >= 2 %}<link rel="stylesheet" href="/assets/design.css">{% endif %}
     {% if page.document.schemaVersion >= 3 %}<link rel="stylesheet" href="/assets/enhancements.css">{% endif %}
     {% if needsTabs|default(false) %}<script src="/assets/tabs.js" defer></script>{% endif %}
+    {# Own scripts of this page, as a file. Never rendered in the editor preview: the preview must
+       show the layout, not run code that could change the page under the editor's hands. #}
+    {% if pageScript|default(null) and not editing|default(false) %}<script src="{{ pageScript }}" defer></script>{% endif %}
     {# A data block, not a script: CSP script-src does not apply to application/ld+json. #}
     {% for block in structuredData|default([]) %}<script type="application/ld+json">{{ block|json_encode(constant('JSON_UNESCAPED_SLASHES') b-or constant('JSON_UNESCAPED_UNICODE'))|raw }}</script>
     {% endfor %}

tests/CmsTest.php

@@ -2,6 +2,7 @@
 
 namespace App\Tests;
 
+use App\Content\CustomCode;
 use App\Content\DemoContent;
 use App\Content\DocumentValidator;
 use App\Content\MediaLibrary;
@@ -1648,6 +1649,144 @@ final class CmsTest extends TestCase
         $this->pages->saveDraft('page-1', $document, 0);
     }
 
+    /**
+     * @return iterable<string, array{string, string}>
+     */
+    public static function ownCssCases(): iterable
+    {
+        yield 'declarations' => ['color: red; padding: 12px', '#b1{color:red;padding:12px}'];
+        yield 'nested state' => ['&:hover { color: #000 }', '#b1:hover{color:#000}'];
+        yield 'descendant keeps its space' => ['& .block-text { font-size: 20px }', '#b1 .block-text{font-size:20px}'];
+        yield 'child combinator' => ['& > p { margin: 0 }', '#b1 > p{margin:0}'];
+        yield 'local image' => ['background: url(/bild.png)', '#b1{background:url(/bild.png)}'];
+    }
+
+    #[DataProvider('ownCssCases')]
+    public function testOwnCssIsScopedToItsElement(string $css, string $expected): void
+    {
+        self::assertSame($expected, (new CustomCode())->compileCss('b1', $css));
+    }
+
+    /**
+     * @return iterable<string, array{string}>
+     */
+    public static function refusedOwnCss(): iterable
+    {
+        yield 'escaping the block' => ['color:red} body{display:none'];
+        yield 'foreign selector' => ['body { color: red }'];
+        yield 'at rule' => ['@import url(https://evil.example/x.css)'];
+        yield 'media query' => ['@media (max-width: 100px) { color: red }'];
+        yield 'javascript url' => ['background: url(javascript:alert(1))'];
+        yield 'protocol relative url' => ['background: url(//evil.example/x.png)'];
+        yield 'backslash escape' => ['content: "\\65"'];
+        yield 'old expression syntax' => ['color: expression(alert(1))'];
+        yield 'no value' => ['color'];
+        yield 'nonsense property' => ['co lor: red'];
+    }
+
+    #[DataProvider('refusedOwnCss')]
+    public function testRefusedOwnCssNeverReachesADocument(string $css): void
+    {
+        $document = DemoContent::starter('Mit CSS');
+        $document['schemaVersion'] = 13;
+        $document['blocks'][0]['css'] = $css;
+        try {
+            $this->pages->saveDraft('page-1', $document, 0);
+            self::fail(sprintf('Expected "%s" to be refused.', $css));
+        } catch (InvalidDocument) {
+        }
+        self::assertSame(0, (int) $this->db->fetchOne('SELECT COUNT(*) FROM revision WHERE page_id = ?', ['page-1']));
+    }
+
+    public function testOwnCssReachesThePageStylesheetAndOwnScriptItsOwnFile(): void
+    {
+        $document = DemoContent::starter('Mit eigenem Code');
+        $document['schemaVersion'] = 13;
+        $document['blocks'][0]['css'] = 'letter-spacing: 2px; &:hover { opacity: 0.8 }';
+        $document['blocks'][0]['script'] = "element.dataset.ready = 'yes';";
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+
+        $response = $this->request('/');
+        $html = $response->getContent();
+        self::assertStringContainsString('#start-hero{letter-spacing:2px}', $html);
+        self::assertStringContainsString('#start-hero:hover{opacity:0.8}', $html);
+
+        // The script is a file, never inline, and the policy opens only for this origin.
+        self::assertStringContainsString('<script src="/assets/seite/page-1.js" defer></script>', $html);
+        self::assertStringNotContainsString('element.dataset.ready', $html);
+        self::assertStringContainsString("script-src 'self'", (string) $response->headers->get('Content-Security-Policy'));
+
+        $script = $this->request('/assets/seite/page-1.js');
+        self::assertSame(200, $script->getStatusCode());
+        self::assertStringContainsString('text/javascript', (string) $script->headers->get('Content-Type'));
+        // Each script runs in its own closure with its element already looked up.
+        self::assertStringContainsString('document.getElementById("start-hero")', $script->getContent());
+        self::assertStringContainsString("element.dataset.ready = 'yes';", $script->getContent());
+
+        // A page without own script keeps the strict policy and loads no file.
+        $plain = $this->publishedPage('ohne-code', 'Ohne Code');
+        self::assertNotNull($this->pages->findForEditor($plain));
+        $other = $this->request('/ohne-code');
+        self::assertStringNotContainsString('/assets/seite/', $other->getContent());
+        self::assertStringContainsString("script-src 'none'", (string) $other->headers->get('Content-Security-Policy'));
+        self::assertSame(404, $this->request('/assets/seite/'.$plain.'.js')->getStatusCode());
+    }
+
+    public function testADraftScriptIsNotServedToVisitors(): void
+    {
+        $document = DemoContent::starter('Nur Entwurf');
+        $document['schemaVersion'] = 13;
+        $document['blocks'][0]['script'] = "element.dataset.draft = 'yes';";
+        $this->pages->saveDraft('page-1', $document, 0);
+
+        // Saved but not published, so the script file must not exist yet.
+        self::assertSame(404, $this->request('/assets/seite/page-1.js')->getStatusCode());
+    }
+
+    public function testOwnCodeNeedsSchemaThirteen(): void
+    {
+        $document = DemoContent::starter('Zu alt');
+        $document['schemaVersion'] = 12;
+        $document['blocks'][0]['css'] = 'color: red';
+        $this->expectException(InvalidDocument::class);
+        $this->pages->saveDraft('page-1', $document, 0);
+    }
+
+    public function testScriptChangesAreComparedAgainstWhatIsStored(): void
+    {
+        $code = new CustomCode();
+        $stored = DemoContent::starter('Mit Skript');
+        $stored['schemaVersion'] = 13;
+        $stored['blocks'][0]['script'] = "element.dataset.a = '1';";
+
+        // Same scripts: an editor may keep saving the page.
+        $unchanged = $stored;
+        $unchanged['title'] = 'Anderer Titel';
+        $code->assertScriptsUnchanged($unchanged, $stored);
+
+        foreach (['changed' => "element.dataset.a = '2';", 'removed' => null] as $case => $script) {
+            $attempt = $stored;
+            if (null === $script) {
+                unset($attempt['blocks'][0]['script']);
+            } else {
+                $attempt['blocks'][0]['script'] = $script;
+            }
+            try {
+                $code->assertScriptsUnchanged($attempt, $stored);
+                self::fail(sprintf('Expected a %s script to be refused.', $case));
+            } catch (InvalidDocument) {
+            }
+        }
+
+        // And adding one to a page that had none is refused as well.
+        $added = DemoContent::starter('Neu');
+        $added['schemaVersion'] = 13;
+        $before = $added;
+        $added['blocks'][0]['script'] = 'alert(1)';
+        $this->expectException(InvalidDocument::class);
+        $code->assertScriptsUnchanged($added, $before);
+    }
+
     private function request(string $url, string $method = 'GET'): Response
     {
         $previous = [];