将 % csrf_token % 添加到 javascript HTML 插入
Posted
技术标签:
【中文标题】将 % csrf_token % 添加到 javascript HTML 插入【英文标题】：Adding % csrf_token % to javascript HTML insertion将 % csrf_token % 添加到 javascript HTML 插入 【发布时间】：2022-01-23 05:27:25 【问题描述】：全部，
单击按钮时，我有一个通过 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>';
我正在尝试提交表单并不断收到错误消息“CSRF 令牌丢失或不正确”。我试图通过字符串'% csrf_token %' 插入它，但这只是留下了字符串值，Django 没有接受它。
知道我该怎么做吗？有没有更好的办法？
【问题讨论】：
【参考方案1】：我不完全确定使用此方法是否存在任何安全问题（如果有，请告诉我），但我能够使用以下方法在模板中启动 csrftoken ：
<script>
var csrftoken = ' csrf_token ';
</script>
然后将该令牌值传递给 JS 函数，如下所示：
<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>
然后，在 JS 中，我可以添加以下行：
'<input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">' +
它持有令牌值。
所以，完整的 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>';
对于任何好奇的人，这部分用于下拉内容，与 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>';
【讨论】：
以上是关于将 % csrf_token % 添加到 javascript HTML 插入的主要内容，如果未能解决你的问题，请参考以下文章
django 页面进行ajax post提交时，页面要添加{% csrf_token %}
django 页面进行ajax post提交时，页面要添加{% csrf_token %}