게시판 즐겨찾기
편집
드래그 앤 드롭으로
즐겨찾기 아이콘 위치 수정이 가능합니다.
ckeditor 이미지업로드 csrf, 스프링시큐리티
게시물ID : programmer_21385짧은주소 복사하기
작성자 : 철판냄비
추천 : 0
조회수 : 2129회
댓글수 : 1개
등록시간 : 2017/09/18 16:21:14
옵션
  • 본인삭제금지

ckeditor 버전 :  CKEditor 4.7.3 


ckeditor에 이미지 파일 첨부기능을 추가하고 있는 중입니다.


CKEDITOR.replace( 'ckeditor', {//해당 이름으로 된 textarea에 에디터를 적용
            width:'100%',
            height:'400px',
            filebrowserImageUploadUrl: '/community/imageUpload' //여기 경로로 파일을 전달하여 업로드 시킨다.
        });


이런식으로 이미지파일 업로드를 완성했는데, 스프링시큐리티를 쓰고 있어 csrf 값을 같이 넘겨줘야 하는데 ckeditor에서만 인식을 못하고 있습니다. 

기존 ajax 호출은 헤더값에 토큰값을 파라미터로 추가하여 csrf 문제 없이 사용하고 있습니다.


문제는 파일업로드 할떄 어떤 값이라도 같이 보내주기만 하면 되는데 업로드기능 자체가 custom 이 안되고 있는 것으로 보입니다.


1번 )

 CKEDITOR.on( 'fileUploadRequest', function( evt ) {

     var xhr = evt.data.fileLoader.xhr;

     alert('ggggg');

     xhr.setRequestHeader( 'Cache-Control', 'no-cache' );

     xhr.setRequestHeader( 'csrf header ', 'HEADER' );

     xhr.withCredentials = true;

  } );

     

2번 )

    CKEDITOR.on('instanceReady', function (ev) {

     alert('gggggh');

     var header = $("meta[name='_csrf_header']").attr("content");

     var token = $("meta[name='_csrf']").attr("content");

    

        ev.editor.on( 'fileUploadRequest', function( evt ) {

            var xhr = evt.data.fileLoader.xhr;

            alert('ggggg');

            xhr.setRequestHeader( 'Cache-Control', 'no-cache' );

            xhr.setRequestHeader( 'csrf header ', 'HEADER' );

            xhr.withCredentials = true;

        } );

    });


위 두가지 방법으로 테스트해보았습니다.

이미지를 올릴때 alert을 출력하나 확인중인데 절대 반응하지 않네요 .


도큐멘트를 참고 하여 했습니다.

https://docs.ckeditor.com/#!/guide/dev_file_upload 



문제 해결하신분 있으면 도움부탁드립니다...


전체 추천리스트 보기
새로운 댓글이 없습니다.
새로운 댓글 확인하기
글쓰기
◀뒤로가기
PC버전
맨위로▲
공지 운영 자료창고 청소년보호