Aula 80 – Loja Online – Atualização Ajax CSRF Token
Aula 80 – Loja Online – Atualização Ajax CSRF Token
Loja Online – Django
Pacote Programador Fullstack
Voltar para página principal do blog
Todas as aulas desse curso
Aula 79 Aula 81
Redes Sociais:
Meus links de afiliados:
Hostinger
Digital Ocean
One.com
Melhore seu NETWORKING
https://digitalinnovation.one/
Participe de comunidades de desenvolvedores:
Fiquem a vontade para me adicionar ao linkedin.
E também para me seguir no https://github.com/toticavalcanti.
Código final da aula:
https://github.com/toticavalcanti
Quer aprender python3 de graça e com certificado? Acesse então:
https://workover.com.br/python-codigo-fluente
Canais do YoutubeRemover imagem destacada
Toti
Backing Track / Play-Along
Código Fluente
Putz!
Vocal Techniques and Exercises
PIX para doações
PIX Nubank
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.
Como era:
https://docs.djangoproject.com/en/1.8/ref/csrf/
Como é agora:
https://docs.djangoproject.com/en/4.1/howto/csrf/
