[뷰(Vue)] CKEditor5 태그 필터링

CKEditor는 html 태그를 포함하여 데이터를 저장하기 때문에 사용자가 태그를 삽입할 경우 그대로 저장된다.

물론 태그 빼고 저장할 수는 있지만 그러면 툴바를 사용하는 의미가 퇴색된다고 생각한다.
(본문 꾸미기를 매우 중요하게 생각하는 타입..)

그래서 XSS(Cross site scripting)를 막기 위해, 허용 가능한 태그들을 따로 정의해두는 것이 좋다.

나는 클라이언트와 서버 모두에서 처리해 주었다.

---

먼저 CKEditor에서 특정 태그만 허용하는 기능을 자체적으로 제공해 주기 때문에, 클라이언트 측 처리는 매우매우 진짜 간단하다.

CustomEditor.create(document.querySelector('#editor'), {
      allowedContent: 'p; strong; i; u; s; span; ul; ol; img;'
})

allowedContent로 원하는 태그들만 넣어주면 된다!

본인이 사용하는 툴바의 태그들을 확인하고 추가하면 끝.

---

반응형

다음으로 서버에서 처리하는 것은 라이브러리를 사용했다.

내가 사용한 것은 'OWASP HTML Sanitizer' 이다.

라이브러리의 종류는 다양하니 다른 것을 사용해도 된다.

https://central.sonatype.com/artifact/com.googlecode.owasp-java-html-sanitizer/owasp-java-html-sanitizer

Maven Central: com.googlecode.owasp-java-html-sanitizer:owasp-java-html-sanitizer

최신 버전 확인 후 의존성 추가하기!

<!--OWASP HTML Sanitizer-->
<dependency>
    <groupId>com.googlecode.owasp-java-html-sanitizer</groupId>
    <artifactId>owasp-java-html-sanitizer</artifactId>
    <version>20211018.2</version>
</dependency>

그리고 태그 필터 관련 클래스를 하나 만들어 준다. 

import org.owasp.html.HtmlPolicyBuilder;
import org.owasp.html.PolicyFactory;

public class TagFilterUtil {
    private static final PolicyFactory POLICY = new HtmlPolicyBuilder()
            .allowElements("a", "p", "div", "img", "figure", "strong", "i", "u", "s", "span", "ul", "ol")
            .allowUrlProtocols("https")
            .allowAttributes("src", "href").onElements("a", "img")
            .requireRelNofollowOnLinks()
            .toFactory();

    public static String filter(String input) {
        return POLICY.sanitize(input);
    }

}

allowElements에 아까 클라이언트 측에서 등록한 것과 같이 허용할 태그들만 넣어준다.

보안을 위해 프로토콜은 https 만 허용하도록 했다.

그리고 이 메소드를 가져다가 사용하면 끝~~

@PostMapping("/writing")
public ResponseEntity<ResultModel> registWriting(@RequestParam("content") String content) {

    // 태그 필터링
    content = TagFilterUtil.filter(content);
    
 }