Xiaokun Xiaokun - 3 years ago 189
Python Question

CSRF validation failed when integrate CKeditor to Flask

I am integrating CKeditor to Flask to add rich text support. But when file upload feature is enabled, the post request is always failed. It should be the csrf problem. Added {{csrf_token()} directly doesn't work. Is there anyplace in CKeditor should be changed to add csrf?

{% block content %}
<h1>Add articileļ¼š</h1>
<form>
<input type="hidden" name="csrf_token" value="{{csrf_token()}}" />
<textarea name="editor1" id="editor1" rows="20" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor1', {
filebrowserUploadUrl: '/ckupload',
});
</script>
</form>
{% endblock %}


To handle file upload,

def gen_rnd_filename():
filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S')
return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000)))

@app.route('/ckupload', methods=['POST', 'OPTIONS'])
def ckupload():
"""CKEditor file upload"""
error = ''
url = ''
callback = request.args.get("CKEditorFuncNum")
print callback
print request.method
if request.method == 'POST' and 'upload' in request.files:
fileobj = request.files['upload']
fname, fext = os.path.splitext(fileobj.filename)
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
filepath = os.path.join(app.static_folder, 'upload', rnd_name)
dirname = os.path.dirname(filepath)
if not os.path.exists(dirname):
try:
os.makedirs(dirname)
except:
error = 'ERROR_CREATE_DIR'
elif not os.access(dirname, os.W_OK):
error = 'ERROR_DIR_NOT_WRITEABLE'
if not error:
fileobj.save(filepath)
url = url_for('static', filename='%s/%s' % ('upload', rnd_name))
else:
error = 'post error'
res = """<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s');
</script>""" % (callback, url, error)
response = make_response(res)
response.headers["Content-Type"] = "text/html"
return response

Answer Source

Current my workaround is to add csrf exception to this url.

@csrf.exempt
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download