[HTML] One of your code blocks includes unescaped HTML 해결 방법

개요

티스토리(Tistory)에서 코드 블록을 꾸미기 위해 highlight.js를 적용하다가 개발자 도구에서 하단의 경고 표시를 만나게

되었고, 해당 문제는 XSS 등 보안적으로 위험한 부분이기에 해당 부분에 대한 해결 방법에 대해 정리하게 되었습니다.

highlight.min.js:265 One of your code blocks includes unescaped HTML. This is a potentially serious security risk.
highlight.min.js:266 https://github.com/highlightjs/highlight.js/wiki/security
highlight.min.js:267 The element with unescaped HTML:

One of your code blocks includes unescaped HTML 해결 방법

발생 원인

One of your code blocks includes unescaped HTML 발생원인

위 화면에 표시된 JavaScript를 추가했을 때만 발생하였고, HTML 코드에 직접 스크립트를 넣어 발생한 줄 알고,

따로 JavaScript 파일로 만들어 추가했지만 동일한 경고 표시가 재현되었습니다.

 

해결 방법

XSS 등 공격 방법에 대한 방어 코드 작성 방법은 알고 있어 추가하였지만, 해당 문제를 해결하지 못했습니다.

구글링 해본 결과 해결 방법은 매우 간단하였습니다.

<script>
    hljs.initLineNumbersOnLoad({
    singleLine: true
    });
    hljs.configure({languages: []});
    hljs.highlightAll();
    // hljs.configure(); -> 해당 Line이 발생 원인이고, 아래의 코드로 변경 후 해결!!!
    hljs.configure({ignoreUnescapedHTML: true});
    hljs.addPlugin(new CopyButtonPlugin());
</script>

바로 위 코드처럼 {ignoreUnescapedHTML: true}를 추가하니 해결되었습니다.

 

One of your code blocks includes unescaped HTML 해결 완료

위 해결 방법은 highlight.js GitHub에서 찾게 되었습니다.

hljs.configure({ignoreUnescapedHTML: true});

대략적으로 찾아본 결과 위 코드가 highlight.js가 코드 블록 내의 HTML코드를 랜더링 할 때 온전하지 않은 요소 혹은

스크립트를 이스케이프 처리하는 코드라고 합니다.

 

One of your code blocks includes unescaped HTML 해결 완료

아무튼 해당 해결 방법을 적용 후 개발자 도구를 확인하였는데 위에서 발생한 경고 표시를 없앨 수 있었습니다.

 

Reference

[ highlight.js ] One of your code blocks includes unescaped HTML. 해결 참고 문헌

Detect HTML/JS injection attacks and warn users pro-actively · Issue #2886 · highlightjs/highlight.js