Wie wir die p5.js-Cartridge gebaut haben

Fremdes JavaScript auf der eigenen Origin ist ein Sicherheitsvorfall. So wurde ein Feature daraus: ein Container mit opaker Origin, ein Wrapper, der hundert Zeilen p5 multiplayerfähig macht, und die zwei Bugs, die nur ein echter zweiter Browser finden konnte.

Gegen die Quellen geprüft am 2026-08-30

Was es ist - und welche Regel es nicht gebrochen hat

Ein Sketch-XP ist die dritte Art von Dokument. Ein Level beschreibt eine Welt, die die Engine zeichnet; eine gerahmte Cartridge benennt ein Spiel, das die Plattform ohnehin mitbringt; ein Sketch trägt sein Spiel als Quelltext - p5.js-Dateien im JSON - und die Plattform führt Code aus, dem sie aus gutem Grund misstraut.

Die Ordnerregeln des Backends verweigern .js-Dateien rundheraus, und diese Weigerung war eine bewusste Entscheidung: ein Script, das von der Origin des Produkts ausgeliefert wird, ist gespeichertes XSS mit der Session des Lesers. Der Sketch eröffnet dieses Argument nicht neu. Die Quellen sind Strings in einem Dokument, nie Dateien auf der Platte; ausführbar werden sie nur in einem iframe mit opaker Origin - sandbox ohne allow-same-origin - und einer Content Policy von default-src none, gerade weit genug geöffnet für die Kunst der Plattform. Ein Sketch kann kein Cookie lesen, die Seite um sich herum nicht anfassen und nicht nach Hause telefonieren.

Was der Autor dafür bekommt, ist alles, was der Script-Sandbox der Engine bewusst fehlt: eine echte Canvas, requestAnimationFrame, WebGL, das ganze p5.

Der Bau, in der Reihenfolge, in der er geschah

Eine Verzweigung, keine eigene Route
Die Runtime stellt eine Frage, bevor irgendetwas anläuft: Ist dieses Dokument ein Sketch? Dann montiert sie den Container statt einer 3D-Szene. Weil das die ganze Integration ist, öffnet jede bestehende Oberfläche - der Laden, der Battle-Assistent, die Räume, die Editor-Vorschau - Sketches, ohne sich geändert zu haben. Die gerahmte Cartridge hat dieses Argument zuerst geführt; der Sketch hat es geerbt.
Achtung: Wenn eine neue Art von Ding eine eigene Route braucht, braucht sie auch eine eigene Liste, einen eigenen Picker und einen eigenen Share-Link. Eine Verzweigung am Ende der alten Route braucht nichts davon.
Der Wrapper ist die Spielhälfte
Ein Sketch wacht auf, und window.xp ist schon da: ein Roster mit join und leave, ein Avatar, der sich zehnmal pro Sekunde sendet und auf jedem anderen Bildschirm geglättet ankommt, eine Eingabeachse aus Pfeiltasten, WASD oder Thumbstick, benannte Tasten, die bei jedem Spieler als Trigger feuern, geteilte Objekte mit claim - die Ballregel - und der Flow des Dokuments, von der Plattform gefahren, mit einem Rundenstreifen über der Canvas.
Der Sinn dieser Oberfläche ist das, was ein Autor nie schreibt: Netcode. xp.avatar.x in draw() zu setzen ist die ganze Multiplayer-Bewegung. Ein Live-Scoreboard ist eine Zeile, weil der Avatar ein freies data-Objekt trägt, das mitsynchronisiert.
Validieren auf der vertrauten Seite der Membran
Der Container spricht mit der Plattform über postMessage und sonst nichts. Jede Nachricht nach außen läuft durch ein schmales Protokoll - Formen geprüft, Strings gekürzt, Payloads gedeckelt, Sendungen ratenbegrenzt - und all das auf der Seite der Plattform, denn die andere Seite ist der Code, der begrenzt wird. Ein gehackter Sketch kann über sein eigenes Spiel lügen; die Bandbreite des Raums und das Vertrauen der anderen kann er nicht ausgeben.
Achtung: Ratenbegrenzungen innerhalb der Sandbox sind Ratschläge. Dieselben Grenzen außerhalb sind Regeln.
Einen zweiten Browser Lügner sagen lassen
Alle Unit-Tests waren grün, und der erste echte Lauf mit zwei Browsern scheiterte an vier von sieben Prüfungen. Der Umschlag der Leitung trägt den Absender im Payload - so verwirft ein Client auch sein eigenes Echo - und die Stage schickte nackte Payloads: Ballansprüche kamen an, Avatare und Tastendrücke kamen von niemandem. Der Fix war ein Feld; ihn zu finden brauchte zwei tatsächlich angemeldete Browser in einem tatsächlichen Raum.
Dieselbe Probe fing den Code-Editor dabei, wie er Text drei Bildschirme unter dem Cursor bearbeitete, weil seine zwei gestapelten Ebenen lange Zeilen unterschiedlich umbrachen. Die Kur: gar nicht mehr umbrechen, wie jeder Code-Editor.
Achtung: Ein Protokolltest beweist, dass die Formen übereinstimmen. Erst ein zweiter Client beweist, dass es die Bedeutungen tun.
Dem Sketch die Kunst der Plattform geben
Die Content Policy des Containers erlaubt genau drei Asset-Verzeichnisse, also macht der Wrapper Loader daraus: Pack-Bilder als stabile Handles, mitgelieferte Sounds als Player, die ihre Takes durchwechseln, und Pack-Modelle durch einen kleinen glTF-Leser - Mesh, Transform, Grundfarbtextur -, denn p5 liest OBJ und STL, und die Packs liefern glTF. Der eigene Peep eines Spielers kann in einem Sketch stehen, texturiert, mit einem Aufruf.
Eine gemessene Überraschung ist es wert, aufgeschrieben zu werden: p5 2.x gibt aus seinen Loadern Promises zurück, wo 1.x Bilder zurückgab. Alles, was der Wrapper herausgibt, ist deshalb ein Handle - ready prüfen, image zeichnen -, damit kein Sketch je wissen muss, welches p5 darunter liegt.

Die Wörter im Code

sketch-Block: Das mitgetragene Projekt des Dokuments: Dateien, Entry, Stick, Timeline. Geparst und gedeckelt wie alles andere im Format.
Opake Origin: Als was ein sandboxed iframe ohne allow-same-origin läuft: eine Origin, die nichts matcht, nichts hält und nichts von Ihnen erreicht.
window.xp: Der Wrapper, in dem ein Sketch aufwacht - Roster, Avatar, Input, Objekte, Flow, Packs, Übersetzung.
Die Ballregel: Ein Schreiber pro geteiltem Objekt, alle anderen schauen zu; claim() übernimmt. Die elected-Stufe der Engine, in p5 gesprochen.
Die Stage: Die Plattformseite der Membran: Socket-Relay, Validierung, Ratengrenzen, der Flow-Treiber, die Touch-Steuerung.

Was wir uns am Anfang sagen würden

Containment ist ein Ort, keine Gewohnheit: alle Schichten in eine Datei, denn die Schicht, die ein Refactoring verliert, ist die, die man nicht mehr sah.
Der Wert des Wrappers bemisst sich in Netcode, den niemand schreibt. Muss ein Autor an Pakete denken, ist der Wrapper nicht fertig.
Grenzen dort durchsetzen, wo der begrenzte Code sie nicht erreicht.
Zwei echte Clients laufen lassen, bevor man irgendetwas glaubt. Zweimal.
In einem zweischichtigen Code-Editor nichts umbrechen. Beim Umbrechen lernen die Schichten, sich zu widersprechen.

Das Original lesen

Die p5-Referenz in den Creator-DocsDie ganze window.xp-Oberfläche, mit den Rezepten.
src/app/xp/_sketch im RepositoryContainer, Protokoll, Stage und Wrapper - die Header tragen diese Argumente vollständig.
Wie wir Boxing gebaut habenDer andere Weg, hier ein Spiel zu sein: ein vertrautes Paket mit fünf Interfaces statt fremder Quelltext im Container.

Das hier ist eine Landkarte, keine Rechts- oder Steuerberatung - und eine ehrliche darüber, wie sie entstanden ist: Der Deutschland-Guide stammt von jemandem, der den Weg gegangen ist; die meisten anderen Länder wurden mit KI aus den offiziellen Quellen erstellt und noch von niemandem abgelaufen, der es getan hat. Gesetze ändern sich. Jeder Guide trägt das Datum seiner letzten Prüfung und die Quellen zum Selbst-Nachlesen - und wer einen dieser Wege hinter sich hat: Genau diese Korrekturen wünscht sich das Handbuch.