[Vue] v-html 고찰

1. v-html을 사용하면 안되는 이유

하단의 Security Warning을 보면 동적 렌더링에 v-html을 사용할 경우 xss 취약점으로 이어질 수 있다고 적혀있다.
v-html은 innerHTML 기반으로 구성되어 있어 xss에 취약하다.

출처: vue 공식 문서

Node.textContent vs Node.innerText vs Element.innerHTML

다른 비슷한 기능을 하는 3가지 속성을 가져와서 비교해 보면, 성능면에서 속도면에서도 떨어지고 보안에는 매우 좋지 않다.
https://codepen.io/intae92/pen/mdqxOPL codepen으로 한번 확인해보면 그 차이를 시각적으로 확인할 수 있다.

참고: innerHTML을 쓰면 안되는 이유

2. XSS(Cross Site Scripting)

간단히 말하면, 웹사이트에 악성 스크립트를 주입하여 정보를 탈취하는 등의 악의적인 행위이다.

해커가 사람들이 친밀하고 안전하다고 생각하는 웹사이트에 악성 스크립트를 주입하고, 악성 스크립트가 포함된 게시글을 열람한 피해자들의 쿠키는 해커에게 전송된다. 이를 통해 해커는 피해자의 브라우저에서 스트립트를 실행해 사용자의 세션을 가로채거나, 웹사이트 변조하거나, 악의적인 컨텐츠 삽입하거나, 피싱 공격 등을 시도할 수 있다.

XSS 공격(XSS Attack)은 OWASP Top10(10가지 웹 애플리케이션 보안 취약점 목록)에 포함되어 있을 정도로 자주 발생하는 공격이다. 대부분의 경우 사용자가 글을 쓰고 읽을 수 있는 게시판에서 자주 발생하지만, 사용자의 입력 값을 웹페이지에 표시하는 곳에서도 공격이 발생할 수 있다.
XSS 공격은 악의적인 사용자가 C&C 서버로 리디렉션하기 위해 리디렉션 스크립트를 주입해 중간 경유지로 활용되기도 하며, 사용자의 쿠키를 탈취해 세션 하이재킹(Session Hijacking) 공격을 수행하는 역할을 한다.

참고: 크로스 사이트 스크립팅의 정의 및 공격 유형

3. 해결법

• < > & 같은 기호를 대체하는 < > &로 바꿔서 콘텐츠에서 일부 위험한 태그(예: <script>또는 <img>)를 제거하는 방향을 사용.
• markdown 사용
• 라이브러리 사용
  두 개 다 다운로드 수가 굉장히 많고 믿음직하다.

두 방법 다 보안상으로 취약하거나 유해한 부분을 치환하고 제거하는 방법으로 xss를 예방한다.

1. dompurify

vue-dompurify-html
아래의 참고 url에 들어가면 markdown과 dompurify를 사용한 예시가 나와있다.

참고: Danger of using v-html in Vue applications

2. sanitize-html

vue-sanitize

v-html이용 vs sanitize-html 이용
위 링크에 들어가서 <a style='cursor:pointer;font-weight: bold; color:red;' onclick=alert(JSON.stringify(document))>나를 클릭하세요!</a>를 붙여넣어보자.

v-html을 이용했을 경우

style이 적용되고 클릭 시 alert창이 출력된다.

sanitize-html 이용했을 경우

style, onclick 어떤것도 적용되지 않는다.