web-dev-qa-db-ja.com

jqueryとDjango CSRFトークン

2つのHTMLページがあります。

親ページと子ページ。子ページには、Ajaxメッセージを送信するために親ページでコードを実行する送信ボタンが含まれています。

$ .load（）メソッドを使用して子ページをロードし、ボタンをクリックすると$ .ajax .POSTメソッドが実行されます。このpostメソッドは、JSON文字列のみをPythonコードに渡します。

IE以外のブラウザでこれを実行すると、正常に動作します。ただし、このコードをIEで実行すると、Python/Django CSRFトークンに関するエラー。

I Think理由は、子ページがサーバーサイドコードが実行されている現在のページ自体の単なる更新であるためです。

これを機能させる方法を誰かが知っていますか？.

乾杯、

jquerypythondjangocsrf
22
TheMonkeyMan

[〜＃〜] post [〜＃〜]でcsrfトークンを渡していません。 dataで行ったことを試してください。つまり、csrfトークン（または独自のメソッド）をフェッチし、それを引数に渡します。

$.ajax({
    url : url,
    type: "POST",
    data : {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value},
    dataType : "json",
    success: function( data ){
        // do something
    }
});
34
Zain Khan

POST=リクエスト本文を送信する場合、代わりにcsrfトークンをリクエストヘッダーとして追加する方が簡単かもしれません。この方法は、リクエスト本文をトークン。AJAXドキュメントで提案されているように、ほとんどのDjangoリクエストはcsrfトークンをヘッダーとして送信します。

function startTest(testId) {
  var payload = JSON.stringify({
    test_id : testId
  });
  $.ajax({
    url: "/test-service/",
    method: "POST",
    headers: {'X-CSRFToken': '{{ csrf_token }}'},
    data: payload,
    dataType: "json"
  }).done(function(response) {
    console.log(response.id + " " + response.name);
  }).fail(function (error) {
      console.log(error);
  });
}
11
MichaelB

CSRFおよびAJAXの docs から：

CSRFトークンはDOMにも存在しますが、テンプレートにcsrf_tokenを使用して明示的に含まれている場合のみです。 Cookieには正規のトークンが含まれています。 CsrfViewMiddlewareは、DOM内のトークンよりもCookieを優先します。いずれにせよ、トークンがDOMに存在する場合はCookieが必ずあるため、Cookieを使用する必要があります！

例（ドキュメントからも）

// using jQuery
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;
}

var csrftoken = getCookie('csrftoken');

または、Cookieと対話する他の方法を使用することもできます。

8
Kevin