XWIKI 첨부파일 확장자 처리
xwiki에서 보안 요건으로 첨부파일의 확장자를 확인 후 업로드 처리 해야 합니다.
처리 방식을 고민하다가, CKEditor를 수정하여 처리한 내역을 정리합니다.
사용한 xwiki 버전 정보는 XWiki 13.10.3 입니다.
CKEditor 설정 변경
If you want to configure the CKEditor globally for all the wikis in your farm then you have to copy the file META-INF/resources/webjars/application-ckeditor-webjar/
/config.js from WEB-INF/lib/application-ckeditor-webjar- .jar to WEB-INF/classes, preserving its path, and modify it. Don't forget that the configuration properties set at wiki level overwrite the global settings.
CKEditor Integration를 확인하면 위와 같은 내용을 확인 할 수 있습니다.
간단하게 해석하면,
모든 위키에 대해 CKEditor를 전역적으로 구성하려면 WEB-INF/lib/에서 META-INF/resources/webjars/application-ckeditor-webjar/
/config.js 파일을 복사해야 합니다. application-ckeditor-webjar- .jar를 WEB-INF/classes로 변환하고 해당 경로를 유지하고 수정합니다. Wiki 수준에서 설정한 구성 속성이 전역 설정을 덮어쓴다는 사실을 잊지 마십시오.
으로, CKEditor의 설정을 수정하기 위해서는 application-ckeditor-webjar-<version>.jar 내부를 수정해야 합니다.
XWiki 13.10.3 기준으로 해당 jar파일 위치는 아래와 같습니다.
${XWIKI_HOME}/data/extension/repository/org%2Exwiki%2Econtrib%3Aapplication-ckeditor-webjar/1%2E58
jar 파일을 다운받고 디렉토리 구조를 확인하면, 아래와 같습니다.
└─META-INF
├─maven
│ └─org.xwiki.contrib
│ └─application-ckeditor-webjar
└─resources
└─webjars
└─application-ckeditor-webjar # ckeditor
└─1.58 # version - config.js
├─adapters
├─lang
├─META-INF
├─plugins # plugins
│ ├─a11yhelp
│ │ └─dialogs
│ │ └─lang
│ ├─autocomplete
│ │ └─skins
│ ├─balloonpanel
│ │ └─skins
│ │ ├─kama
│ │ ├─moono
│ │ │ └─images
│ │ │ └─hidpi
│ │ └─moono-lisa
│ │ └─images
│ │ └─hidpi
│ ├─balloontoolbar
│ │ └─skins
│ │ ├─kama
│ │ ├─moono
│ │ └─moono-lisa
│ ├─clipboard
│ │ └─dialogs
│ ├─copyformatting
│ │ ├─cursors
│ │ └─styles
│ ├─dialog
│ │ └─styles
│ ├─emoji
│ │ ├─assets
│ │ └─skins
│ ├─find
│ │ └─dialogs
│ ├─image2
│ │ └─dialogs # image file upload
│ ├─link
│ │ ├─dialogs # insert file upload
│ │ └─images
│ │ └─hidpi
│ ├─liststyle
│ │ └─dialogs
│ ├─magicline
│ │ └─images
│ │ └─hidpi
│ ├─pastefromgdocs
│ │ └─filter
│ ├─pastefromlibreoffice
│ │ └─filter
│ ├─pastefromword
│ │ └─filter
│ ├─pastetools
│ │ └─filter
│ ├─specialchar
│ │ └─dialogs
│ │ └─lang
│ ├─table
│ │ └─dialogs
│ ├─tableselection
│ │ └─styles
│ ├─tabletools
│ │ └─dialogs
│ ├─widget
│ │ └─images
│ ├─xwiki-dialog
│ ├─xwiki-localization
│ ├─xwiki-macro
│ └─xwiki-resource
├─skins
│ └─moono-lisa
│ └─images
│ └─hidpi
└─vendor
주석으로 표시된 부분이 오늘 첨부파일 처리를 위한 부분입니다.
config.js에 첨부파일의 확장자 처리 옵션을 찾지 못해서 실제 코드에서 수정하였습니다. unminify 웹사이트를 통해서 코드를 보기 쉽게 수정하였습니다.
${XWIKI_HOME}\org%2Exwiki%2Econtrib%3Aapplication-ckeditor-webjar-1%2E58\META-INF\resources\webjars\application-ckeditor-webjar\1.58\plugins\link\dialogs\link.js insert 기준으로 수정을 하면 아래와 같습니다.
... // onChange 추가 처리
{
id: "upload",
label: b.upload,
title: b.upload,
hidden: !0,
filebrowser: "uploadButton",
elements: [
{ type: "file", id: "upload", label: h.upload, style: "height:40px", size: 29 , onChange: function () {
const extensions = ['txt', 'png', 'jpg', 'pdf', 'csv', 'xml', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'jpeg', 'json','svg', 'webp', 'gif', 'apng', 'avif'];
if(this.getValue() && this.getValue() !== ''){
const tmpFileSplit = this.getValue().split('\.');
const fileExtension = tmpFileSplit[tmpFileSplit.length-1];
if(!extensions.includes(fileExtension)) {
this.setValue("");
alert(`Extensions not allow!!
Allow Extensions is [${extensions.join()}]`);
}
}
}},
{ type: "fileButton", id: "uploadButton", label: h.uploadSubmit, filebrowser: "info:url", for: ["upload", "upload"] },
],
},
...
elements 에서 file 타입에 onChnage 이벤트를 추가하여 첨부시 파일의 확장자를 확인하여 처리 하도록 변경하였습니다.
이미지 업로드의 경우도 ${XWIKI_HOME}\org%2Exwiki%2Econtrib%3Aapplication-ckeditor-webjar-1%2E58\META-INF\resources\webjars\application-ckeditor-webjar\1.58\plugins\image2\dialogs\image2.js 파일을 아래와 같이 수정하였습니다.
...
{
id: "Upload",
hidden: !0,
filebrowser: "uploadButton",
label: b.uploadTab,
elements: [
{
type: "file", id: "upload", label: b.btnUpload, style: "height:40px", onChange: function () {
const extensions = ['png', 'jpg', 'pdf', 'xml', 'jpeg', 'json', 'svg', 'webp', 'gif', 'apng', 'avif'];
if (this.getValue() && this.getValue() !== '') {
const tmpFileSplit = this.getValue().split('\.');
const fileExtension = tmpFileSplit[tmpFileSplit.length - 1];
if (!extensions.includes(fileExtension)) {
this.setValue("");
alert(`Extensions not allow!!
Allow Extensions is [${extensions.join()}]`);
}
}
}
},
{ type: "fileButton", id: "uploadButton", filebrowser: "info:src", label: b.btnUpload, for: ["Upload", "upload"] },
],
},
...
이미지의 경우 이미지 파일만 업로드 하도록 수정하였습니다.
전체 파일을 zip으로 압축 후 다시 서버에 업로드 후 xwiki를 재기동하고 브라우져의 캐시를 모두 삭제 후 테스트 하면 아래와 같은 결과를 얻을 수 있습니다.
마치며
다른 방법도 있겟지만, 현재 상황에서 빠르게 처리 하는 방안으로 진행하였습니다.
더 좋은 방안이 있으면 공유 해주세요.