개발 과정 리뷰 -7- ejs와 html escape 개념

ejs에는 ejs문법에서 html로 파싱할 때, 변수를 사용하는 두 가지 방법이 있다.

 

하나는 <%- (변수) %> 이고, 다른 하나는 <%= (변수) %> 이다.

 

이 둘의 차이점은  <%- (변수) %>는 html escape를 수행하지 않고, <%= (변수) %>는 html escape를 수행한다는 점이다.

 

#1 Html escape란?

웹 어플의 보안 기술 중 하나로 쉽게 이야기해서 html문법으로 인식되는 기호들을 변환처리하는 것이다.

<는 &lt로 대체하는 등의 변환을 거친다.

이렇게 해야 html에서 JS를 추가하여 실행하는 그런 해킹을 막는 기술로서 나왔기 때문에 보안기술 중 하나로 취급된다.

 

#2 이번 프로젝트에서...

이번 프로젝트에서 입력받은 문서를 html형태로 변환해서 넣어주는 기능이 있는데,

해당 기능을 사용할 때

const data = "<h1 class='word__title'/> 글라골문자 </h1>"

위와 같은 변수를 <%= data %> 를 사용하니 태그까지 그대로 출력되고,

 

<%- data %>를 사용하니 html로 변환되어 나오길래 찾아보고 정리하게 되었다.

 

#3 추가적으로 innerHTML과 innerText

js에서 innerHTML은 html escape를 실행하지 않고, innerText는 html escapte를 실행한다.