ueditor文件上传研究

最新推荐文章于 2024-04-29 13:34:02 发布
最新推荐文章于 2024-04-29 13:34:02 发布
阅读量293 收藏
点赞数
分类专栏： javascript 文章标签： ueditor fileupload
     之前写过一版本的ueditor的使用方式，感觉后来ueditor升级很快，转眼间又升级了，今天有一个人问这块相关的问题，正好又熟悉下。
     首先最基本的用法我就不讲了，只讲文件上传的这块。
     首先，文件上传这块和之前的变化很大，先慢慢的讲讲用法。
     1. java版本的在jsp目录的文件结构如下：        
       
        从这地方可以看出来，有一个controller.jsp， 一个config.json,一堆jar文件， 这个和之前版本是不一致的。
        2. maven工程的jar包的引用
        如果没有使用jar包，很容易，直接copy文件就可以，但是maven的方式，这个jar又在网上没有，索幸maven提供了system方式的依赖方式：
        
 < dependency>
              < groupId> com.baidu.ueditor </groupId >
              < artifactId> ueditor </artifactId >
              < version> 1.1.1 </version >
              < scope> system </scope >
              < systemPath> ${basedir}/ src/main/webapp /WEB-INF/lib/ ueditor-1.1.1.jar </systemPath >
          </ dependency>
          maven的jar包的放置位置如下：
       
          其他的jar我就不多讲了，都很容易找。
        3. controller.jsp文件阅读
         
<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="com.baidu.ueditor.ActionEnter"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%

    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	
	String rootPath = application.getRealPath( "/" );
	
	out.write( new ActionEnter( request, rootPath ).exec() );
	
%>
 
        从代码来看，rootPath其实就是项目的根路径，构建了ActionEnter，并调用了exec函数。
       我们来看下ActionEnter的代码：
        
package com.baidu.ueditor;

import com.baidu.ueditor.define.ActionMap;
import com.baidu.ueditor.define.BaseState;
import com.baidu.ueditor.define.State;
import com.baidu.ueditor.hunter.FileManager;
import com.baidu.ueditor.hunter.ImageHunter;
import com.baidu.ueditor.upload.Uploader;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.json.JSONObject;

public class ActionEnter
{
  private HttpServletRequest request = null;

  private String rootPath = null;
  private String contextPath = null;

  private String actionType = null;

  private ConfigManager configManager = null;

  public ActionEnter(HttpServletRequest request, String rootPath)
  {
    this.request = request;
    this.rootPath = rootPath;
    // 对action进行赋值。
    this.actionType = request.getParameter("action");
    this.contextPath = request.getContextPath();
    // 构建configManager类
    this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, request.getRequestURI());
  }

  public String exec()
  {
    // 这个是处理jsonp的形式，一般都是不跨域的。
    String callbackName = this.request.getParameter("callback");

    if (callbackName != null)
    {
      if (!validCallbackName(callbackName)) {
        return new BaseState(false, 401).toJSONString();
      }

      return callbackName + "(" + invoke() + ");";
    }

    return invoke();
  }

  public String invoke()
  {
    // 判断action是否合法，如果不合法返回一个非法状态
    if ((this.actionType == null) || (!ActionMap.mapping.containsKey(this.actionType))) {
      return new BaseState(false, 101).toJSONString();
    }
   // 如果找不到configManager也报错
    if ((this.configManager == null) || (!this.configManager.valid())) {
      return new BaseState(false, 102).toJSONString();
    }

    State state = null;

    // 取得actionCode
    int actionCode = ActionMap.getType(this.actionType);

    Map conf = null;

    switch (actionCode)
    {
    case 0:
      return this.configManager.getAllConfig().toString();
    case 1:
    case 2:
    case 3:
    case 4:
      // 处理上传文件
      conf = this.configManager.getConfig(actionCode);
      state = new Uploader(this.request, conf).doExec();
      break;
    case 5:
      conf = this.configManager.getConfig(actionCode);
      String[] list = this.request.getParameterValues((String)conf.get("fieldName"));
      // 处理在线编辑
      state = new ImageHunter(conf).capture(list);
      break;
    case 6:
    case 7:
      conf = this.configManager.getConfig(actionCode);
      int start = getStartIndex();
      // 处理文件list
      state = new FileManager(conf).listFile(start);
    }

    return state.toJSONString();
  }

  public int getStartIndex()
  {
    String start = this.request.getParameter("start");
    try
    {
      return Integer.parseInt(start); } catch (Exception e) {
    }
    return 0;
  }

  public boolean validCallbackName(String name)
  {
    if (name.matches("^[a-zA-Z_]+[\\w0-9_]*$")) {
      return true;
    }

    return false;
  }
}
          我们慢慢的来看这个函数：首先在构造函数里面调用了request.getContextPath()和request.getRequestURI()函数。
        假设我们的项目的contextPath为：test，那么下面两个函数的返回值则如下：
  request.getContextPath                   /test
   request.getRequestURI           /test/resources/ueditor/jsp/controller.jsp
   我们还是先来看下ConfigManager类吧。
    
package com.baidu.ueditor;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.Map;
import org.json.JSONArray;
import org.json.JSONObject;

public final class ConfigManager
{
  private final String rootPath;
  private final String originalPath;
  private final String contextPath;
  private static final String configFileName = "config.json";
  private String parentPath = null;
  private JSONObject jsonConfig = null;
  private static final String SCRAWL_FILE_NAME = "scrawl";
  private static final String REMOTE_FILE_NAME = "remote";

  private ConfigManager(String rootPath, String contextPath, String uri)
    throws FileNotFoundException, IOException
  {
    rootPath = rootPath.replace("\\", "/");

    this.rootPath = rootPath;
    this.contextPath = contextPath;
    // 这个地方要特别注意，originalPath其实就是controller.jsp所在的路径
    if (contextPath.length() > 0)
      this.originalPath = (this.rootPath + uri.substring(contextPath.length()));
    else {
      this.originalPath = (this.rootPath + uri);
    }

    initEnv();
  }

  public static ConfigManager getInstance(String rootPath, String contextPath, String uri)
  {
    try
    {
      return new ConfigManager(rootPath, contextPath, uri); } catch (Exception e) {
    }
    return null;
  }

  public boolean valid()
  {
    return this.jsonConfig != null;
  }

  public JSONObject getAllConfig()
  {
    return this.jsonConfig;
  }

  public Map<String, Object> getConfig(int type)
  {
    Map conf = new HashMap();
    String savePath = null;
    // 根据不同的code来解析config.json的配置文件
    switch (type)
    {
    case 4:
      conf.put("isBase64", "false");
      conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("fileMaxSize")));
      conf.put("allowFiles", getArray("fileAllowFiles"));
      conf.put("fieldName", this.jsonConfig.getString("fileFieldName"));
      savePath = this.jsonConfig.getString("filePathFormat");
      break;
    case 1:
      conf.put("isBase64", "false");
      conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("imageMaxSize")));
      conf.put("allowFiles", getArray("imageAllowFiles"));
      conf.put("fieldName", this.jsonConfig.getString("imageFieldName"));
      savePath = this.jsonConfig.getString("imagePathFormat");
      break;
    case 3:
      conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("videoMaxSize")));
      conf.put("allowFiles", getArray("videoAllowFiles"));
      conf.put("fieldName", this.jsonConfig.getString("videoFieldName"));
      savePath = this.jsonConfig.getString("videoPathFormat");
      break;
    case 2:
      conf.put("filename", "scrawl");
      conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("scrawlMaxSize")));
      conf.put("fieldName", this.jsonConfig.getString("scrawlFieldName"));
      conf.put("isBase64", "true");
      savePath = this.jsonConfig.getString("scrawlPathFormat");
      break;
    case 5:
      conf.put("filename", "remote");
      conf.put("filter", getArray("catcherLocalDomain"));
      conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("catcherMaxSize")));
      conf.put("allowFiles", getArray("catcherAllowFiles"));
      conf.put("fieldName", this.jsonConfig.getString("catcherFieldName") + "[]");
      savePath = this.jsonConfig.getString("catcherPathFormat");
      break;
    case 7:
      conf.put("allowFiles", getArray("imageManagerAllowFiles"));
      conf.put("dir", this.jsonConfig.getString("imageManagerListPath"));
      conf.put("count", Integer.valueOf(this.jsonConfig.getInt("imageManagerListSize")));
      break;
    case 6:
      conf.put("allowFiles", getArray("fileManagerAllowFiles"));
      conf.put("dir", this.jsonConfig.getString("fileManagerListPath"));
      conf.put("count", Integer.valueOf(this.jsonConfig.getInt("fileManagerListSize")));
    }

    conf.put("savePath", savePath);
    conf.put("rootPath", this.rootPath);

    return conf;
  }

  // 加载config.json配置文件
  private void initEnv()
    throws FileNotFoundException, IOException
  {
    File file = new File(this.originalPath);

    if (!file.isAbsolute()) {
      file = new File(file.getAbsolutePath());
    }

    this.parentPath = file.getParent();

    String configContent = readFile(getConfigPath());
    try
    {
      JSONObject jsonConfig = new JSONObject(configContent);
      this.jsonConfig = jsonConfig;
    } catch (Exception e) {
      this.jsonConfig = null;
    }
  }

  private String getConfigPath()
  {
    return this.parentPath + File.separator + "config.json";
  }

  private String[] getArray(String key)
  {
    JSONArray jsonArray = this.jsonConfig.getJSONArray(key);
    String[] result = new String[jsonArray.length()];

    int i = 0; for (int len = jsonArray.length(); i < len; i++) {
      result[i] = jsonArray.getString(i);
    }

    return result;
  }


  // 读取config.json里面的内容
  private String readFile(String path)
    throws IOException
  {
    StringBuilder builder = new StringBuilder();
    try
    {
      InputStreamReader reader = new InputStreamReader(new FileInputStream(path), "UTF-8");
      BufferedReader bfReader = new BufferedReader(reader);

      String tmpContent = null;

      while ((tmpContent = bfReader.readLine()) != null) {
        builder.append(tmpContent);
      }

      bfReader.close();
    }
    catch (UnsupportedEncodingException localUnsupportedEncodingException)
    {
    }

    return filter(builder.toString());
  }

  private String filter(String input)
  {
    return input.replaceAll("/\\*[\\s\\S]*?\\*/", "");
  }
}
 
      我们再来看 Uploader函数，其实很简单：
    
package com.baidu.ueditor.upload;

import com.baidu.ueditor.define.State;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;

public class Uploader
{
  private HttpServletRequest request = null;
  private Map<String, Object> conf = null;

  public Uploader(HttpServletRequest request, Map<String, Object> conf) {
    this.request = request;
    this.conf = conf;
  }

  public final State doExec() {
    String filedName = (String)this.conf.get("fieldName");
    State state = null;

    if ("true".equals(this.conf.get("isBase64")))
      state = Base64Uploader.save(this.request.getParameter(filedName), 
        this.conf);
    else {
      state = BinaryUploader.save(this.request, this.conf);
    }

    return state;
  }
}
   
      这个很好理解，我们接着来看BinaryUploader类：
      
package com.baidu.ueditor.upload;

import com.baidu.ueditor.PathFormat;
import com.baidu.ueditor.define.BaseState;
import com.baidu.ueditor.define.FileType;
import com.baidu.ueditor.define.State;
import java.io.IOException;
import java.io.InputStream;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class BinaryUploader
{
  // 使用fileupload来处理文件上传
  public static final State save(HttpServletRequest request, Map<String, Object> conf)
  {
    FileItemStream fileStream = null;
    boolean isAjaxUpload = request.getHeader("X_Requested_With") != null;

    if (!ServletFileUpload.isMultipartContent(request)) {
      return new BaseState(false, 5);
    }

    ServletFileUpload upload = new ServletFileUpload(
      new DiskFileItemFactory());

    if (isAjaxUpload) {
      upload.setHeaderEncoding("UTF-8");
    }
    try
    {
      FileItemIterator iterator = upload.getItemIterator(request);

      while (iterator.hasNext()) {
        fileStream = iterator.next();

        if (!fileStream.isFormField())
          break;
        fileStream = null;
      }

      if (fileStream == null) {
        return new BaseState(false, 7);
      }

      String savePath = (String)conf.get("savePath");
      String originFileName = fileStream.getName();
      String suffix = FileType.getSuffixByFilename(originFileName);

      originFileName = originFileName.substring(0, 
        originFileName.length() - suffix.length());
      savePath = savePath + suffix;

      long maxSize = ((Long)conf.get("maxSize")).longValue();

      if (!validType(suffix, (String[])conf.get("allowFiles"))) {
        return new BaseState(false, 8);
      }

      savePath = PathFormat.parse(savePath, originFileName);

      String physicalPath = (String)conf.get("rootPath") + savePath;

      // 调用存储类来处理文件存储
      InputStream is = fileStream.openStream();
      State storageState = StorageManager.saveFileByInputStream(is, 
        physicalPath, maxSize);
      is.close();

      if (storageState.isSuccess()) {
        storageState.putInfo("url", PathFormat.format(savePath));
        storageState.putInfo("type", suffix);
        storageState.putInfo("original", originFileName + suffix);
      }

      return storageState;
    } catch (FileUploadException e) {
      return new BaseState(false, 6);
    } catch (IOException localIOException) {
    }
    return new BaseState(false, 4);
  }

  private static boolean validType(String type, String[] allowTypes) {
    List list = Arrays.asList(allowTypes);

    return list.contains(type);
  }
}
 
          StorageManager我们就不看了，无非就是做一些文件存储的一些事情，下面我们来分析下这种实现方式的问题。
        最后我稍微总结下看这个代码得收获和对作者的建议：
  1.   从这个地方来看，无法将图片放置在外部路径，因为这种实现就决定了只能放到项目路径下，这个最大的问题就是，有可能不小心，重新上下线，内容全部丢了。
  2.  从实现来看，大量的使用静态调用，基本上无法二次开发，不能灵活的继承它来处理个性化的东西，比如如果存储到fastDFS里面，这个就需要改里面的代码，不能通过扩展的方式来进行
  3.  config.json里面的配置项转换的时候，进行了重命名，这个地方就要求读者要记两个变量名，比如：imagePathFormat变成了savePath, 感觉好像挺好理解，但是这种明显不是好的方式，如果里面存在一个这个逻辑，最好显式的说明，而不是硬编码 
  4. 源代码不开放，无法进行扩展和修改，建议作者开发这个jar到github里面，社区一块维护 
asialee029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ueditor上传图片配置
12-28
1. **引入依赖**：首先需要在SpringBoot项目的pom.xml文件中添加ueditor的相关依赖，这可能包括ueditor的JavaScript库以及后端处理图片上传所需的Java库。 2. **配置ueditor**：在前端，需要在HTML页面中引入...
Ueditor研究代码
08-24
Ueditor内置了图片和文件上传功能，用户可以直接在编辑器内上传图片或文件。上传过程包括文件选择、进度显示、错误处理等步骤，后端通常会处理文件存储、权限控制等问题。 5. **插件系统** Ueditor支持插件扩展，...
ueditor编辑器任意文件上传
xxx9686的博客
09-15 2814
通过上传文件看到上传功能位于controller.php文件action中uploadimage 参数。通过查看controller.php文件，看到文中上传功能调用到了action_upload.php文件。事情起源于项目，本身我并没有关注过ueditor方面，遇到一个网站也是纯属尝试下，但是居然搞定了。那就从官方下载代码来看下额。
实战纪实 | 编辑器漏洞之Ueditor-任意文件上传漏洞 （老洞新谈）
zkaqlaoniao的博客
04-12 6615
前段时间在做某政府单位的项目的时候发现存在该漏洞，虽然是一个老洞，但这也是容易被忽视，且能快速拿到shell的漏洞，在利用方式上有一些不一样的心得，希望能帮助到一些还不太了解的小伙伴，故此写了此篇文章。Ueditor是百度开发的一个网站编辑器，目前已经不对其进行后续开发和更新，该漏洞只存在于该编辑器的.net版本。其他的php,jsp,asp版本不受此UEditor的漏洞的影响，.net存在任意文件上传，绕过文件格式的限制，在获取远程资源的时候并没有对远程文件的格式进行严格的过滤与判断。
百度编辑器ueditor如何配置文件上传，Java代码实现
最新发布
yncjxnc的博客
04-29 351
修改后需要新建一个控制器，把URL指向为你修改对应的URL，以下是servlet的代码例子，写的比较烂就将就下，好歹能运行，注意这里和JS路径要一样。文件上传是不可用的，这是因为后端的路径没有配置正确，这个时候需要修改ueditor/ueditor.config.js文件如下图所示。配置好后就可以上传图片了，也可以直接复制图片或者截图，ctrl+v能直接复制到编辑器中，是不是很方便？当编辑器界面出来时，你是不是很开心，但是你想上传图片的时候就发现如下图。
UEditor自定义图片/文件上传路径与回显
小小默：进无止境
04-29 6511
本文是基于Windows下Java解决UEditor自定义图片/文件上传路径问题，文件保存在本地磁盘，Tomcat做了虚拟路径映射。 UEditor官网：https://ueditor.baidu.com/website/index.html 下载地址：https://ueditor.baidu.com/website/download.html UEditor入门：http://fex.bai...
百度ueditor粘贴word图片且图片文件自动上传功能
Mr_Zang666的博客
03-17 1108
"wordPathFormat": "/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */在ueditor\ueditor.all.js文件中UE.plugin.register('simpleupload', function (){})下方新增如下方法。"wordAllowFiles": [".docx"] /* 仅支持docx格式的word */
富文本编辑器Ueditor实战（二）-图片上传
热门推荐
夜郎King的博客
12-24 2万+
本文重点阐述了如何扩展Ueditor的图片上传功能，以及在实际中，如何根据项目实际情况，设置图片信息的动态展示思路。
ueditor可运行上传图片Javaweb项目
08-17
【标题】"ueditor可运行上传图片Javaweb项目"揭示了...通过学习和研究这个项目，开发者可以了解如何在自己的JavaWeb应用中实现类似的功能，提升用户体验，同时也能深入理解文件上传、服务器端处理及前后端交互的原理。
ueditor（jsp版）上传文件到阿里云OSS的简单实例
05-31
总结来说，将ueditor（jsp版）与阿里云OSS结合，能帮助开发者构建出高效、稳定的文件上传功能。这需要对ueditor的配置、阿里云OSS的使用以及Java后端开发有一定的理解。遵循上述步骤，新手也能轻松上手，为自己的Web...
ueditor jsp 图片上传demo
07-27
5. **安全性考虑**：在实际应用中，需要考虑安全问题，例如防止恶意文件上传、避免路径遍历攻击、确保文件名的安全性（防止注入攻击）等。 6. **性能优化**：对于大量图片上传，可以考虑使用多线程处理、文件分块...
UEditor 编辑器实现文件上传到服务器及图片回显问题
秀岩的博客
03-31 1626
UEditor 编辑器实现文件上传到服务器及图片回显问题   在上一节我们讲到了UEditor 编辑器的下载与安装问题，也实现了编辑器初始化问题。但是 UEditor 编辑器重要的文件上传功能却没有实现，那么本文针对此问题，提出一些解决方案。 这里写目录标题UEditor 编辑器实现文件上传到服务器及图片回显问题一、导入 json 支持包和文件上传支持包二、解决 UEditor 文件上传后无法回显问题补充：IDEA中引入 UEditor 编辑器图片回显问题   默认后端未配置，上传的插件是不能加载的。
4. UEditor 实现 自定义上传
Eden 的博客
08-05 860
新建 UploadImageServlet 接受前段上传请求、保存图片、返回信息。UploadImageServlet 代码。UploadImageServlet 中的。新建 diyindex.html。与 config.json 中的。修改前台上传图片访问路径。doPost 方法代码。
UEditor 任意文件上传漏洞
qq_50854662的博客
10-27 2万+
UEditor于近日被曝出高危漏洞，包括目前官方UEditor 1.4.3.3 最新版本，都受到此漏洞的影响，ueditor是百度官方技术团队开发的一套前端编辑器，可以上传图片，写文字，支持自定义的html编写，移动端以及电脑端都可以无缝对接，自适应页面，图片也可以自动适应当前的上传路径与页面比例大小，一些视频文件的上传，开源，高效，稳定，安全，一直深受站长们的喜欢。 百度的UEditor文......
3. 对 UEditor 文件上传的源码的理解
Eden 的博客
08-05 133
1. 先决条件 * 你已经看完了[上一篇 : ueditor 之 holleworld]()，因为我是使用上一篇的开发环境 * 你已经知道如何搭建 ueditor 的 helloworld
Ueditor编辑器任意文件上传漏洞
m0_51468027的博客
07-30 1万+
一文学习Ueditor编辑器任意文件上传漏洞（部署环境到漏洞复现）
百度编辑器(UEditor)上传图片word
Mr_Zang666的博客
08-01 364
"wordPathFormat": "/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"wordActionName": "wordupload", /* 执行上传视频的action名称 */"wordAllowFiles": [".docx"] /* 仅支持docx格式的word */"wordFieldName": "upfile", /* 提交的视频表单名称 */
Ueditor 百度强大富文本Springboot 项目集成使用(包含上传文件和上传图片的功能使用)简单易懂，举一反三
zhang19age_的博客
07-27 2994
到这里已经将代码层面改好啦，然后呢就是最恶心的环节啦，那就是他们的源码里参了一点点西东，那就是BUG，那就是在这个jar包中的 getConfigPath() 方法，这里的获取config路径是不对的，我们需要改一下这个代码，可以使用修改源码或者重写来修改这里的源码,重写就是依靠java 的类加载器如果本地有就去加载本地的类，如果本地没有就去加载其他的，这里我是修改源码实现的。其实就是换了获取config.json的路径变为了动态，下载了之后换掉lib下的包。实体类 uEditorFile。
ueditor文件上传漏洞
08-31
但是，对于ueditor文件上传漏洞，你可以采取以下步骤来增强文件上传的安全性: 1. 文件类型验证: 在服务器端进行文件类型的验证，限制上传文件的后缀名和MIME类型，禁止上传可执行文件等危险类型的文件。 2. 文件名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值