[转载] editor.md编辑器在django中上传图片遇到的csrf问题

最新推荐文章于 2024-05-29 16:19:31 发布

Wyhn.Wang

最新推荐文章于 2024-05-29 16:19:31 发布

阅读量322

点赞数

文章标签： django 编辑器 csrf

原文链接：https://www.zengwenliang.com/article/2/

版权

当Django开启CSRF验证后，需要在editor.md的图片上传请求中添加csrfmiddlewaretoken。通过在HTML头部添加meta标签，获取CSRFTOKEN，并在editor.md的image-dialog.js中插入隐藏的csrf字段，使图片上传时携带该token，从而避免403错误，实现正常上传。

摘要由CSDN通过智能技术生成

原文

请添加图片描述

问题描述

我们知道如果在django中开启了csrf验证中间件，那么前端post提交的数据必须带有csrfmiddlewaretoken，否则请求会被中间件拒绝，并抛出403错误。而editor.md上传图片时所提交的数据由它自己控制，我也未能在官网找到可以携带额外参数的方法，如果不做一些改动，图片上传会一直被django中间件拒绝，接下来是对编辑器代码的一点点修改

解决方案

1.在html页面中添加一条带有csrftoken的标签，等下会用到

<head>
...
<meta name="_token" content="{{ csrf_token }}">
...
</head>

2.找到editor.md中负责图片上传的js文件：editormd/plugins/image-dialog/image-dialog.js
3.找到var dialogContent所在的位置，并在前面定义一条含csrf_token的标签

var csrfToken = $('meta[name="_token"]').attr('content');
var csrfField = "<input type='hidden' name='csrfmiddlewaretoken' value='" + csrfToken + "' />"
var dialogContent = ...