堆栈内存溢出
  简体   繁体   English

将 {% csrf_token %} 添加到 javascript 插入

[英]Adding {% csrf_token %} to javascript insertion

 原文  2021-12-21 20:45:35  5   1    javascript/ django/ post/ insertion

问题描述

All,全部，

I have a popup that is inserted via javascript when a button is clicked:单击按钮时，我有一个通过 javascript 插入的弹出窗口：

function loadTypeManagement(existingDocTypes) {
const typeManagementModalDiv =
    '<div class="modal fade" id="typeManagementModalDiv" >' +
    '<div class="modal-dialog" style="max-width: none;">' +
    '<div class="modal-content feedback_popup" style="height:100%; margin-top: 0vh;">' +
    '<form class="feedback_form" autocomplete="off" action="/" method="post" id="taskitem_form">' +

    '<h1 id="djangoInsert">Type Management</h1><br>' +
    '<hr>' +
    '<div class="autocomplete container justify-content-center">' +
    '<h3 style="margin-bottom: .5vw;">Add a Document Type</h3>' +
    '<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
    '<div class="row">' +
    '<div class="col-3"></div>' +
    '<label class="col-6 admin_input_desc ">Document Type:</label>' +
    '<div class="col-3"></div>' +
    '</div>' +
    '<div class="row">' +
    '<div class="col-3"></div>' +
    '<input class=" text-center col-6 admin_input " id="addDoctypeId" type="text" name="addDocTypeName" placeholder="Document Type">' +
    '<div class="col-3"></div>' +
    '<div class="d-inline p-2 text-white ">' +
    '<p class="col-sm-4 admin_input_desc d-inline">Can this new type be an Authentication Source?</p>' +
    '<label class="">No</label>' +
    ' <input  type="radio" id="date_newToOld" name="choice" value="date_newToOld" checked/>' +
    '<label class="float-right " style="margin-left: 1.25vw;">Yes</label>' +
    ' <input  class="float-left" type="radio" id="date_newToOld" name="choice" value="date_newToOld" />' +
    '</div>' +
    '</div>' +
    '<input class="submit_button" name="submit" type="submit" value="Add Document Type">' +
    '</div>' +
    '</form>' +
    '<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
    '<hr>' +
    '<div class="autocomplete container justify-content-center">' +
    '<h3 style="margin-bottom: .5vw;">Remove a Document Type</h3>' +
    '<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
    '<div class="row">' +
    '<div class="col-3"></div>' +
    '<label class="col-6 admin_input_desc ">Document Type:</label>' +
    '<div class="col-3"></div>' +
    '</div>' +
    '<div class="row">' +
    '<div class="col-3"></div>' +
    '<tr>' +
    '<td  class=" text-center col-6 remove_doc_dropdown ">' +
    '<select  class=" text-center remove_doc_dropdown2 " id="m" >' +
    '<option id="-1" value="" selected disabled>Document Type</option>' +
    '</select>' +
    '</td>' +
    '</tr>' +
    '<div class="col-3"></div>' +
    '<div class="d-inline p-2 text-white ">' +
    '</div>' +
    '</div>' +
    '<input class="submit_button" type="submit" value="Remove Document Type">' +
    '</div>' +
    '<hr>' +
    '</form>' +
    '<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
    '<div class="autocomplete container justify-content-center">' +
    '<h3 style="margin-bottom: .5vw;">Change a Document Type</h3>' +
    '<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
    '<div class="row">' +
    '<div class="col-3"></div>' +
    '<label class="col-6 admin_input_desc ">Change Document Type:</label>' +
    '<div class="col-3"></div>' +
    '</div>' +
    '<div class="row">' +
    '<div class="col-3"></div>' +
    '<tr>' +
    '<td  class=" text-center col-6 remove_doc_dropdown ">' +
    '<select  class=" text-center remove_doc_dropdown2 " id="m2" >' +
    '<option id="-1" value="" selected disabled>Document Type</option>' +
    '</select>' +
    '</td>' +
    '</tr>' +
    '<div class="col-3"></div>' +
    '</div>' +
    '<div class="row">' +
    '<div class="col-3"></div>' +
    '<label class="col-6 admin_input_desc ">To Document Type:</label>' +
    '<div class="col-3"></div>' +
    '</div>' +
    '<div class="row">' +
    '<div class="col-3"></div>' +
    '<input class=" text-center col-6 admin_input " id="myInput" type="text" name="myCountry" placeholder="Document Type">' +
    '<div class="col-3"></div>' +
    '<div class="d-inline p-2 text-white ">' +
    '</div>' +
    '</div>' +
    '<div class="row">' +
    '<div class="col-4"></div>' +
    '<input class="col-4 submit_button" type="submit" value="Change Document Type">' +
    '<div class="col-4"></div>' +
    '<div class="d-inline p-2 text-white ">' +
    '</div>' +
    '</div>' +
    '<hr>' +
    '</form>' +
    '</div>' +
    '</div>' +
    '</div>';
const newDiv = document.createElement("div");
newDiv.innerHTML = typeManagementModalDiv;
var data = $('form').serialize()
document.body.appendChild(newDiv);

for (i = 0; i < existingDocTypes.length; i++) {
    var opt = document.createElement("option");
    document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
    document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
}

I am trying to submit the form and keep getting the error "CSRF token missing or incorrect."我正在尝试提交表单并不断收到错误消息“CSRF 令牌丢失或不正确”。 I've tried to insert it via string '{% csrf_token %}', but that just leaves the string value and Django doesn't pick up on it.我试图通过字符串'{% csrf_token %}' 插入它，但这只会留下字符串值，Django 不会接受它。

Any idea how I can do this?知道我该怎么做吗？ Is there a better way?有没有更好的办法？

1 个解决方案

解决方案1
 0  2021-12-21 22:05:18

I'm not completely sure if there are any security concerns using this method (please let me know if there are), but I was able to initiate the {{ csrftoken }} within the template using:我不完全确定使用此方法是否存在任何安全问题（如果有，请告诉我），但我能够使用以下方法在模板中启动 {{ csrftoken }}：

<script>
    var csrftoken = '{{ csrf_token }}';
</script>

and then passing that token value to the JS function like so:然后将该令牌值传递给 JS function，如下所示：

        <a onclick="loadTypeManagement({{ existingDocTypes }}, csrftoken);" id="feedbackButton" data-toggle="modal" data-target="#typeManagementModalDiv" class="hide_table_button underline_none" href="{% url 'admin:login' %}">Type Management</a>

Then, within the JS, I was able to add the line:然后，在 JS 中，我可以添加以下行：

'<input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">' +

which holds the token value.它保存令牌值。

So, the full JS looks like this:所以，完整的 JS 看起来像这样：

function loadTypeManagement(existingDocTypes, csrftoken) {
    console.log(csrftoken)
    const typeManagementModalDiv =
        '<div class="modal fade" id="typeManagementModalDiv" >' +
        '<div class="modal-dialog" style="max-width: none;">' +
        '<div class="modal-content feedback_popup" style="height:100%; margin-top: 0vh;">' +
        '<form class="feedback_form" autocomplete="off" action="/adminFunct/" method="post" id="taskitem_form">' +
        '<input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">' +
        '<h1 id="djangoInsert">Type Management</h1><br>' +
        '<hr>' +
        '<div class="autocomplete container justify-content-center">' +
        '<h3 style="margin-bottom: .5vw;">Add a Document Type</h3>' +
        '<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
        '<div class="row">' +
        '<div class="col-3"></div>' +
        '<label class="col-6 admin_input_desc ">Document Type:</label>' +
        '<div class="col-3"></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-3"></div>' +
        '<input class=" text-center col-6 admin_input " id="addDoctypeId" type="text" name="addDocTypeName" placeholder="Document Type">' +
        '<div class="col-3"></div>' +
        '<div class="d-inline p-2 text-white ">' +
        '<p class="col-sm-4 admin_input_desc d-inline">Can this new type be an Authentication Source?</p>' +
        '<label class="">No</label>' +
        ' <input  type="radio" id="date_newToOld" name="choice" value="date_newToOld" checked/>' +
        '<label class="float-right " style="margin-left: 1.25vw;">Yes</label>' +
        ' <input  class="float-left" type="radio" id="date_newToOld" name="choice" value="date_newToOld" />' +
        '</div>' +
        '</div>' +
        '<input class="submit_button" name="submit" type="submit" value="Add Document Type">' +
        '</div>' +
        '</form>' +
        '<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
        '<hr>' +
        '<div class="autocomplete container justify-content-center">' +
        '<h3 style="margin-bottom: .5vw;">Remove a Document Type</h3>' +
        '<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
        '<div class="row">' +
        '<div class="col-3"></div>' +
        '<label class="col-6 admin_input_desc ">Document Type:</label>' +
        '<div class="col-3"></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-3"></div>' +
        '<tr>' +
        '<td  class=" text-center col-6 remove_doc_dropdown ">' +
        '<select  class=" text-center remove_doc_dropdown2 " id="m" >' +
        '<option id="-1" value="" selected disabled>Document Type</option>' +
        '</select>' +
        '</td>' +
        '</tr>' +
        '<div class="col-3"></div>' +
        '<div class="d-inline p-2 text-white ">' +
        '</div>' +
        '</div>' +
        '<input class="submit_button" type="submit" value="Remove Document Type">' +
        '</div>' +
        '<hr>' +
        '</form>' +
        '<form class="feedback_form" autocomplete="on" action="/action_page.php">' +
        '<div class="autocomplete container justify-content-center">' +
        '<h3 style="margin-bottom: .5vw;">Change a Document Type</h3>' +
        '<hr style="width: 50% ;margin: auto; margin-bottom: .5vh;">' +
        '<div class="row">' +
        '<div class="col-3"></div>' +
        '<label class="col-6 admin_input_desc ">Change Document Type:</label>' +
        '<div class="col-3"></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-3"></div>' +
        '<tr>' +
        '<td  class=" text-center col-6 remove_doc_dropdown ">' +
        '<select  class=" text-center remove_doc_dropdown2 " id="m2" >' +
        '<option id="-1" value="" selected disabled>Document Type</option>' +
        '</select>' +
        '</td>' +
        '</tr>' +
        '<div class="col-3"></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-3"></div>' +
        '<label class="col-6 admin_input_desc ">To Document Type:</label>' +
        '<div class="col-3"></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-3"></div>' +
        '<input class=" text-center col-6 admin_input " id="myInput" type="text" name="myCountry" placeholder="Document Type">' +
        '<div class="col-3"></div>' +
        '<div class="d-inline p-2 text-white ">' +
        '</div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col-4"></div>' +
        '<input class="col-4 submit_button" type="submit" value="Change Document Type">' +
        '<div class="col-4"></div>' +
        '<div class="d-inline p-2 text-white ">' +
        '</div>' +
        '</div>' +
        '<hr>' +
        '</form>' +
        '</div>' +
        '</div>' +
        '</div>';
    const newDiv = document.createElement("div");
    newDiv.innerHTML = typeManagementModalDiv;
    document.body.appendChild(newDiv);
    for (i = 0; i < existingDocTypes.length; i++) {
        var opt = document.createElement("option");
        document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
        document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
    }

For any curious, this portion is used for dropdown stuff and not needed for anything related to the csrf_token对于任何好奇的人，这部分用于下拉内容，与 csrf_token 相关的任何内容都不需要

 for (i = 0; i < existingDocTypes.length; i++) {
        var opt = document.createElement("option");
        document.getElementById("m").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
        document.getElementById("m2").innerHTML += '<option class="option_value" value = "' + existingDocTypes[i] + '" id="' + i + '">' + existingDocTypes[i] + '</option>';
    }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 javascript 中使用 {% csrf_token %} - How to use {% csrf_token %} in javascript 在 javascript 创建的元素表单中使用 csrf_token - use csrf_token in javascript created element form 如何正确地将django csrf_token附加到内联javascript中？ - How to properly append django csrf_token to form in inline javascript? 如何将 csrf_token 传递给 django 中的 javascript 文件？ - how to pass csrf_token to javascript file in django? 在 JSON 请求中发送 csrf_token（无 ajax） - send csrf_token in JSON request (no ajax) 如何在python（Django）中获取csrf_token - How to get the csrf_token in python(Django) 如何在django中应用csrf_token - how to apply csrf_token in django 如何使用jquery在异步帖子中使用csrf_token - How to csrf_token in asynchoronous post with jquery 如何发送 csrf_token？ - How can I send csrf_token? django 使用经典的 javascript 将 AJAx POST 请求发送到带有 csrf_token 的服务器，如何？ - django sending AJAx POST request using classical javascript into server with csrf_token, how to?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM