如何在硬编码的表单帖子中包含 CSRF 令牌

Question

我有以下 AJAX 数据表：

$('#ittFileUploadTable').DataTable( {
    responsive: true,
    autowidth: false,
    destroy: true,
    deferRender: true,
    ajax: {
        url: '/project_page_ajax/',
        type: 'GET',
        data: {},
        dataSrc: ""
    },
    columns: [
        {"data": "fields.filename"},
        {"data": "fields.uploaded"},
        {"data": "fields.updated"},
        {"data": "fields.user"},
        {"data": "pk"},
    ],
    columnDefs: [
        { className: 'text-center', targets: [1] },
        {
            targets: [0],
            class: 'text-center',
            orderable: false,
            render: function (data, type, row) {
                var buttons = '<a href="/media/'+data+'" target="_blank">'+data+'</a>';
                return buttons;
            }
        },
        {
            targets: [-1],
            class: 'text-center',
            orderable: false,
            render: function (data, type, row) {
                var buttons = '<form method="post" action="delete_file/'+data+'/"><button type="submit" class="btn btn-danger"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-trash-fill" viewBox="0 0 16 16"><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/></svg></button></form>';
                return buttons;
            }
        },
    ],
    order: [
        [0, 'asc']
    ],
    "pagingType": "numbers",
    dom: 'rt'
});

render中的 function 基本上会在form中生成一个按钮。

该form向我的后端中的视图/delete_file/<int:pk>/发送一个POST请求，以删除所选文件。

问题是这种形式（ var buttons ）以字符串的形式硬编码，我不知道我可以通过哪种方式将{% csrf_token %}放入字符串中。

我尝试了文档中的getCookie function但这基本上给了我一个充满随机字符的字符串，如何以“硬编码”形式注入令牌？

我尝试过的（基于以前的 SO 问题/答案）：

Setting the header headers: {'X-CSRFToken': '{{ csrf_token }}'}, in the AJAX call and injecting the result of the getCookie('csrftoken') function call to the hardcoded form without success.

var csrftoken = getCookie('csrftoken');
//Project Header > ITT > Multiple File upload
$('#ittFileUploadTable').DataTable( {
    responsive: true,
    autowidth: false,
    destroy: true,
    deferRender: true,
    ajax: {
        url: '/project_page_ajax/',
        type: 'GET',
        headers: {'X-CSRFToken': '{{ csrf_token }}'},
        data: {},
        dataSrc: ""
    },
    columns: [
        {"data": "fields.filename"},
        {"data": "fields.uploaded"},
        {"data": "fields.updated"},
        {"data": "fields.user"},
        {"data": "pk"},
    ],
    columnDefs: [
        { className: 'text-center', targets: [1] },
        {
            targets: [0],
            class: 'text-center',
            orderable: false,
            render: function (data, type, row) {
                var buttons = '<a href="/media/'+data+'" target="_blank">'+data+'</a>';
                return buttons;
            }
        },
        {
            targets: [-1],
            class: 'text-center',
            orderable: false,
            render: function (data, type, row) {
                //var buttons = '<a href="#" class="btn btn-danger btn-xs"></a>';
                var buttons = '<form method="post" action="delete_file/'+data+'/"><button type="submit" class="btn btn-danger"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-trash-fill" viewBox="0 0 16 16"><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/></svg></button></form>';
                return buttons;
            }
        },
    ],
    order: [
        [0, 'asc']
    ],
    "pagingType": "numbers",
    dom: 'rt'
});

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 = cookies[i].trim();
            // 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;
}

我得到的错误：

Answer 1

要从 cookie 而不是隐藏的表单字段中获取 csrf-token，Django 需要首先设置 csrf-token cookie。 例如：

from django.utils.decorators import method_decorator
from django.views.decorators.csrf import ensure_csrf_cookie

class MyView(View):
    template_name = 'my_template.html'

    @method_decorator(ensure_csrf_cookie)
    def get(self, request, *args, **kwargs):
        return render(request, self.template_name)

    def post(self, request, *args, **kwargs):
        # and so on..
        pass

现在您可以使用浏览器工具确认有两个 cookies、一个 session cookie 和一个 csrf cookie。

这样就不需要在模板中包含{% csrf_token %}了。 虽然这是另一种方法。