innerHTML ? innerText ? 삐--- textContent를 지향하자

코딩을 하면서 더 좋은 코딩을 하고 싶은 것에 대한 욕심이 생긴다..

이 글도 그 과정 중 하나...

 

바로 본론으로 가보자ㅏㅏㅏ

 

우선, 한눈에 보기 편하게

textContent, innerText, innerHTML 을 비교 해보자!

프로퍼티	innerHTML	innerText	textContent
값	HTML parsed text	rendered Text	raw text
성능	나쁨	보통	좋음
보안	-	-	취약

 

innerHTML

innerHTML 프로퍼티의 값은 text/html으로 파싱한 결과.

그래서 상대적으로 파싱이 느리다. (사실 큰 차이는 아님)

하지만 더 큰 문제는, innerHTML가 대표적인 XSS(Cross-Site Scripting) 공격에 취약한 사례로 언급된다는 점!!

HTML5에서는 innerHTML과 함께 삽입된 <script> 태그가 실행되지 않도록 지정했지만, 여전히 다른 공격 루트들은 방어하지 못한다.

그래서 보안 점검을 거치게 되는 프로젝트인 경우, innerHTML을 사용하면 코드가 거부 될 가능성이 매우 높높!!

 

참고 : Element.innerHTML | MDN

 

innerText

innerText 프로퍼티의 값 또한 text/plain 으로 파싱한 결과.

그래서 innerText는 textContent와 혼동하기 쉬운데, 중요한 차이점이 있음!

innerText의 값은 원시 텍스트가 최종적으로 (화면에) 렌더링 된 모습!

예를 들어 내용 숨김이나 줄바꿈 같이 의도적인 스타일링이 들어간 후의 모습이 됩니다.

 

참고 : Node.innerText | MDN

 

또한, IE 8 이하에서는 textContent를 지원하지 않았기 때문에, innerText는 태생적으로 IE 엔진에 적합하게 만들어졌던 프로퍼티.

실제로 innerText만 보았을 때 다른 브라우저보다 IE 환경에서 성능이 더 좋다!

 

참고 : innerText vs textContent

 

textContent

textContent의 값은 식별자 노드의 내부 콘텐츠를 text/plain 으로 파싱(Parsing)한 결과.

즉, 해당 요소 내부의 원시 텍스트(raw text).

그래서 다른 프로퍼티들에 비해 파싱이 빠름!!

 

참고 : Node.textContent | MDN

 

 

결론

textContent

 

가급적 textContent를 사용하는 것이 좋다.

성능과 보안에 강점이 있고, 결과적으로 해당 노드의 raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문!

 

innerText

 

특정 노드에 렌더링 된(화면에 보이는 그대로의) 텍스트를 읽어올 때 유용!

하지만 내부에 특별히 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않다.

단, IE(IE8 이하) 환경을 중점으로 고려한 프로젝트라면 textContent 대신 사용하도록 하자!

 

innerHTML

 

HTML Parsing이 필요한 문자열에만 사용하도록 하자!

그게 아니라면, 성능상 좋지 않고 XSS 공격에도 취약하므로 innerHTML은 사용하지 않는 것이 좋다..

참고로, innerHTML을 우회하여 사용하는 방법도 있음!
🔗 sanitizeHTML

 

마치며

타인의 코드를 재활용하는 경우, 그 원작자가 전문가라는 믿음이 전제로 있다 보니 맹목적으로 따라 할 경우가 많다.

하지만 그 코드가 나의 사용 맥락과 다를 수도 있고, 혹은 그 코드가 처음부터 틀린 것일 수도 있음!

비록 작동은 하더라도, 그 원리를 알고 쓰는 사람과 아닌 사람 간에 차이는 후에 문제가 생길 때 해결할 수 있는 가에서 여실히 드러남!

이번 포스팅과 같이, 비판적으로 코드를 볼 수 있도록 많은 경험을 쌓아 나아가자!!!

 

 

출처: velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

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