tinymce 에서 svg 처리

tinymce에서는 보안상의 이유로 svg 업로드를 지원하지 않는다.

SVGs (Scalable Vector Graphics) are not supported in TinyMCE to protect our users and their end-users. SVGs can be used to perform both client-side and server-side attacks.

 

문제는 tinymce 이미지 플러그인에서 기본적으로 제공하는 file picker의 accept 속성이 image/*로 고정되어 있다는 점이다. automatic upload를 사용할 경우 file_picker_callback을 커스텀할 수 없기 때문에 accept속성을 수정할 수 없고, svg를 선택할 수 있게 된다. 이 때, svg를 선택해도 아무 오류도 표시되지 않는다.

 

내가 생각한 해결책은 다음과 같다.

1. image_file_types에 svg를 추가한다. image_file_types는 이미지 업로드 플러그인이 취급하는 타입을 정의한다. (accept속성은 변화시키지 않는다.) 즉, image_file_types에 svg를 추가해주지 않으면 아예 예외적인 타입이 되어 어떤 콜백도, 오류도 발생하지 않는다. 

2. image_upload_handler에서 svg에 대한 에러 처리를 한다.

 if (blobInfo.blob()?.type === 'image/svg+xml') {
    tinymce.activeEditor.windowManager.alert(
       "svg를 업로드할 수 없습니다.",
       () => tinymce.activeEditor.windowManager.close() // 이미지 업로드창 닫기
    )
    return '' // 추가 에러 모달을 띄우지 않기 위해 빈 Url 반환
 }