ckeditor上传图片时与后端的csrfToken验证

本篇博客基于上一章为基础，主要解决在ckeditor上传图片功能与csrf 冲突问题。

---

ckeditor上传图片时会提交自己的csrf token，名字叫“ckCsrfToken“。
如果后端配置有csrf校验，这会产生冲突，解决办法有两种，一种是是对指定的表单提交添加csrfToken的HTML的代码，第二种是修改csrf的cookie名称方法。

1、设定ckeditor的默认值，如果是通过接口拿数据，这需要等ckeditor实例构建完成后设置

editor.on("instanceReady", function(ev) {  self.$http.get(url)    .then(function(response) {      if (response.body.success) {        ev.editor.setData(response.body.content);      }    });});

2、采用第一种方式，通过在上传图片表单中插入html代码

<input type="hidden" name="csrfmiddlewaretoken" value=getCookie("csrftoken")>

chrome和IE都有效，但是该方法在firefox中无效。
2、采用第二种方式，修改ckcsrfToken的取值和名称与后端需要的token名称和取值一致，通过修改ckeditor.js的源码

getCsrfToken:function(){var a=CKEDITOR.tools.getCookie("ckCsrfToken"); if(!a||40!=a.length){var a=[],b=""; if(window.crypto&&window.crypto.getRandomValues)a=new Uint8Array(40),

改为

getCsrfToken:function(){var a=CKEDITOR.tools.getCookie("csrftoken"); if(!a||32!=a.length){var a=[],b=""; if(window.crypto&&window.crypto.getRandomValues)a=new Uint8Array(32),

“csrftoken”为cookie中需要认证的csrftoken名称，32为csrftoken的长度，根据实际情况进行修改；

a=new CKEDITOR.dom.element("input"), a.setAttributes({name:"ckCsrfToken",type:"hidden"}),

改为

a=new CKEDITOR.dom.element("input"), a.setAttributes({name:"csrfmiddlewaretoken",type:"hidden"}),

该方法在firefox中成功执行，同时也兼容其它浏览器。