Enviando solicitações Ajax seguras no WordPress (com Nonces)

Eu sei que a API REST é um grande tópico de conversa no WordPress agora, e com razão, mas ainda há momentos em que temos que usar admin-ajax (como está ficando conhecido) por vários motivos.

• Talvez seja um aplicativo,
• Talvez o tempo não permita criar os endpoints necessários,
• Talvez você esteja mais confortável com admin-ajax,
• E assim por diante.

Independentemente das razões pelas quais você o usa (o que ainda faço, seja lá o que for que funcione), acho importante garantir que estamos enviando solicitações Ajax seguras no WordPress usando nonces, assim como faria se estivesse enviando dados de formulário tradicionais .

Imagem legítima e ao vivo de fios carregando sua solicitação Ajax.

Se você pesquisar na web por resultados sobre como fazer isso, encontrará uma variedade de respostas, e isso será apenas mais uma gota no balde proverbial.

Mas se você está curioso para uma receita de como lidar com isso, é assim que eu faço todas as vezes.

Solicitações seguras de Ajax no WordPress

O processo de envio de solicitações Ajax seguras para WordPress segue este procedimento:

1. enfileirar seu arquivo JavaScript e usar wp_localize_script ,
2. certifique-se de que seu JavaScript está enviando o nonce de segurança,
3. verifique o valor de segurança em seu retorno de chamada e trate-o adequadamente.

Com isso dito, aqui estão algumas essências para cada um dos itens acima que esperamos levar você a escrever um código baseado em Ajax mais seguro.

1 Enfileirar JavaScript, localizar seu script

Eu sei que isso parece um primeiro passo estranho, considerando que você deve escrevê-lo antes de enfileirar. E você deveria, claro. Mas para este post, eu queria mostrar o código necessário antes de entrar nos detalhes.

Existem algumas maneiras pelas quais as pessoas optam por enfileirar admin-ajax.php, mas este é o processo que sigo para enfileirar meu arquivo e adicionar admin-ajax.php:

Observe no código acima que a chamada para wp_enqueue_script é exatamente como você esperaria.

Mas wp_localize_script é um pouco diferente. Aqui está o que está fazendo:

1. Segue a chamada para o script de enfileiramento (e a ordem importa),
2. ele usa o mesmo identificador, ou seja, acme-security ,
3. Ele define um objeto que podemos usar em nosso código JavaScript chamado acme_ajax_object e define duas propriedades.
4. A  propriedade ajax_url mantém o caminho para admin-ajax.php.
5. A  propriedade security mantém um valor retornado por wp_create_nonce.

Então, como aproveitamos tudo isso dentro do contexto do nosso JavaScript?

2 Usando esta informação em JavaScript

Primeiro, ao fazer uma chamada Ajax, precisamos ter certeza de que estamos usando a  propriedade ajax_url do objeto que definimos no código acima. Ou seja, a URL da solicitação deve ser enviada para acme_ajax_object.ajax_url.

Em seguida, você define a função que deseja chamar. Nesse caso, é get_custom_date que analisaremos em um momento.

Mas a parte mais importante vem a seguir: nós nos certificamos de enviar um valor de segurança que é mantido pela propriedade security de 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.

});

Observe que, na função de resposta, verificamos se a resposta foi bem-sucedida, tratamos adequadamente e, em seguida, avançamos com nosso código.

Então, como é o código do lado do servidor para isso?

3 Verificando a segurança

Em seguida, em sua função de retorno de chamada (que chamamos apropriadamente de get_custom_data, precisamos primeiro verificar o valor de segurança antes de fazer qualquer outra coisa.

Se o valor passar, estamos prontos; caso contrário, precisamos enviar um erro.

Observe que quando chamamos check_ajax_referer, usamos a chave do valor definido em wp_create_nonce e o nome da propriedade do objeto que definimos na primeira etapa.

Caso não dê certo, enviamos um erro JSON que podemos ler no JavaScript como vimos acima. Este deve ser sempre o primeiro passo antes de fazer o trabalho real.

Se tudo der certo, estamos prontos.

Isso é realmente seguro?

Esta é a pergunta inevitável, não é? Para ser justo, não quero prometer que isso é completamente infalível porque não sou especialista em segurança.

Mas ter um valor nonce que alavancará as funções de segurança integradas do WordPress é melhor do que enviar dados cegamente sem nenhuma maneira de verificar a origem do que está sendo enviado.

Naturalmente, você também precisa higienizar os dados antes de interrogá-los, usá-los, salvá-los potencialmente e assim por diante. Mas esse é o conteúdo para outro post.

Isso, em vez disso, fornece uma receita para garantir que você esteja enviando solicitações Ajax seguras no WordPress.