[CKEditor 4] Base64 인코딩 이미지 Editor 등록 이슈

 

---

1.  문제 인식

 

 다른 사이트의 이미지를 복사하여 게시글을 작성하면 이미지가 잘 등록되지만, 특정 이미지나 로컬에 저장된 이미지는 등록이 되지 않는 이슈가 있었습니다. 

 

 아래 사진과 같이 Editor에 분명히 로컬에 저장되어있는 이미지를 넣고 등록 버튼을 눌렀지만,

예시 이미지

 참고로 위 사진은 이슈를 해결하고 나서의 Editor라, 버전은 4.17.2입니다.

이슈가 발생했을 때의 Editor 버전은 4.13.2였습니다. 하지만 버전업이 근본적인 문제 해결책이 아닙니다.   

4.17 버전부터 이미지를 Base64로 Editor에 끌어다 놓기를 허용하지만, 등록은 되지 않을 수 있습니다. 

 

 

아래 사진을 보면 이미지는 사라져있습니다. 

예시 이미지

 

 

 

 

 

---

2.  문제 해결

 

 lib/common.lib.php 파일을 찾습니다.

위 파일에서, 

 

$config->set('Attr.AllowedFrameTargets','_blank, _self, _parent, _top' );

 

혹은

 

$config->set('Attr.AllowedFrameTargets', array('_blank'));

 

위와 같은 코드를 찾습니다. 

만약 lib/common.lib.php 파일이 존재하지 않다면 위 코드를 갖고 있는 파일을 찾으시면 됩니다. 

 

 

해당 코드 바로 아래에 다음 코드를 추가합니다. 

$config->set('URI.AllowedSchemes', array('http' => true, 'https' => true, 'data' => true));

 

 

 

끝입니다. 

 

 만약 문제가 해결되지 않는다면, 캐시 비우기 및 강력 새로고침과 IDE 재시작을 추천드립니다.  

 

 

 

 

 

---

3.  원인 분석

 

HTML Purifier

 

 HTML Purifier는 웹 PHP 서비스 개발 시, XSS(cross-site scripting) 취약점을 보안하기 위해 HTML을 필터링 하는 라이브러리입니다.

 

 게시판의 글 제목이나 글 내용 등에 script, mouse 이벤트, Error 등을 삽입하여 원하는 정보를 얻어내거나 공격하는 것을 방지합니다. 그래서 안전한 속성, 특정 이벤트, 태그 등만을 허용합니다. 

 

 CKEditor4 내에서 로컬 이미지를 삽입하면, 자동적으로 이미지가 Base64 String 값으로 변환되어 삽입됩니다.

 

 Editor 내에 이미지를 삽입하는 것은 가능할 수 있으나, 문제는 게시글을 등록할 때 purify 함수가 사용됩니다. 

이 과정에서 purify 함수가 인코딩된 Base64 String 값을 필터링하는 것 같습니다.

 

 $config->set('URI.AllowedSchemes', array('http' => true, 'https' => true, 'data' => true));

위 코드에서 'data' => true로 인하여 Base64 이미지를 등록할 수 있게됩니다. 

 

 이슈는 해결하였지만 보안적인 측면에서는 미흡한 부분이 있습니다.

장단점이 존재하는 해결방법입니다. 

 

 

장점 

 

- 별도의 이미지 파일이 필요 없습니다. Base64 인코딩된 String 값 자체가 이미지이기 때문에 별도의 이미지 파일이 없어도 브라우저에서 이미지를 렌더링 합니다. 

- 브라우저가 이미지를 렌더링할 때, 문서 로딩이 끝난 후에  이미지를 렌더링합니다. 네트워크가 좋지 않으면 이미지가 로딩이 되지 않는 경우가 발생할 수 있는데, Base64 인코딩 이미지를 삽입하면 문서를 로딩할 때 Base64 이미지도 로딩되기 때문에 이러한 이슈가 사라집니다. 

 

단점 

 

- 용량이 커지기 때문에 DB에 부하가 걸릴 수 있습니다. 

- 이미지 사이즈가 크게 되면, Base64 String 길이가 엄청나게 길어지는데, 이러면 소스의 가독성이 떨어질 수 있습니다. 

- Base 64 인코딩 이미지를 많이 삽입할 경우, 문서 자체를 로딩하는데 많은 시간이 소요되기 때문에 속도 저하가 발생할 수 있습니다.

 

 

Base64

 

 "Base64"는 64진법이라는 뜻입니다. 8비트 이진 데이터(예를 들어 실팽 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념입니다. 

 

 

 

 

 

---

피드백 환영합니다.