당신이 innerHTML을 쓰면 안되는 이유

raram2·2019년 12월 6일
2

요약

textContent 중심으로 본 innerHTML, innerText 와의 장단점 비교

프로퍼티textContentinnerTextinnerHTML
raw textrendered textHTML parsed text
성능좋음보통나쁨
보안--취약

textContent

textContent의 값은 식별자 노드의 내부 콘텐츠를 text/plain 으로 파싱(Parsing)한 결과입니다. 즉, 해당 요소 내부의 원시 텍스트(raw text) 입니다. 그래서 다른 프로퍼티들에 비해 파싱이 빠릅니다.

참고 : Node.textContent | MDN

innerText

innerText 프로퍼티의 값 또한 text/plain 으로 파싱한 결과입니다. 그래서 innerText는 textContent와 혼동하기 쉬우나, 중요한 차이점이 있습니다. innerText의 값은 원시 텍스트가 최종적으로 (화면에) 렌더링 된 모습, 예를 들어 내용 숨김이나 줄바꿈 같이 의도적인 스타일링이 들어간 후의 모습이 됩니다.

참고 : Node.innerText | MDN

또한 IE 8 이하에서는 textContent를 지원하지 않았기 때문에, innerText는 태생적으로 IE 엔진에 적합하게 만들어졌던 프로퍼티입니다. 실제로 innerText만 보았을 때 다른 브라우저보다 IE 환경에서 성능이 더 좋습니다.

참고 : innerText vs textContent

innerHTML

innerHTML 프로퍼티의 값은 text/html으로 파싱한 결과입니다. 그래서 상대적으로 파싱이 느립니다. (사실 큰 차이는 아닙니다.)

하지만 더 큰 문제는, innerHTML가 대표적인 XSS(Cross-Site Scripting) 공격에 취약한 사례로 언급된다는 점입니다. HTML5에서는 innerHTML과 함께 삽입된 <script> 태그가 실행되지 않도록 지정했지만, 여전히 다른 공격 루트들은 방어하지 못합니다. 그래서 프로젝트가 보안 점검을 거치게 되는 프로젝트인 경우, innerHTML을 사용하면 코드가 거부 될 가능성이 높습니다.

참고 : Element.innerHTML | MDN

결론

textContent

가급적 textContent를 사용하는 것이 좋습니다. 성능과 보안에 강점이 있고, 결과적으로 해당 노드의 raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문입니다.

innerText

특정 노드에 렌더링 된(화면에 보이는 그대로의) 텍스트를 읽어올 때 유용합니다. 하지만 내부에 특별히 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않습니다. 단, IE(IE8 이하) 환경을 중점으로 고려한 프로젝트라면 textContent 대신 사용하도록 합니다. 😇

innerHTML

HTML Parsing이 필요한 문자열에만 사용하도록 합니다. 그게 아니라면, 성능상 좋지 않고 XSS 공격에도 취약하므로 innerHTML은 사용하지 않는 것이 좋습니다.

※ 참고로 innerHTML을 우회하여 사용하는 방법도 있습니다.
🔗sanitizeHTML

마치며

타인의 코드를 재활용하는 경우, 그 원작자가 전문가라는 믿음이 전제로 있다 보니 맹목적으로 따라 할 경우가 많았습니다. 하지만 그 코드가 나의 사용 맥락과 다를 수도 있고, 혹은 그 코드가 처음부터 틀린 것일 수도 있습니다. 비록 작동은 잘하더라도, 그 원리를 알고 쓰는 사람과 아닌 사람 간에 차이는 후에 문제가 생길 때 해결할 수 있는 가에서 드러날 것으로 생각합니다. 이번 포스팅과 같이, 비판적으로 코드를 볼 수 있도록 많은 경험을 쌓아 나가야겠습니다.

더 알아보기


profile
조금씩, 꾸준히, 그리고 성의있게

0개의 댓글