[ Vue ] v-html 사용을 지양해야 하는 이유

 

 

게시글의 내용은 mkEditor로 작성되어 저장된 html이다.

그렇기 때문에 이를 게시글 상세 페이지에 보여주기 위한 방법을 고민했는데, 그 중 가장 간단한 것이 div 태그에 v-html을 바인딩하는 것이다.

그러나 v-html은 사용이 지양되고 있다.

 

그 이유는 XSS 공격 위험 때문이다.

우리가 렌더링하는 데이터의 경우 분리된 관리자페이지에서 작성 및 수정이 이뤄지기 때문에 신뢰할 수 있는 컨텐츠라고 생각했지만, 혹시 모를 위험에 v-html은 떠나보내줬다.

 

 

대신 q-editor을 사용해서 간단하고 가볍게 html 내용을 출력했다.

내가 필요한건 오직 html을 읽는 것 뿐이기 때문에 readonly로 사용했으며, toolbar을 지워버렸다.

<q-editor
  v-model="content"
  readonly
  :toolbar="[]"
/>

굉장히 심플한 형태로 바인딩할 데이터, readonly 속성, 비워둔 toolbar만 옵션으로 줬다. 

이렇게 v-html과 동일한 동작을 수행했다.

 

 

 

 

 

---

Vue.js

Editor (WYSIWYG) | Quasar Framework