2021/06/10 자바스크립트

textContent, innerText, innerHTML

 

---

innerHTML

해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다.

div안에 있는 HTML 전체 내용(태그포함)을 가져오는 것을 확인 할 수 있습니다.

문제는, innerHTML이 대표적인 XSS 공격에 취약한 점입니다.

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

innerText

해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어옵니다.

즉, innerText의 값은 원시 텍스트가 최종적으로 (화면에) 렌더링 된 모습, 예를 들어 내용 숨김이나 줄바꿈 같이 의도적인 스타일링이 들어간 후의 모습이 됩니다.

textContent

innetText와는 달리 <script>나 <style> 태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽습니다.

텍스트의 연속된 공백이 그대로 표현된 것을 확인 할 수 있습니다.

또한, 'display:none'과 같은 스타일이 적용된 '숨겨진 텍스트' 문자열도 그대로 출력되는 것을 확인 할 수 있습니다.

 

<div id="statement">
	안녕하세요          거북이와 <strong>두루미씨</strong>
	<span style="display:none">반갑습니다</span>
</div>

// JavaScript
const statement = document.querySelector('#statement');

statement.innerHTML; // <div id="statement">안녕하세요         거북이와 <strong>두루미씨</strong><span style="display:none">반갑습니다</span></div>

statement.innerText; // 안녕하세요 거북이와 두루미씨

statement.textContent; // 안녕하세요          거북이와 두루미씨반갑습니다