웹페이지 텍스트에 접근
JavaScript를 사용해 웹페이지 요소의 텍스트에 접근할 때 Node.textContent, Node.innerText, Element.innerHTML의 3가지 속성을 쓸 수 있다. 이 셋은 비슷하면서도 약간씩 차이가 있다
결과물의 형태
textContent : 원시 텍스트 (raw text)
innerText : 화면에 렌더링 된 텍스트
innerHtml : HTML 문자열
성능비교
textContent > innerText > innerHtml
하지만 실제 성능 차이는 미미하기 때문에, innerText나 innerHTML 속성을 사용한다고 해서 textContent 속성에 비해 성능이 어마어마한 수준으로 저하되는 문제가 생기지는 않는다.
textContent vs innerText
둘다 값이 text/plain 으로 파싱한 결과이다.
innerText는 textContent와 혼동하기 쉬우나, 중요한 차이점이 있다.
innerText의 값은 원시 텍스트가 최종적으로 (화면에) 렌더링 된 모습, 예를 들어 내용 숨김이나 줄바꿈 같이 의도적인 스타일링이 들어간 후의 모습이 된다.
innerHTML 속성을 주의해야 하는 이유
innerHTML은 크로스 사이트 스크립팅3 공격에 취약하다는 보안상의 허점이 있다.
innerHTML 속성은 문자열 자체를 수정할 수 있기 때문에, 악의를 가진 해커가 <script> 태그를 사용해 JavaScript 코드를 작성한 뒤 실행되도록 만들 수 있다.
이를 보완하기 위해 HTML5에서는 innerHTML 속성을 통해 삽입된 문자열에 <script> 태그가 있을 경우 실행되지 않도록 처리했지만, 다른 우회적인 경로는 여전히 열려 있다. innerHTML 속성을 사용하는 경우, 다양한 우회 공격 경로를 방어할 수 있도록 처리해놓아야 한다.
이런 내재적인 취약점 때문에 innerHTML을 사용한 프로젝트는 보안성 검사에서 통과되지 않을 가능성이 높다. 예를 들면, Firefox의 확장 프로그램 심사 절차는 innerHTML이 포함된 코드를 통과시키지 않는다.
innerHTML 속성의 대안
innerHTML 속성은 HTML 문자열을 그대로 붙였다 뗐다 할 수 있다는 점에서 사용 범위가 넓고, 강력한 기능이다.
하지만 그 범용성과 강력함이 역으로 보안 취약점으로 작용한다는 점은 아이러니라 할 것이다.
웹페이지 요소의 텍스트 내용만 바꿀 경우는 textContent 속성을, 요소 자체를 삽입하는 경우는 Element.insertAdjacentHTML() 메서드를 innerHTML 속성의 대안으로 사용하면 된다.
결론
textContent
가급적 textContent를 사용하는 것이 좋다. 성능과 보안에 강점이 있고, 결과적으로 해당 노드의 raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문이다.
innerText
특정 노드에 렌더링 된(화면에 보이는 그대로의) 텍스트를 읽어올 때 유용합니다. 하지만 내부에 특별히 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않다. 단, IE(IE8 이하) 환경을 중점으로 고려한 프로젝트라면 textContent 대신 사용하도록 한다.
innerHTML
HTML Parsing이 필요한 문자열에만 사용하도록 합니다. 그게 아니라면, 성능상 좋지 않고 XSS 공격에도 취약하므로 innerHTML은 사용하지 않는 것이 좋다.
참고자료
당신이 innerHTML을 쓰면 안되는 이유 - velog
Node.textContent - MDN web docs
Node.innerText - MDN web docs
Element.innerHTML - MDN web docs
Element.insertAdjacentHTML() - MDN web docs
