Vue 특수문자 HTML 이스케이프 해결하기!

간만에 재미있는 기능들을 찾아보게 되어서 정리를 한다!

현재 VUE를 이용한 공부를 하고 있는데, props와 API를 받아내는 과정에서 HTML이 이스케이프 되어서 특수문자가 깨지는 경우가 많다!

'카카오' 에 대한 유투브 검색 결과이다!

두번째 제목을 보면 따옴표가 ' 가 아닌 '으로 표시되는 것을 알 수 있다! vue라고 해야하나 npm 환경에서는 JS 내장함수인 unescape를 '아무런 사전 준비를 하지 않고서는' 사용할 수가 없어서 처음에는 map을 이용해서 바꿔주려고 했다.

map = { ':"'". amp:'&' ...}

이런식으로 해당되는 특수문자랑 연결하고 replace함수를 써줬는데 다른 특수문자에 대해서는 문제없이 작동하는데 quotemarks 에 있어서는 undefined로 변환이 되어서 실패했다... 이유는 모르겠지만 뭔가 그 맵 안의 다른 따옴표들과 겹쳐서 그런것일까.. 백슬래시를 써줘도 vue에서는 계속 '필요없는 백슬래시 버려' (필요해..필요하다구..) 라는 오류를 던졌다ㅎ

그래서 여러 가지 방법을 그 이후에도 찾아 봤는데 첫번째로 성공한 방법은 v-html 이다.

v-html

중괄호는 일반 텍스트로 데이터를 해석하기 때문에 vue 의 디렉티브 중 하나인 v-html 을 사용하면 rawHTML의 안의 내용을 해석해준다!

<!-- v-html-->
<p v-html="element"></p>

위의 형식으로 쓰면 된다. 엄청 간편하다.

처음에는 이렇게 간단한 방법이 있다는 것에 뼈가 아팠다ㅎ 그런데 다행이도(?) v-html을 함부로 쓰면 안된다고 vue 공식 홈페이지에서 말해줬다ㅎ

https://kr.vuejs.org/v2/guide/syntax.html

여기서 XSS라는 것은 Cross Site-Scripting이라는 것인데 사용자가 받는 웹의 파라미터에 대해 제대로된 검증을 거치지 않는 경우 사이트를 교차해서 악성 스크립트를 발생시키는 공격이다. 즉 자바스크립트같은 스크립트 언어를 삽입해 개발자가 의도하지 않은 기능을 작동시켜 클라이언트를 공격하는 하나의 방식이다. 이러한 공격을 받으면 쿠키를 도용당할 수도 있고, 특정 광고나 피싱사이트로 갈 수도 있고, ActiveX 를 원하지도 않았는데 설치하게 될 수도 있다. 이러한 XSS 취약점에 대응하는 방법으로 HTML 특정 Entity를 바꿔주는 것이기 때문에 v-html을 사용한다면, 그러한 노력이 물거품되는 것! youtube의 경우 신뢰할 수 있는 콘텐츠라서 '가능'은 하지만 절대로 권장되는 방법은 아니라고 한다.

그래서 돌아다니다가 발견한 두번째의 방법이 lodash.unescape이다!

lodash.unescape

위에서 잠깐 '아무 사전 준비 없이' unescape 함수를 쓸 수 없다고 했는데, 사전준비가 바로 lodash 함수를 다운받는 것이다. npm 환경에서 unescape를 사용하려면 lodash를 사용해야한다는 것!

$ npm i lodash.unescape
//혹은
$ npm i lodash

를 다운받도록 하자!

그 후에는 아래 documentation 홈페이지에 있는 것처럼 unescape를 써주면 된다

https://lodash.com/docs/4.17.15

[

Lodash Documentation

_(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primiti

lodash.com

](https://lodash.com/docs/4.17.15)

import _ from lodash

str = _.unescape(str)

의 방식으로 쓰면 된다! 간-편 깔-끔!

js 는 수학이 젬병이라는 치명적인 단점이 있기 때문에 lodash 함수를 워낙 자주 써서 외부 라이브러리이긴 하지만 내부 라이브러리만큼 사용한다고 한다(그럼 코테에도 쓰게 해주세요(?))

그리고 lodash.unescape의 documentation을 보면 기본 HTMl entities에 대한 것만 진행하기 때문에 더뎌ㅓ 대단한 특수문자를 decode하고 싶다면 he 라는 third library를 쓰는 것을 권장했다. 라이브러리는 다르지만 쓰는 방법은 동일!

he.decode

https://github.com/mathiasbynens/he

mathiasbynens/he

 

 

//bash 에서 $ npm i he 진행 해준다!

import he from he

let new_str = he.decode(str)

 

 

 

만약에 그러나 외부 라이브러리를 쓰기 싫다고 하면 마지막으로(내가 아는 마지막) DOMParser라는 방법이 있다!

DOMParser

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

[

DOMParser

The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document.

developer.mozilla.org

](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser)

XML 이나 HTML 소스를 DOM으로 바꿔주는 아이이다. 주의할 것은 html 파일로 바꿔주기 때문에 안의 텍스트만 써야 한다는 것!
innerHTML이 아닌 innerText를 써줘야 한다!(이유는 나도 모른다. innerHTML을 쓰니까 &가 안먹었다...)

let parser = new DOMParser()
let newStr = parser.parseFromString(str, "text/html").body.innerText

그러나 Vue는 기본적으로 가상의 돔을 사용하는 아이이기 때문에 항상 잘되는 것은 또 아니라고 한다. 그러나 그 예시는 찾지 못했으므로 이 방법도 일단은 유효할 것 같다!

결과화면

방법이 다르긴 하지만 결과는 아래와 같다

짜자자잔, 아까는 39쩌고로 나왔던 아이가 single quote mark 로 잘 나온다!

(첫번째 비디오하니까 갑자기 tmi 요즘 노후대책으로 주식사는중.. 40년 묵힌다..)

간만에 여러가지 해결 방법 사용해서 머리를 쓴 기분이다..