[Vue] v-html을 사용하면 안된다…?( vue-dompurify-html 변경, XSS공격)

v-html이란?

• vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입되는 데, innerHtml을 업데이트하는 기능이라고 생각하면 된다.
• 즉, 일반 텍스트가 아닌 HTML을 화면에 그리고 싶다면 사용하면된다.
• 하지만, v-html은 신뢰할 수 있는 컨텐츠만 사용을 하고, 사용자가 제공하는 컨텐츠에는 사용하면 안되는데 html을 동적으로 렌더링하면 XSS공격으로 쉽게 이어질 수 있기 때문이다.

XSS(교차 사이트 스크립팅)란?

핵심: 웹사이트에 악성 스크립트를 주입하는 행위를 말한다.

주요 목적: 사용자의 정보를 도용하는 것이다.

공격자가 상대방의 브라우저에 스크립트가 실행되도록하여 아래와 같은 공격을 진행한다.

• 사용자의 세션을 가로챈다.
• 웹사이트를 변조한다.
• 악의적인 콘텐츠를 삽입한다.
• 파싱 공격을 진행하는 것을 말한다.

즉, 스크립트언어와 취약한 코드가 공격 대상이다.

XSS 공격 방식

• 쿠키 스니핑
• 스크립트 암호화 및 우회
• 악성 스크립트 유포
• 키 로거(Key Logger)
• 마우스 스니퍼(Mouse Sniffer)
• 거짓 정보 추가

반사형 XSS

사용자에게 입력 받은 값을 서버에서 되돌려 주는 곳에서 발생한다. 피해자가 직접 스크립트를 실행하도록 유도하기 때문에 1회성 공격이며, 링크를 클릭한 사용자의 쿠키 값을 해커에게 전송하도록 설정되어 있다.

• 예시
  • 피해자에게 입력 받은 검색어를 그대로 표시하는 곳
  • 피해자가 입력한 값을 오류 메시지와 함께 보여주는 곳

영구적 XSS

응용프로그램이나 웹사이트의 모든 HTTP 응답을 감염시키는 공격을 의미한다. 삽입된 스크립트는 데이터베이스에 저장되고, 감염된 게시글을 열람한 사용자들은 쿠키를 탈취당하거나 다른 사이트로 리디렉션되는 공격을 받게 된다.

• 예시
  • 게시판
    • 사용자가 입력한 값이 DB에 저장되고 그대로 화면에 표시되는 곳에서 공격이 발생할 가능성이 높습니다
    • 이유: 사용자의 입력 값을 검증하지 않기 때문에 발생한다.

v-dompurify-html란?

DOMPurify는 HTML, MathML, SVG를 위한 DOM 전용으로 제작된 도구이며, 위에 설명한 XSS 삭제 라이브러리라고 할 수 있습니다. JavaScript로 작성되었으며 모든 최신 브라우저(Safari(10+), Opera(15+), Edge, Firefox 및 Chrome, Blink, Gecko 또는 WebKit 등)에서 작동합니다

아래의 내용을 방지합니다.

• XSS 공격 방지
• DOM Clobbering 공격 방지
  • 소프트웨어 공학에서 의도적,비의도적으로 특정 메모리나 레지스터를 완전히 덮어쓰는 현상을 의미합니다.
• jQuery를 통한 XSS 방지
• 구조적 손상 방지
• Prototype Pollution으로부터 안전
  • 공격자가 객체를 수정하여 모든 객체에 애플리케이션 전체를 변경하는 것
  • 공격자는 JavaScript 객체의  ' proto ' 속성을 통해 접근할 수 있습니다. 객체를 변경하면, 변조 후 생성된 객체를 포함하여 실행 중인 애플리케이션의 모든 JavaScript 객체에 적용됩니다.

결론

기존 코드에서는 v-html로 에디터에서 등록된 내용을 불러와 동적으로 HTML에 적용하고 있었는데, 이 부분이 XSS 공격에 취약했다는 점을 알게 되었고 이 부분을 보완하기 위해서 vue-dompurify-html로 변경하였습니다.

 

 

 

참고자료

Vue.js

 

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

 

 

Prototype pollution: The dangerous and underrated vulnerability impacting JavaScript applications

 

vue-dompurify-html