textContent 와 innerHTML 차이점 ❓

textContent와 innerHTML 은 어떨 때 어떻게 사용해야 할까?

textContent 

: 단순히 텍스트를 읽고 쓰는 속성으로 노드와 그 자손의 텍스트 콘텐츠를 표현한다. MDN 사이트의 예제를 한번 보자.

 

<div id="divA">This is <span>some</span> text!</div>

 

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'

 

document.getElementById('divA').textContent = 'This text is different!';
// The HTML for divA is now:
// <div id="divA">This text is different!</div>

 

이렇게 HTML 에서 textContent를 사용하면 요소의 텍스트 콘텐츠를 가져오거나 텍스트 내용을 설정할 수 있다.

 

 

 

innerHTML

innerHTML은 요소 내에  HTML태그를 포함한 string을 설정할 수 있는 속성으로 이번에도 MDN 사이트의 예시를 한번 살펴보겠습니다.

 

document.documentElement.innerHTML = "<pre>" +
         document.documentElement.innerHTML.replace(/</g,"&lt;") +
            "</pre>";

 

즉 단순 String 만이 아닌 HTMl 코드도 표기되어 있기 때문에 순수 textContent보다 속도가 미미하게 느리다.

textContent는 HTML로 분석할 필요가 없기 때문에 textContent의 성능이 더 좋습니다. 뿐만이 아니라 textContent는 XSS공격의 위험이 없습니다. 

 

즉, innerHTML의 경우 공격에 취약하다는 단점으로 인해 사용자에게서 정보를 받아올 경우 사용하는 것을 피하는게 좋습니다.

 

 

 

👉XSS (Cross-site scripting) 

: Cross-site scripting (XSS) is a security exploit which allows an attacker to inject into a website malicious client-side code,

게시판이나 웹 메일 등에 자바 스크립트와 같은 스크립트 코드를 삽입 해 개발자가 고려하지 않은 기능이 작동하게 하는 치명적인 웹 해킹 공격 기법. 대부분의 웹 해킹 공격 기법과는 다르게 클라이언트 즉, 사용자를 대상으로 한 공격이다.