Ein einziges dangerouslySetInnerHTML mit einem Beitragstext oder ein VITE_OPENAI_API_KEY im Bundle reicht aus, damit Angreifer Konten übernehmen oder dein API-Guthaben aufbrauchen können. Dieser Skill findet diese und acht weitere Fehler in React-Frontends vor der Veröffentlichung und erklärt dir, wie du sie jeweils behebst.

Dein Agent führt einen Scanner für deine JSX- und TSX-Komponenten, React-Code in .js- und .ts-Dateien, die .env-Dateien der Anwendung und deine Vite-, webpack- und Next.js-Konfiguration aus. Er überspringt Kommentare, unterscheidet feste Zeichenketten von Werten, verfolgt aus der URL gelesene Werte (useSearchParams, location.search, router.query) durch deine Variablen und erkennt übliche Schutzprüfungen (DOMPurify.sanitize, Prüfung auf relative Pfade oder den Ursprung). Testdateien werden übersprungen. Die Anwendung wird weder gebaut noch ausgeführt. Er liefert BLOCK, REVIEW oder NOT FLAGGED mit Datei, Zeile, Begründung und einem sichereren Vorgehen. Geheimnisse werden niemals ausgegeben.

Was geprüft wird

BLOCK (vor der Auslieferung beheben)

• R01: dangerouslySetInnerHTML mit nicht bereinigtem HTML

• R02: Weiterleitungen auf einen aus der URL gelesenen Wert

• R03: Geheimnisse in VITE_-, REACT_APP_-, NEXT_PUBLIC_- oder EXPO_PUBLIC_-Variablen, geheime Stripe-Schlüssel oder KI-SDKs im Browser

• R04: eval() oder new Function() mit Werten

REVIEW (vor dem Release prüfen)

• R11: Tokens in localStorage oder sessionStorage

• R12: innerHTML, insertAdjacentHTML oder document.write mit Werten

• R13: postMessage an beliebige Ursprünge

• R14: message-Listener ohne Prüfung des Ursprungs

• R15: in Produktions-Builds veröffentlichte Source Maps

• R16: aus URL-Werten erzeugte Links und iframes

Das ist enthalten

• Der Scanner (Python 3.9+, ausschließlich Standardbibliothek)

• Ein Regelhandbuch mit Begründung und sichererem Vorgehen für jede Regel

• Eine unsichere und eine sichere React-Beispielanwendung sowie der tatsächliche Scannerbericht zur unsicheren Variante

Grenzen

Jede Datei wird einzeln analysiert: Zwischen Komponenten als Props übergebene Werte, Prüfungen in Hilfsfunktionen anderer Dateien, serverseitiger Code, npm-Abhängigkeiten und Content-Security-Policy-Header werden nicht geprüft. NOT FLAGGED ist keine Garantie.

Inhalt

Ein ZIP-Archiv mit 16 Dateien: SKILL.md, der Scanner in scripts/ (3 Python-Dateien), references/rules.md (jede Regel mit Begründung und sichererem Vorgehen) und examples/ (10 Beispieldateien plus report.md, die tatsächliche Scannerausgabe zum unsicheren Beispiel).

So verwendest du es: Dies ist ein Agenten-Skill: ein Ordner mit einer SKILL.md-Datei und Python-Skripten, die ein KI-Programmieragent wie Claude Code, Cursor oder Codex CLI ausführen kann. Entpacke ihn in den Skills-Ordner deines Agenten (für Claude Code: ~/.claude/skills/) und bitte deinen Agenten anschließend, dein Projekt zu prüfen. Die Skripte lassen sich auch eigenständig mit Python 3.9 oder neuer ausführen, ohne etwas zusätzlich zu installieren. Sie lesen lediglich deine Dateien: kein Netzwerkzugriff, und es werden keine Daten versendet.