[英]Adding {% csrf_token %} to javascript insertion
全部,
单击按钮时,我有一个通过 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 不会接受它。
知道我该怎么做吗? 有没有更好的办法?
我不完全确定使用此方法是否存在任何安全问题(如果有,请告诉我),但我能够使用以下方法在模板中启动 {{ csrftoken }}:
<script>
var csrftoken = '{{ csrf_token }}';
</script>
然后将该令牌值传递给 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>
然后,在 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>';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.