nodejs下ueditor文件上传时csurf与contentType冲突问题

简介: 表单提交时 form submit 直接就可以提交了,但是了防止跨站攻击,都可以加入CSRF来防御。

表单提交时 form submit 直接就可以提交了,但是了防止跨站攻击,都可以加入CSRF来防御。


node下的配置

var csrf = require('csurf');

app.use(csrf());

app.use(function(req, res, next){
    let _csrf = req.csrfToken();
    res.locals.csrf = _csrf;
    res.cookie('XSRF-TOKEN', _csrf);
    return next();
});
页面

<form id="localimage" action="/login" method="POST">
      <input id="csrf" type="hidden" name="_csrf" value="<%= csrf %>">
      <input id="test" name="test" class="test" type="text">
</form>

这么写当然没问题,但是当上传文件就不行了。

需要设置表单的enctype属性, 默认enctype 是对所有字符进行编码了的,同时csrf值就不能放到input 进行提交,从csrf源码来看我们传输csrf值可以放在以下几个地方



<form id="localimage" action="/login?_csrf=<%= csrf %>" method="POST" enctype="multipart/form-data">
      <input id="imguploadinput" name="upfile" class="imguploadinput" type="file" accept="image/jpeg,image/gif,image/png,image/bmp">
</form>
ajax异步提交,也是如此,但文件时也 new FormData 提交的,csrf 放在FormData 里也不行。最好的就是放在请求头里

xhr.setRequestHeader('csrf-token', _csrf);

在ueditor里就很容易做了, ueditor里 是有ajax 方法提交的,但是没有支持file的,使用ue的方法默认就对表单信息进行了编码



可以将此方法修改一下就行了

 addEvent(imguploadinput, 'change', function() {
	     // var localImage = document.getElementById('localimage');
	     // 	localImage.submit();
            var ajax = UE.ajax;
	    // 图片
            var file = document.getElementById('imguploadinput').files[0];
	    var form = new FormData();
	    form.append('file', file);
            ajax.request('/ueditor/ue?action=uploadimage', {
                method: 'POST',
                timeout: 10000,
                async: true,
		data: form,
		_csrf: csrf.value,
                onsuccess: function ( xhr ) {
                    console.log( xhr.responseText );
                },
                //请求失败或者超时后的回调。
                onerror: function ( xhr ) {
                    alert( 'Ajax请求失败' );
                }
            });
        });

ueditor 可以修改如下



成功提交后 返回如下


否则 没有设置header 时 



如果设置了

 xhr.setRequestHeader("Content-Type","multipart/form-data"); 也是不行的


写死后就出现找不到Boundary(用户分割不同的字段)的错误的错误

注意 使用jquery 的ajax 提交时 ,contentType 需要设置为false

contentType:false



有需要的交流的可以加个好友


相关文章
|
前端开发 API 对象存储
FileSaver.js源码学习,纯前端实现文件下载
FileSaver.js源码学习,纯前端实现文件下载
|
3月前
|
JavaScript 前端开发 UED
HTML 文件上传 ,学会了保证不亏!
HTML 文件上传 ,学会了保证不亏!
|
6月前
|
PHP Python
通过html实现文件的上传和下载
通过html实现文件的上传和下载
529 1
|
JavaScript 前端开发
前端html,js实现图片的上传与下载
前端html,js实现图片的上传与下载
244 1
|
存储 缓存 JavaScript
Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件
为了解决调用一些依赖的如echarts等一些js的代码模块引入的问题,就需要静态文件了。 本篇解说StaticFileController,在返回的html文本中调用外部js文件,类似的,其他文件都是一样了,只是引入的后缀名不一样。
Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件
|
缓存 安全 JavaScript
如何实现上传文件到 nodejs 和文件下载
最近拿 next.js 做个全栈项目,需要文件上传和下载,这里记录下实现方式,也写一下使用原生 node 代码如何实现。
|
移动开发 JavaScript Java
UploadiFive jquery html5上传插件使用[带项目源码]
UploadiFive jquery html5上传插件使用[带项目源码] 插件地址:http://www.uploadify.com/ 插件文档:http://www.uploadify.com/documentation/
292 0
UploadiFive jquery html5上传插件使用[带项目源码]
|
前端开发 JavaScript Java
关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径
突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行。既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题。 大家可能经常会用到富文本编辑器,今天我要说的是UEditor的使用,这是一个简单易用的开源富文本编辑器。
3417 0