[Vue3] v-html 안쓰고 줄바꿈 처리하기 (typescript warning: 'v-html' directive can lead to XSS attack)

이슈

'v-html' directive can lead to XSS attack

테이블 th 에 제목이 데이터로 들어오는데, v-text로 썼더니 br태그는 그대로 출력되고 \n은 줄바꿈이 되지 않았다.
그래서 v-html로 바꾸어 썼더니 XSS 공격에 약하다고 타입스크립트에서 에러가 떴다.

 

 

해결

1. CSS로 해결 (white-space: pre-line)

해당 th 에 css로 white-space: pre-line 하고 \n으로 바꿔주었더니 정상적으로 줄바꿈이 되었다.

 

2. \n 기준으로 split해서 배열만들고 for문 돌리기

<template 
  v-for="(text, index) in customText(header.text)" 
  :key="index"
>
  <span class="th-text ellipsis">
    {{ text }}
  </span>
  <br v-if="index !== 0">
</template>

<script>
     const customText = (text: string) => {
        const splitArr = text.split('\n');
        return splitArr;
      }
</script>

'마스터\n셀러' 라는 데이터라면 split을 사용하여 ['마스터', '셀러'] 로 쪼갠 후
html에서 v-for로 반복을 돌려서 첫번째가 아니면 뒤에 <br>을 붙여주는 방식으로 해결이 가능하다.

** 여기서 그냥 하나의 데이터라면 바로 computed로 해결이 가능하지만 이 소스에서는 header.text의 header도 반복되는 row안의 header라서 함수로 처리하였다.