Aula 80 - Loja Online - Atualização Ajax CSRF Token

Antes de proseguir o projeto, personalizando o User Model Default Django, vamos fazer uma atualização no código que criamos na Aula 78 - Loja Online - Segurança e Organização dos Javascripts. Iremos refatorar e fazer uma atualização no código do csrf.ajax.js para a nova forma como o Django utiliza para anexar o CSRF token ao cabeçalho da request.

Antes

Anteriormente, o desenvolvedor precisava extrair manualmente o token do cookie e anexá-lo ao cabeçalho da solicitação AJAX, como fizemos anteriormente, ficando mais verboso, ou seja, maior e mais propenso a erros.

Agora

A nova forma de fazer isso é utilizando a função fetch(). A função fetch() é uma API do JavaScript moderna e padronizada que permite fazer solicitações de rede. Ela é compatível com a maioria dos navegadores modernos e é muito fácil de usar. Para anexar o CSRF token ao cabeçalho da solicitação AJAX, basta modificar o código o csrf.ajax.js ficando da seguinte forma: Obs. A parte em vermelho comentada, é o código antigo, a parte em azul, é como o código vai ficar, se quiser deletar a parte em vermelho, pode deletar sem problema.

django_ecommerce/e_commerce/static_local/js/csrf.ajax.js


// This is the old way to do form ajax csrf token in django
// $(document).ready(function(){
//     // using jQuery
//     function getCookie(name) {
//       let cookieValue = null;
//       if (document.cookie && document.cookie !== '') {
//         const cookies = document.cookie.split(';');
//         for (let i = 0; i < cookies.length; i++) {
//           const cookie = jQuery.trim(cookies[i]);
//           // Does this cookie string begin with the name we want?
//           if (cookie.substring(0, name.length + 1) === (name + '=')) {
//             cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
//             break;
//           }
//         }
//       }
//       return cookieValue;
//     }
//     const csrftoken = getCookie('csrftoken');
  
//     function csrfSafeMethod(method) {
//       // these HTTP methods do not require CSRF protection
//       return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
//     }
//     $.ajaxSetup({
//       beforeSend: function(xhr, settings) {
        
//         if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
//            console.log("Settings Type: " + settings.type)
//            console.log("CSRF TOKEN: " + csrftoken)
//            console.log("XHR: " + xhr.global)
//            xhr.setRequestHeader("X-CSRFToken", csrftoken);
//         }
//       }
//     });
//   })


// This is the new way to do form ajax csrf token in django - Using Fetch API
$(document).ready(function(){
  function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
      const cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  const csrftoken = getCookie('csrftoken');
  console.log("CSRF Token:", csrftoken);

  function sendData(url, data, method='POST') {
    console.log("URL:", url);

    return fetch(url, {
      method: method,
      headers: {
        'X-CSRFToken': csrftoken,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      credentials: 'same-origin',
      body: JSON.stringify(data)
    });
  }
  const url = window.location.pathname;
  sendData(url)
});

Observe que a função getCookie() continua sendo utilizada para obter o valor do cookie 'csrftoken', que é então passado como o valor do cabeçalho 'X-CSRFToken' na solicitação fetch(). Com essa atualização no código do csrf.ajax.js, o processo de anexar o CSRF token ao cabeçalho da request ficou mais fácil e menos propenso a erros. Veja nesses links da documentação oficial, como era na versão 1.8 do Django, e como é atualmente que ele lida com tokens CSFR em solicitações javascript na versão 4.1.

Aula 80 - Loja Online - Atualização Ajax CSRF Token