【Django】X-CSRF-Tokenを設定してPOSTする方法

Djangoで作っているサイトに何もせずにPOSTしようとするとCSRFトークンエラーになります。

そんな時にCSRFトークンの設定をしてPOSTする方法をご紹介します。

色んな方法でPOSTできますが、一番汎用性が高くてニーズも多いであろうJavaScript（jQuery）を使った方法を紹介していきます。

※ 間違っているところなどありましたらご指摘くださいm(_ _)m

urls.pyの設定

この辺りはお好みに合わせて設定してください。

path('save_message/',save_message_view,name='save_message')

ここではメッセージを保存するビューを作ってみてます。

メッセージってなんやねんというツッコミは置いておきましょう。

GETと違ってPOSTはURLに渡したい値を書く必要がないのでurlの設定が非常にシンプルでいいですね。

その分、CSFRトークンの設定が必要なので値の投げ方が少し面倒です。

その煩わしさはこの記事を参考に解決できるはずです。

views.pyの設定

やりたいことに合わせて設定する部分なので何をするかは各自におまかせです。

POSTされた値の取り方のサンプルを載せておきます。

from django.http import HttpResponse, QueryDict
def save_message_view(rquest):
    data = QueryDict(request.body, encoding='utf-8')
    title = data.get('title')
    message = data.get('message')
    # do something
    return HttpResponse('save')

まずはQueryDictを使ってPOSTされた値を取り出します。この状態でPOSTされた全てのデータがdataに入ります。

get('key')で欲しい値を取り出します。

今回はmessageとtitleをキーにしてPOSTから値を投げようと思うので上記のように設定しています。

ビュー関数の前にこのように@require_POSTをつけることでPOST以外のアクセスを受け付けなくすることもできます。この辺はお好みです。

from django.views.decorators.http import require_POST
@require_POST
def save_message_view(request):

JavaScript(jQuery)を使ってCSRFを設定してPOSTする方法

ソースコードを眺めながらコメントを読んでもらうのが一番わかりやすいと思います。

// 1 jQueryをインポート
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > < /script>

// 2 csrfを取得、設定する関数
function getCookie(key) {
    var cookies = document.cookie.split(';');
    for (var _i = 0, cookies_1 = cookies; _i < cookies_1.length; _i++) {
        var cookie = cookies_1[_i];
        var cookiesArray = cookie.split('=');
        if (cookiesArray[0].trim() == key.trim()) {
            return cookiesArray[1]; // (key[0],value[1])
        }
    }
    return '';
}
function csrfSetting() {
    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
        }
    });
}

// 3 POST以外は受け付けないようにする関数
function csrfSafeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

// 4 POST先と送信したい値の設定
var post_url = 'http://0.0.0.0:8000/save_message/';
var data = {
    'title': 'Hello'
    'message': 'World',
};

// 5 csrfを設定する関数を実行して、POSTを実行
csrfSetting();
$.post(post_url, data);

こうやって見てみるとかなり簡単そうですね。念の為、もう少し説明を加えていきます。

1 のjQueryのインポートは設定していない方向けなので設定済みの方は削除してください。（jQueryのインポートより先に2〜5を書くと当然エラーが出るので注意）

2.3 の辺りがCSFRの設定なので重要ですが、関数になっているので特に考える必要はありません。（CSRFを取ってきてヘッダーに設定しています。）

4 は送信したい値を設定するところなのでやりたいことに合わせて設定してみてください。

5 はpostする前にcsrfSetting();を実行するだけです。

CSRFの設定ができればPSOTするのは何も難しくないですね。

クリックでイベントを発火させたい場合は5.をこんな感じで囲ってあげればOKです。

$('button').on('click', function () {
     csrfSetting();
     $.post(post_url, data);
    }
});

まとめ

1〜3までの設定は共通部分なので全体で読み込む場所に記述。
4と5を各ページの必要なところで設定。

この２を押さえていれば特にCSRFの設定を意識せずにPOSTができます。

POSTでお困りの方の参考になりますように(^o^)v

urls.pyの設定

views.pyの設定

JavaScript(jQuery)を使ってCSRFを設定してPOSTする方法

まとめ

コメントを残すコメントをキャンセル