Skicka säkra Ajax-förfrågningar i WordPress (med meddelanden)

Jag vet att REST API är ett stort samtalsämne i WordPress just nu, och det med rätta, men det finns fortfarande tillfällen då vi måste använda admin-ajax (som det kommer att bli känt) av en mängd olika anledningar.

• Kanske är det en applikation,
• Kanske tiden inte tillåter att skapa de nödvändiga slutpunkterna,
• Du kanske är mer bekväm med admin-ajax,
• Och så vidare.

Oavsett dina skäl till varför du använder det (vilket jag fortfarande gör, oavsett vad det är för arbete), tror jag att det är viktigt att se till att vi skickar säkra Ajax-förfrågningar i WordPress med hjälp av nonces precis som du skulle göra om du skickade in traditionell formulärdata .

Legitima, live-shot av ledningar som bär din Ajax-förfrågan.

Om du söker på webben efter resultat om hur du gör det kommer du att hitta en mängd olika svar, och det här blir bara ytterligare en droppe i den ökända hinken.

Men om du är nyfiken på ett recept på hur jag ska hantera det så gör jag så här varje gång.

Säkra Ajax-förfrågningar i WordPress

Processen för att skicka säkra Ajax-förfrågningar för WordPress följer denna upphandling:

1. ställ din JavaScript-fil i kö och använd wp_localize_script ,
2. se till att ditt JavaScript skickar säkerheten nonce,
3. kontrollera säkerhetsvärdet i ditt återuppringning och hantera det på rätt sätt.

Med det sagt, här är några huvudpunkter för var och en av ovanstående som förhoppningsvis kommer att leda dig att skriva säkrare Ajax-baserad kod.

1 Ställ JavaScript i kö, lokalisera ditt skript

Jag vet att detta verkar vara ett konstigt första steg med tanke på att du borde skriva det innan du ställer det i kö. Och det borde du förstås. Men för det här inlägget ville jag visa den nödvändiga koden innan jag hoppade in i detaljerna.

Det finns några sätt på vilka människor väljer att ställa admin-ajax.php i kö, men det här är den process som jag följer för både att köa min fil och lägga till admin-ajax.php:

Observera i koden ovan att anropet till wp_enqueue_script ser ut precis som du förväntar dig.

Men wp_localize_script är lite annorlunda. Så här gör den:

1. Det följer uppmaningen till enqueue script (och ordningen spelar roll),
2. den använder samma identifierare, nämligen acme-security ,
3. Den definierar ett objekt som vi kan använda i vår JavaScript-kod som heter acme_ajax_object och definierar två egenskaper.
4. Egenskapen ajax_url upprätthåller sökvägen till admin-ajax.php.
5. Security  – egenskapen bibehåller ett värde som returneras av wp_create_nonce.

Så hur utnyttjar vi allt detta inom ramen för vårt JavaScript?

2 Använda denna information i JavaScript

Först, när vi gör ett Ajax-anrop måste vi se till att vi använder  egenskapen ajax_url för objektet vi definierade i koden ovan. Det vill säga att begärans URL ska skickas till acme_ajax_object.ajax_url.

Du definierar sedan funktionen som du vill anropa. I det här fallet är det get_custom_date som vi kommer att undersöka om ett ögonblick.

Men den viktigaste delen kommer sedan: Vi ser sedan till att skicka ett säkerhetsvärde som upprätthålls av säkerhetsegenskapen acme_ajax_object.

$.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.

});

Observera att i svarsfunktionen kontrollerar vi att svaret har lyckats korrekt, hanterar det på rätt sätt och går sedan vidare med vår kod.

Så hur ser serversidans kod ut för detta?

3 Verifiera säkerheten

Därefter, i din återuppringningsfunktion (som vi på rätt sätt har kallat get_custom_data, måste vi först kontrollera säkerhetsvärdet innan vi gör något annat.

Om värdet går över är vi bra att gå; annars måste vi skicka ett felmeddelande.

Lägg märke till att när vi anropar check_ajax_referer använder vi nyckeln till värdet definierat i wp_create_nonce och namnet på egenskapen för objektet vi definierade i det första steget.

Om det inte checkar ut skickar vi ett JSON-fel som vi kan läsa i JavaScript som vi såg ovan. Detta bör alltid vara det första steget innan du utför verkligt arbete.

Om allt stämmer är vi redo.

Är detta verkligen säkert?

Detta är den oundvikliga frågan, eller hur? För att vara rättvis vill jag inte lova att detta är helt idiotsäkert eftersom jag inte är en säkerhetsexpert.

Men att ha ett nonce-värde som kommer att utnyttja WordPresss inbyggda säkerhetsfunktioner är bättre än att blint skicka data utan att kunna verifiera källan till det som skickas.

Naturligtvis måste du också sanera informationen innan du förhör den, använder den, eventuellt sparar den och så vidare. Men det är innehållet i ett annat inlägg.

Detta ger istället ett recept för att se till att du skickar säkra Ajax-förfrågningar i WordPress.