csrf令牌问题与多个模板 [英] csrf token issue with multiple templates

问题描述

我有一个模板（index.html，它扩展了base.html），其中包含一个带有csrf_token的表单，这很好。我使用JS / Ajax将数据发送到我的视图。所以没问题。

问题是，如果我复制/粘贴我的表单到另一个模板（例如：new.html这也扩展了base.html）我得到：CSRF令牌丢失或不正确的错误。 （控制台中的HTTP 403错误）

这两个模板使用相同的JS函数。这两个模板中的表单完全一样。

有什么建议吗？

index.html和new.html）：

 < form method =postaction =。 ENCTYPE = 多部分/格式数据 > 
 {％csrf_token％} 
 < i class =fa fa-heart-o>< / i> 
< / a> 
< / form> 
  

这里是JS / Ajax函数：

函数Favorite（item）{
 song_id = item.getAttribute（data），
 $ .ajax（{
 type：POST， 
 datatype：json，
 url：/ fav /，
 data：{
'csrfmiddlewaretoken'：$（'input [name = csrfmiddlewaretoken]'）.val （），
 song_id：song_id 
}，
}）; 
 return false 
  

顺便说一下，index.html中的表单位于div中。在new.html中，表单位于表格中。不知道它是否有帮助。

解决方案

 函数getCookie（name）{
 var cookieValue = null; 
 if（document.cookie& document.cookie！=''）{
 var cookies = document.cookie.split（';'）; 
 for（var i = 0; i< cookies.length; i ++）{
 var cookie = jQuery.trim（cookies [i]）; 
 //这个cookie字符串是否以我们想要的名字开头？ 
 if（cookie.substring（0，name.length + 1）==（name +'='））{
 cookieValue = decodeURIComponent（cookie.substring（name.length + 1））; 
休息; 
} 
} 
} 
返回cookieValue; 
 
 
函数收藏夹（item）{
 song_id = item.getAttribute（data-mp3），
 csrftoken = getCookie（'csrftoken'）; 
 $ .ajax（{
 type：POST，
 datatype：json，
 url：/ fav /，
 data：{
 song_id：song_id 
}，
 headers：{
'X-CSRFToken'：csrftoken 
} 
}）; 
返回false; 
} 
  

I've got a template (index.html. It extends base.html) containing a form with a csrf_token wich works good. I use JS/Ajax to send data to my view. So no problem with that.

The issue is that if i copy/paste my form to another template (for example : new.html wich also extends base.html) i get : CSRF token missing or incorrect error. (HTTP 403 error in console)

Both templates use same JS function. The forms are exactly the same in both templates.

Any suggestion please?

Here the form (same in index.html and new.html) :

<form method="post" action="." enctype="multipart/form-data">
{% csrf_token %}
    <a href="#" class="heart pull-right" onclick="return Favorite(this)" data="foobar">
        <i class="fa fa-heart-o"></i>
    </a>
</form>

Here the JS/Ajax function :

function Favorite(item) {
    song_id = item.getAttribute("data"),
    $.ajax({
        type : "POST",
        datatype: "json",
        url: "/fav/",
        data: {
            'csrfmiddlewaretoken' : $('input[name=csrfmiddlewaretoken]').val(),
            song_id : song_id
        },
    });
    return false

By the way, the form in index.html is in a div. In new.html the form is in a table. Don't know if it helps.

解决方案

I finally made it work (based on django doc and doniyor comments)

function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var 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;
}

function Favorite(item) {
  song_id = item.getAttribute("data-mp3"),
  csrftoken = getCookie('csrftoken');
  $.ajax({
    type : "POST",
    datatype: "json",
    url: "/fav/",
    data: {
      song_id : song_id
    },
    headers: {
      'X-CSRFToken': csrftoken
    }
  });
  return false;
}

这篇关于csrf令牌问题与多个模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！