启用 Django 中使用 element-ui 编写的 HTML 代码中的 CSRF 令牌。

huangapple
go评论100阅读模式
英文:

Enable CSRF TOKEN in Django html coded using element-ui

问题

我正在尝试在我的HTML脚本（Django框架）中添加CSRF令牌，以确保CSRF保护，以便我的POST请求将被分类为不安全请求。但我不确定应该将它放在哪里。当我将它放在{% verbatim %}中时，它会显示为图像中所示的文本。

非常迫切并感激任何建议。

  1. {% csrf_token %}

启用 Django 中使用 element-ui 编写的 HTML 代码中的 CSRF 令牌。

英文:

I am trying to add CSRF TOKEN in my html script (Django framework) for ensure CSRF protection so that my POST requests will be be classified as an unsafe request.
However I am unsure of where I should place it. When I place it within {% verbatim %}, it comes off as a text as shown on in the image.

Really desperate and really appreciate any advice.

  1. {%extends "doctor.html" %}
  2. {% block emr %}active{% endblock %}
  3. {% block mainbody %}
  4. {% verbatim %}
  5. {% csrf_token %}
  6. <div id="app2" class="container">
  7. <el-row :gutter="20" style="width: 90%; height: 120%;">
  8. <el-col :span="12">
  9. <div class="info-wrapper">
  10. <div class="header">Add new medication delivery jobs</div>
  11. <el-form ref="deliveryInfoForm" :model="deliveryInfo" :rules="deliveryRules" label-width="110px" label-position="left">
  12. <el-form-item label="Order ID" prop="order_id">
  13. <el-select v-model="deliveryInfo.order_id" placeholder="Select an Order ID" style="width: 100%; margin-left: 0px;" >
  14. <el-option
  15. v-for="item in order_id"
  16. :key="item.id"  
  17. :label="item.order_id"
  18. :value="item.order_id">
  19. <span style="float: left">{{ item.order_id }}</span>
  20. </el-option>
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item label="Box Number" prop="box_number">
  24. <el-select v-model="deliveryInfo.box_number" placeholder="Default: Box 1" style="width: 100%; margin-left: 0px;" >
  25. <el-option
  26. v-for="item in box_options"
  27. :key="item.value"
  28. :label="item.label"
  29. :value="item.value">
  30. <span style="float: left">{{ item.label }}</span>
  31. </el-option>
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item>
  35. <el-button style="width: 100%;" type="primary" @click="onSubmit">Confirm</el-button> 
  36. </el-form-item>
  37. </el-form>
  38. </div>
  39. </el-col>
  40. <el-col :span="12">
  41. <div class="info-wrapper">
  42. <div class="header"><center>Medications Delivery Status</center></div>
  43. <el-table
  44. :data="list"
  45. stripe
  46. style="width: 100%"
  47. :cell-style="{ textAlign: 'left' }"		 
  48. :header-cell-style="{textAlign: 'left'}">
  49. <el-table-column
  50. prop="job_id"
  51. label="Job ID"
  52. width="120">
  53. </el-table-column>
  54. <el-table-column
  55. prop="order_id"
  56. label="Order ID"
  57. width="150">
  58. </el-table-column>
  59. <el-table-column
  60. prop="ward_number"
  61. label="Ward No."
  62. width="80">
  63. </el-table-column>
  64. <el-table-column
  65. prop="status"
  66. label="Status"
  67. width="90">
  68. </el-table-column>
  69. <el-table-column
  70. prop="recorded_date"
  71. label="Date Assigned"
  72. width="110">
  73. </el-table-column>
  74. <el-table-column
  75. prop="recorded_time"
  76. label="Time Assigned"
  77. width="110">
  78. </el-table-column>
  79. </el-table>
  80. </div>
  81. </el-col>
  82. </el-row>
  83. </div>
  84. {% endverbatim %}
  85. <script>
  86. new Vue({
  87. el: '#app2',
  88. data() {
  89. return {
  90. list: [],
  91. addDeliveryFormType: 1,
  92. userInfo: {
  93. user_id: '',
  94. patient_id: ''
  95. },
  96. deliveryInfo: {
  97. order_id: '',
  98. ward_number: '',
  99. },
  100. deliveryRules: {
  101. order_id: [{ required: true, message: 'Please enter select the Order ID', trigger: 'blur' }],
  102. box_number: [{ required: true, message: 'Please select a box number', trigger: 'blur' }],
  103. },
  104. box_options: [{
  105. value: '1',
  106. label: 'Box 1'
  107. }, {
  108. value: '2',
  109. label: 'Box 2'
  110. }, {
  111. value: '3',
  112. label: 'Box 3'
  113. }, {
  114. value: '4',
  115. label: 'Box 4'
  116. }, {
  117. value: '5',
  118. label: 'Box 5'
  119. }, {
  120. value: '6',
  121. label: 'Box 6'
  122. }, {
  123. value: '7',
  124. label: 'Box 7'
  125. }],
  126. order_id: []
  127. }
  128. },
  129. mounted() {
  130. this.getDeliveryList() // A function in methods. Purpose: To get the list of uncompleted medications delivery statuses
  131. this.getOrderIDList()
  132. },
  133. methods: {
  134. getOrderIDList() {
  135. axios.post(ToDJ('OrderIDList'), new URLSearchParams()).then(res => {
  136. if (res.data.code === 0) {
  137. this.order_id = res.data.data
  138. } else {
  139. this.NotifyFail(res.data.data)
  140. }
  141. })
  142. },
  143. // To track the delivery of medications that is not completed
  144. getDeliveryList() {
  145. axios.post(ToDJ("deliveryList"), new URLSearchParams()).then(res => {
  146. if (res.data.code === 0) {
  147. this.list = res.data.data
  148. } else {
  149. this.NotifyFail(res.data.data)
  150. }
  151. })
  152. },
  153. // Once SUBMIT BUTTON is pressed
  154. onSubmit() {
  155. this.$refs.deliveryInfoForm.validate((valid) => {
  156. if (valid) {
  157. if (this.addDeliveryFormType === 1) {
  158. axios.post(ToDJ('deliveryJob'), new URLSearchParams(this.deliveryInfo)).then(res => {
  159. if (res.data.code === 0) {
  160. this.NotifySuc("Job Sumitted!")
  161. this.deliveryInfoForm = true
  162. Object.assign(this.deliveryInfo, this.$options.data().deliveryInfo)
  163. this.getDeliveryList()
  164. this.getOrderIDList()
  165. } else {
  166. this.NotifyFail(res.data.data)
  167. Object.assign(this.deliveryInfo, this.$options.data().deliveryInfo)
  168. }
  169. })
  170. }
  171. }
  172. })
  173. },
  174. // Success Notification
  175. NotifySuc(str) {
  176. this.$message({
  177. message: str,
  178. type: 'success'
  179. })
  180. },
  181. // Error Notification
  182. NotifyFail(str) {
  183. this.$message({
  184. message: str,
  185. type: 'warning'
  186. })
  187. },
  188. // Format time
  189. formateTime(oriDate) {
  190. if (!oriDate) {
  191. return ''
  192. }
  193. const formateDate = new Date(oriDate)
  194. const year =  formateDate.getFullYear()
  195. const month =  formateDate.getMonth() + 1
  196. const day = formateDate.getDate()
  197. let h = formateDate.getHours()
  198. let m = formateDate.getMinutes()
  199. let s = formateDate.getSeconds()
  200. h = h >= 10 ? h : `0${h}`
  201. m = m >= 10 ? m : `0${m}`
  202. s = s >= 10 ? s : `0${s}`
  203. return `${year}-${month}-${day} ${h}:${m}`
  204. }
  205. }
  206. })
  207. </script>
  208. {% endblock %}

启用 Django 中使用 element-ui 编写的 HTML 代码中的 CSRF 令牌。

答案1

得分: 1

开始 {% verbatim %} *在 CSRF 令牌之后:

  1. {% csrf_token %}
  2. {% verbatim %}
  3. ...
  4. {% endverbatim %}
英文:

Start the {% verbatim %} *after the CSRF token:

  1. {% csrf_token %}
  2. {% verbatim %}
  3. ...
  4. {% endverbatim %}

huangapple
  • 本文由 发表于 2023年3月3日 20:14:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/75626958.html
  • csrf
  • csrf-token
  • django
  • element-ui
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定