将 CKeditor 集成到 Flask 时 CSRF 验证失败

Question

我正在将 CKeditor 集成到 Flask 中以添加富文本支持。但是当启用文件上传功能时，post 请求总是失败。应该是csrf的问题。直接添加{{csrf_token()}是不行的。 CKeditor中是否有任何地方应该更改以添加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 %}

处理文件上传，

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 1

目前我的解决方法是为此 url 添加 csrf 异常。

@csrf.exempt

Answer 2

CKEditor 使用 AJAX 发送上传，因此您可以通过这种方式添加 CSRF 支持：

<script type="text/javascript">
    CKEDITOR.replace( "textarea-name", {
        fileTools_requestHeaders: {
            'X-CSRFToken': '{{ csrf_token() }}',
        },
    });
</script>

顺便说一句，我推荐使用 Flask-CKEditor 将 CKEditor 与 Flask-WTF 集成，这样使用起来更容易：

from flask_wtf import CSRFProtect

app = Flask(__name__)

# the secret key used to generate CSRF token
app.config['SECRET_KEY'] = 'dev key'

# enable CSRF protection
app.config['CKEDITOR_ENABLE_CSRF'] = True

csrf = CSRFProtect(app)

将 CKeditor 集成到 Flask 时 CSRF 验证失败

CSRF validation failed when integrate CKeditor to Flask

javascript

python

csrf

ckeditor

flask