Nonce in WordPress und React: Sicherheitsleitfaden 2026
17. August 2026
So sichern Sie WordPress REST API mit React und Nonces – inkl. Gutenberg, Beispiele und Tipps für deutsche Entwickler.
Was ist ein WordPress Nonce und warum React ihn braucht
Ein WordPress-Nonce (Number used Once) ist ein einmaliger Sicherheits-Token, der vor Cross-Site-Request-Forgery (CSRF) schützt. Wenn Sie React im Frontend oder im Gutenberg-Editor verwenden, laufen AJAX- und REST-Anfragen clientseitig. Der Server muss sicherstellen, dass diese Anfragen wirklich vom angemeldeten Benutzer stammen. Genau hier kommt der Nonce ins Spiel: Er wird mit `wp_create_nonce()` erzeugt und zusammen mit der Anfrage gesendet. Auf dem Server prüft `wp_verify_nonce()` die Gültigkeit. Für deutsche Entwickler ist das Thema Sicherheit besonders wichtig, da Fehler hier schnell zu Datenlecks führen können. Ein Nonce ist keine Authentifizierung, aber ein essenzieller Baustein im WordPress-Sicherheitsmodell. Ohne Nonce sind React-basierte Plugins angreifbar – etwa durch manipulierte Formulare oder bösartige Anfragen.
Nonce in der WordPress REST API korrekt verwenden
Die REST API ist das Herz moderner WordPress-Anwendungen. Um sie mit React zu nutzen, müssen Sie den Nonce im HTTP-Header übertragen. Der Standard ist der `X-WP-Nonce` Header mit dem Wert `wp_create_nonce('wp_rest')`. Diesen generieren Sie am besten per `wp_localize_script()` und binden ihn als globale Variable ein. Auf Serverseite verwenden Sie in Ihrem REST-Callback die Funktion `wp_verify_nonce()` oder nutzen die eingebaute `permission_callback`, angereichert mit `current_user_can()`. Wichtig: Der Nonce muss pro Benutzer und Session eindeutig sein. Für deutsche Produktionen empfiehlt es sich, zusätzlich die DSGVO zu beachten, etwa bei der Protokollierung von Requests. Nur so stellen Sie sicher, dass Ihre REST-Endpunkte nicht für Angriffe missbraucht werden können.
Gutenberg und React: Nonce mit `apiFetch` und `useSelect` einbinden
In Gutenberg wird die REST API häufig über das `@wordpress/api-fetch`-Modul angesprochen. Stellen Sie den Nonce über `wp_add_inline_script` oder `wp_localize_script` bereit. `apiFetch` verwendet dann automatisch den Nonce, wenn Sie das Skript mit der `wp_rest`-Politik laden. In React-Komponenten können Sie mit `useSelect` Daten direkt vom Store abrufen, ohne sich um den Nonce zu kümmern. Aber für eigene REST-Aufrufe, z.B. per `fetch`, müssen Sie den Header selbst setzen. Ein typischer Codebaustein: `fetch('/wp-json/my/v1/data', { headers: { 'X-WP-Nonce': nonce } })`. Achten Sie darauf, den Nonce nicht in der Komponente zu hardcoden, sondern zentral zu verwalten. So bleiben Ihre Gutenberg-Blöcke sicher und zukunftsfähig.
Praxisbeispiel: Eigene React-Komponente mit Nonce-Absicherung
Angenommen, Sie entwickeln ein React-Frontend für ein WordPress-Plugin. Sie registrieren eine REST-Route, die Daten aus einer benutzerdefinierten Tabelle liefert. In Ihrem PHP-Code rufen Sie `wp_localize_script('mein-script', 'MeinPlugin', array('nonce' => wp_create_nonce('wp_rest')))` auf. In React lesen Sie den Nonce mit `useEffect` und senden ihn als Header: `headers: { 'X-WP-Nonce': MeinPlugin.nonce }`. Auf der Serverseite prüfen Sie mit `wp_verify_nonce($request->get_header('X-WP-Nonce'), 'wp_rest')`. Wenn der Nonce ungültig ist, liefern Sie `WP_Error` zurück. Dieses Vorgehen funktioniert sowohl für Gutenberg als auch für klassische React-Apps. Egal ob München, Berlin oder Hamburg – die Prinzipien sind überall gleich. Vermeiden Sie es, den Nonce in einer öffentlich zugänglichen JS-Datei zu speichern.
Häufige Fehler und Best Practices bei WordPress Nonces
Viele Entwickler verwechseln Nonces mit Authentifizierung. Ein Nonce ist nur gegen CSRF, nicht gegen XSS. Stellen Sie immer auch `current_user_can()` Checks ein. Ein weiterer Fehler ist die Verwendung eines falschen Aktionsnamens: Der Nonce muss mit genau dem Namen erstellt und geprüft werden. Achten Sie auf Laufzeiten: Nonces sind in WordPress standardmäßig 12 bis 24 Stunden gültig. Bei React-Sessions kann das zu abgebrochenen Anfragen führen. Nutzen Sie dann den Heartbeat, um den Nonce zu aktualisieren. Best Practices: Sanitieren Sie alle Eingaben, verwenden Sie `wp_send_json` für Antworten und protokollieren Sie verdächtige Anfragen. Für deutsche Anwender ist auch die DSGVO relevant – speichern Sie keine personenbezogenen Daten ohne Notwendigkeit. Ein sauberes Nonce-Handling schützt Ihre Nutzer und Ihr Publisher-Geschäft.
FAQ
Ein Nonce (Number used Once) ist ein einmaliger Sicherheits-Token, der in WordPress vor Cross-Site-Request-Forgery (CSRF) schützt. Er wird über `wp_create_nonce()` erzeugt und per `wp_verify_nonce()` geprüft. In React-Anwendungen dient er dazu, AJAX- und REST-Anfragen als legitim zu kennzeichnen.