React WordPress Nonce-Beispiel: Ein vollständiger Leitfaden für UK-Entwickler
17. August 2026
Erfahren Sie, wie Sie WordPress-Nonces mit React im Jahr 2026 verwenden. Schritt-für-Schritt-Beispiel, Sicherheitstipps für die REST-API und häufige Stolperfallen erklärt.
Was ist ein WordPress-Nonce und warum braucht React ihn?
Ein WordPress-Nonce ist ein Sicherheitstoken, das die Herkunft einer Anfrage verifiziert. Es ist kein Zeitstempel, sondern ein Hash, der an deine Benutzersitzung und eine bestimmte Aktion gebunden ist. Wenn du ein React-Frontend erstellst, das mit der WordPress-REST-API kommuniziert, schützen Nonces vor Cross-Site-Request-Forgery-Angriffen (CSRF). Ohne ein gültiges Nonce lehnt die API zustandsverändernde Anfragen wie POST, PUT oder DELETE ab. Dies ist besonders wichtig für britische Entwickler, die Benutzerdaten gemäß DSGVO verarbeiten. Das Nonce stellt sicher, dass nur authentifizierte Benutzer aus deiner eigenen Anwendung sensible Aktionen ausführen können, und fügt deinem Headless-WordPress-Setup eine entscheidende Sicherheitsebene hinzu.
Einrichten des Nonce in PHP (wp_localize_script)
Um Ihrer React-App einen Nonce zu übergeben, verwenden Sie `wp_localize_script` in der `functions.php` Ihres Themes oder in einem eigenen Plugin. Registrieren und laden Sie zunächst Ihr React-Skript, dann erstellen Sie ein Array mit dem Nonce mithilfe von `wp_create_nonce('wp_rest')`. Diese Funktion erzeugt einen Nonce, der spezifisch für die REST-API ist. Das Array wird als globales JavaScript-Objekt übergeben, in der Regel mit dem Namen `wpReactSettings`. Zum Beispiel: `wp_localize_script('react-app', 'wpReactSettings', array('nonce' => wp_create_nonce('wp_rest')))`. Dadurch wird der Nonce über das `window`-Objekt verfügbar. Stellen Sie sicher, dass Sie das Skript nur auf Seiten laden, auf denen die React-Komponente verwendet wird, und prüfen Sie immer, ob der Benutzer angemeldet ist, wenn Sie eine Authentifizierung benötigen.
Zugriff auf den Nonce in React (mit Hooks)
Einmal lokalisiert, können Sie auf die Nonce in jeder React-Komponente zugreifen. Der einfachste Weg ist, sie aus dem globalen Objekt zu lesen, aber für eine bessere Wartbarkeit sollten Sie einen Custom Hook erstellen. Beispielsweise kann `useWordPressNonce()` `window.wpReactSettings?.nonce` zurückgeben. Dieser Hook zentralisiert den Zugriff und behandelt Fälle, in denen die Nonce möglicherweise fehlt. Rufen Sie in Ihrer Komponente den Hook auf und speichern Sie die Nonce in einer Variablen. Sie können sie dann an fetch-Aufrufe übergeben. Wenn Sie eine State-Management-Bibliothek wie Redux verwenden, können Sie die Nonce beim initialen Laden setzen. Denken Sie daran, dass die Nonce an den angemeldeten Benutzer gebunden ist – für Besucher ist sie daher `null`, es sei denn, Sie stellen eine separate Nonce für öffentliche Anfragen bereit.
Beispiel: Senden einer sicheren POST-Anfrage von React
Hier ist ein praktisches Beispiel. Angenommen, Sie haben ein Formular, das einen Kommentar sendet. Rufen Sie in Ihrer React-Komponente die Nonce ab und fügen Sie sie dann als 'X-WP-Nonce' in die Fetch-Header ein. Der Code sollte so aussehen: const nonce = useWordPressNonce(); fetch('/wp-json/wp/v2/comments', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': nonce }, body: JSON.stringify({ post: 1, content: 'Hello' }) }). Die WordPress-REST-API prüft diesen Header und gibt 403 zurück, wenn er ungültig ist. Dies funktioniert sowohl im Block-Editor als auch im Frontend. Verwenden Sie immer den vollständigen REST-Endpunkt und stellen Sie sicher, dass Ihre URL korrekt ist, insbesondere bei einer Installation in einem Unterverzeichnis. Testen Sie lokal mit den Browser-Entwicklertools, um zu überprüfen, ob die Nonce vorhanden ist.
Häufige Fehler und Sicherheits-Best-Practices für UK-Entwickler
Ein häufiger Fehler ist die Wiederverwendung einer Nonce für verschiedene Aktionen oder Seiten. Erstellen Sie immer eine Nonce für die jeweilige REST-Route und vermeiden Sie es, sie fest in Ihr JavaScript-Bundle zu kodieren. Denken Sie außerdem daran, dass Nonces nach 12 bis 24 Stunden ablaufen – implementieren Sie also eine Möglichkeit, sie zu erneuern. Für Entwickler in Großbritannien ist Datenschutz von größter Bedeutung. Protokollieren Sie die Nonce niemals und senden Sie sie nicht an Analyse-Dienste von Drittanbietern. Verwenden Sie HTTPS, um Man-in-the-Middle-Angriffe zu verhindern, und erwägen Sie bei besonders sensiblen Vorgängen eine zusätzliche Authentifizierung wie JWT. Eine Nonce ist kein Ersatz für die Benutzerautorisierung – prüfen Sie serverseitig immer die Berechtigungen. Aktualisieren Sie schließlich Ihren WordPress-Kern, um sicherzustellen, dass der Hashing-Algorithmus für Nonces sicher bleibt.
FAQ
Verwenden Sie im PHP-Code Ihres Themes oder Plugins wp_create_nonce('wp_rest') und übergeben Sie es mithilfe von wp_localize_script an Ihr React-Skript. Dadurch wird ein sicheres Token erstellt, das an den aktuellen Benutzer und die REST-API-Aktion gebunden ist und direkt in Ihren JavaScript-fetch-Aufrufen verwendet werden kann.