✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

Senden von sicheren Ajax-Anfragen in WordPress (mit Nonces)

21

Ich weiß, dass die REST-API derzeit ein großes Gesprächsthema in WordPress ist, und das zu Recht, aber es gibt immer noch Zeiten, in denen wir  aus verschiedenen Gründen Admin-Ajax (wie es bekannt wird) verwenden müssen.

  • Vielleicht ist es eine Anwendung,
  • Vielleicht reicht die Zeit nicht aus, um die erforderlichen Endpunkte zu erstellen,
  • Vielleicht fühlen Sie sich mit admin-ajax wohler,
  • Usw.

Unabhängig von Ihren Gründen, warum Sie es verwenden (was ich immer noch tue, für was auch immer das Arbeit ist), denke ich, dass es wichtig ist sicherzustellen, dass wir sichere Ajax-Anfragen in WordPress mit Nonces senden, so wie Sie es tun würden, wenn Sie herkömmliche Formulardaten übermitteln würden .

Legitime Live-Aufnahme von Kabeln mit Ihrer Ajax-Anfrage.

Wenn Sie das Internet nach Ergebnissen dazu durchsuchen, werden Sie eine Vielzahl von Antworten finden, und dies wird nur ein weiterer Tropfen auf den heißen Stein sein.

Aber wenn Sie neugierig auf ein Rezept sind, wie man damit umgeht, so mache ich es jedes Mal.

Sichere Ajax-Anfragen in WordPress

Der Prozess zum Senden sicherer Ajax-Anfragen für WordPress folgt diesem Verfahren:

  1. Stellen Sie Ihre JavaScript-Datei in die Warteschlange und verwenden Sie wp_localize_script ,
  2. Stellen Sie sicher, dass Ihr JavaScript die Sicherheitsnonce sendet,
  3. Überprüfen Sie den Sicherheitswert in Ihrem Rückruf und behandeln Sie ihn entsprechend.

Nachdem dies gesagt ist, hier sind ein paar Kernpunkte für jeden der oben genannten Punkte, die Sie hoffentlich dazu bringen werden, sichereren Ajax-basierten Code zu schreiben.

1 Fügen Sie JavaScript in die Warteschlange ein, lokalisieren Sie Ihr Skript

Ich weiß, dass dies ein seltsamer erster Schritt zu sein scheint, wenn man bedenkt, dass Sie es schreiben sollten, bevor Sie es in die Warteschlange einreihen. Und das sollten Sie natürlich. Aber für diesen Beitrag wollte ich den notwendigen Code zeigen, bevor ich in die Details gehe.

Es gibt einige Möglichkeiten, wie sich Leute dafür entscheiden, admin-ajax.php in die Warteschlange einzureihen, aber dies ist der Prozess, dem ich folge, um sowohl meine Datei in die Warteschlange einzureihen als auch admin-ajax.php hinzuzufügen:

Beachten Sie im obigen Code, dass der Aufruf von wp_enqueue_script genau so aussieht, wie Sie es erwarten würden.

Aber wp_localize_script ist ein wenig anders. Hier ist, was es tut:

  1. Es folgt der Aufruf zum Enqueue-Skript (und die Reihenfolge ist wichtig),
  2. es verwendet dieselbe Kennung, nämlich acme-security ,
  3. Es definiert ein Objekt namens acme_ajax_object, das wir in unserem JavaScript-Code  verwenden können, und definiert zwei Eigenschaften.
  4. Die  Eigenschaft ajax_url verwaltet den Pfad zu admin-ajax.php.
  5. Die Sicherheitseigenschaft verwaltet einen Wert, der von wp_create_nonce zurückgegeben wird .

Wie nutzen wir all dies im Kontext unseres JavaScripts?

2 Verwendung dieser Informationen in JavaScript

Zuerst müssen wir bei einem Ajax-Aufruf sicherstellen, dass wir die  Eigenschaft ajax_url des Objekts verwenden, das wir im obigen Code definiert haben. Das heißt, die URL der Anforderung sollte an acme_ajax_object.ajax_url gesendet werden .

Anschließend definieren Sie die Funktion, die Sie aufrufen möchten. In diesem Fall ist es get_custom_date, das wir uns gleich ansehen werden.

Aber der wichtigste Teil kommt als nächstes: Wir stellen dann sicher, dass wir einen Sicherheitswert senden, der von der Sicherheitseigenschaft von acme_ajax_object verwaltet wird.

$.get( acme_ajax_object.ajax_url, { action: 'get_custom_data', security: acme_ajax_object.security }, function( response) { if (undefined !== response.success && false === response.success) { return; } // Parse your response here. });

Beachten Sie, dass wir in der Antwortfunktion prüfen, ob die Antwort richtig erfolgreich ist, sie entsprechend handhaben und dann mit unserem Code fortfahren.

Wie sieht also der serverseitige Code dafür aus?

3 Überprüfung der Sicherheit

Als Nächstes müssen wir in Ihrer Callback-Funktion (die wir get_custom_data passend benannt haben) zuerst den Sicherheitswert überprüfen, bevor wir irgendetwas anderes tun.

Wenn der Wert besteht, können wir loslegen; andernfalls müssen wir einen Fehler senden.

Beachten Sie, dass wir beim Aufrufen von check_ajax_referer den Schlüssel des in wp_create_nonce definierten Werts und den Namen der Eigenschaft des Objekts verwenden, das wir im ersten Schritt definiert haben.

Wenn es nicht auscheckt, senden wir einen JSON-Fehler, den wir im JavaScript lesen können, wie wir oben gesehen haben. Dies sollte immer der erste Schritt vor der eigentlichen Arbeit sein.

Wenn alles passt, können wir loslegen.

Ist das wirklich sicher?

Das ist die unvermeidliche Frage, nicht wahr? Um fair zu sein, möchte ich nicht versprechen, dass dies absolut narrensicher ist, da ich kein Sicherheitsexperte bin.

Aber einen Nonce-Wert zu haben, der die integrierten Sicherheitsfunktionen von WordPress nutzt, ist besser, als Daten blind zu senden, ohne die Quelle der gesendeten Daten zu überprüfen.

Natürlich müssen Sie die Daten auch bereinigen, bevor Sie sie abfragen, verwenden, möglicherweise speichern und so weiter. Aber das ist der Inhalt für einen anderen Beitrag.

Dies bietet stattdessen ein Rezept, um sicherzustellen, dass Sie sichere Ajax-Anfragen in WordPress senden.

Aufnahmequelle: tommcfarlin.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen