혼자서 웹 서비스 만들어보기 - 5

혼자서 웹 서비스 만들어보기 - 5

https://github.com/remagine/webNovel/tree/develop

 CKEditor 파일 업로드 확장자 제한

1. config.js

 Ckeditor에는 다양한 설정을 도와주는 config.js 파일이 있습니다.

 http://docs.ckeditor.com/#!/api/CKEDITOR.config  

 하지만 아무리 찾아봐도 파일업로드 시 확장자 제한이나, 용량제한은 보이지 않습니다.

 

 결국 클라이언트에서 체크하는 것은 어렵고

 서버에서 확장자와 용량을 체크하면 좋을 듯 합니다.

 

 2. FileController - extension

 먼저 Ckeditor가 파일을 전송해 주면

 해당 파일의 확장자를 확인해주는 것을 구현해볼까 합니다.

 업로드를 허용하는 확장자를 정해주는 것은 

 보안적으로도 중요하고

 업로드되는 파일의 경로와 이름을 랜덤으로 바꾸는 것도 중요합니다.

 왜나하면 업로드 되는 파일이 shell script처럼 악성쉘일 수 있기 때문입니다.

 

 

    @RequestMapping(value = "/upload/images", method = RequestMethod.POST)
    @ResponseBody
    public void uploadImage(@RequestParam(required = false) MultipartFile uploadfileImage
            ,@RequestParam(value = "CKEditorFuncNum", required = false, defaultValue = "") String CKEditorFuncNum
            ,HttpServletRequest request
            ,HttpServletResponse response) throws Exception{
 
        if (uploadfileImage == null || uploadfileImage.isEmpty()) {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            uploadfileImage = multipartRequest.getFile("upload"); //ckeditor 기본값
        }
 
        if (!uploadfileImage.isEmpty()) {
            try {
                String originalFilename = uploadfileImage.getOriginalFilename();
                String originalExtension = getFileExtension(originalFilename);
                String regEx = "(jpg|jpeg|png|gif|bmp)";
                String fileRename = getFileRename(originalFilename);
 
                String makeRandomDir1 = (BaseUtil.getRandomDir()).toString();
                String makeRandomDir2 = (BaseUtil.getRandomDir()).toString();
 
                String saveDirectory = Paths.get(basedir, Const.IMAGE_PREFIX_PATH, makeRandomDir1, makeRandomDir2).toString();
                String returnFilePath = Paths.get("/" + Const.IMAGE_PREFIX_PATH, makeRandomDir1, makeRandomDir2, fileRename).toString();
                String realFilepath = Paths.get(saveDirectory, fileRename).toString();
 
                if(originalExtension.matches(regEx)){
                    makeFolder(saveDirectory);
                    uploadFiles(realFilepath, uploadfileImage);
                    if (StringUtils.isNoneBlank(CKEditorFuncNum)) {
                        response.getWriter().write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", '"
                                + returnFilePath.replace("\\", "\\\\") + "', '이미지가 업로드 되었습니다.');</script>");
                        return;
                    }
                } else {
                    response.getWriter().write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", '"
                            + returnFilePath.replace("\\", "\\\\") + "', ' jpg, jpeg, gif, bmp, png 확장자 파일만 허용됩니다.');</script>");
                    return;
                }
            } catch (Exception e) {
                log.error("Image Upload ERROR", e);
            }
        }
    }

자바에 있는 정규표현식 관련 메소드 matches를 활용하였습니다.

String regEx = "(jpg|jpeg|png|gif|bmp)"; 걸러낼 정규표현식을 작성하고

originalExtension.matches(regEx); 를 실행하면 boolean 값이 나옵니다. 

false가 나온다면 ckeditor에 callback 함수를 넘겨줍니다.