[Vanilla JS] value, innerText, textContent, innerHTML의 차이점

<문제 상황>

 지금까지는 대부분 innerText 속성만으로 값을 가져오고 변경했었다. 하지만, 사용자가 입력한 값을 저장하고, 다시 input창을 비우려고 하는데 innerText속성 값의 변경으로는 비워지지 않는 현상이 발생했다. textContent 속성도 이용해보았으나 실행되지 않았고, 오직 value 속성을 통해서만 창이 비워지는 것을 확인하였다. 이러한 상황에서 innerHTML까지를 포함한 네 개의 속성의 차이점에 대해 궁금해졌다.

 

 

<결론 : 이하 참고>

.value

# input과 같은 form의 요소의 값을 가져오고자 할때 사용. 

 

.innerText

# 마크업 언어가 적용된 상태로 텍스트를 가져온다. 즉, 사용자에게 보이는 텍스트만을 가져온다.

<div> 
	Hello <span style="display:none"> world </span>
</div>

<!-- Hello -->​

 

 

.textContent

# div, span과 같은 태그 내부의 텍스트를 읽고자 할때 사용.
# .innerText와 다르게 사용자에게 보이지 않는 텍스트를 모두 포함하여 가져옴.

<div> 
	Hello <span style="display:none"> world </span>
</div>

<!-- Hello world -->​

 

 

.innerHTML

※주의 - XSS 공격 노출 위험도 ↑↑

# 마크업 언어를 통째로 가져와 핸들링 가능.
# 대상 element의 태그부터 내부에 있는 모든 태그와 텍스트를 포함하여 가져옴.

<div> 
	Hello <span style="display:none"> world </span>
</div>

<!-- <div> Hello <span style="display:none"> world </span> </div> -->​

 

XSS(Cross-Site Scripting) : 사용자로부터의 입력을 받는 input 박스에, 실행 가능한 악성 script를 삽입하여 해당 사이트에 접속하는 다른 사람들을 공격하는 방식이다. 직접적으로 HTML 코드를 삽입할 수 있는, innerHTML과 같은 속성의 사용에 주의가 필요한 이유이다.
사담) 약자는 CSS지만, 웹의 스타일링을 담당하는 Cascading Style Sheets(CSS)와 겹쳐 XSS라고 쓴다.

 

 

---

<느낀점> 

 innerHTML은 지난번에 FontAwesome에서 아이콘을 동적할당 element에 넣기 위해 사용했던 속성 중 하나라 반가웠는데, 이게 XSS 공격에 취약하다는 것은 처음 알게 되었다. 이 사소한 틈을  해커들은 비집고 들어오므로, 웹 개발자는 자신의 코드를 항상 경계하는 꼼꼼함이 필요한 것 같다. 

 

 

<참고 사이트>

https://ninetynine-2026.tistory.com/509 

https://velog.io/@minjae-mj/Javascript-value-vs-textContent-innerHTML-innerText

 

 

[Nico의 바닐라JS로 크롬앱 만들기 - review project]