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>

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 = [];