innerHTML 사용하지마!

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다.

---

코드리뷰 중 다음과 같은 피드백을 받았다.

...???innerHTML이 별로구나..처음 알았네요. 피드백을 받기 전까지는 innerHTML이 제 코딩 인생에 전부였지만, 이번을 계기로 innerHTML을 사용하면 안되는 이유와 innerHTML 속성의 대안에 대해 알아 보겠습니다.

 

---

목차

1. Node.textContent vs Node.innerText vs Element.innerHTML
2. 2.XSS(Cross Site Scripting) 크로스 사이트 스크립팅
3. Element.insertAdjacentHTML()
4. innerHTML의 대안
5. 참고

---

1. Node.textContent vs Node.innerText vs Element.innerHTML

웹페이지 텍스트에 접근하는 3가지 속성의 차이점

속성	textContent	innerText	innerHTML
값	raw text	rendered text	HTML parsed text
성능	좋음	보통	나쁨
보안	-	-	취약

 

See the Pen Untitled by intae92 (@intae92) on CodePen.

 

Node.textContent

• textContent의 값은 식별자 노드의 내부 콘텐츠를 text/plain 으로 파싱한 결과이다. 즉, 해당 요소 내부의 원시 텍스트(raw text)이다.
• textContent는 원시 텍스트만 파싱하기 때문에 빠르다.
• textContent는 <scrpt>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져오며 노드의 모든 요소를 반환한다.
• XSS 공격의 위험이 없다.

Node.innerText

• innerText의 값은 text/plain 으로 파싱한 결과이다.
• textContent와의 큰 차이점으로는 최종적으로 화면에 렌더링 된 모습만 반환한다. 즉, 해당 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다.

Element.innerHTML

• innerHTML 속성의 값은 text/html으로 파싱한 결과이다. 그래서 큰 차이는 아니지만 상대적으로 파싱이 느리다
• innerHTML 속성은 요소내에 포함 된 HTML 또는 XML 마크업을 가져온다.
• innerHTML은 대표적인 XSS공격에 취약하다.

2. XSS(Cross Site Scripting) 크로스 사이트 스크립팅

• 웹 해킹 공격 기법 중 하나이다.
• 웹사이트에 악성 스크립트를 주입하는 행위.
• XSS은 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나 웹사이트를 변조, 악의적 콘텐츠 삽입, 피싱 공격을 하는 것을 말한다.
• XSS 공격은 스크립트 언어와 취약한 코드가 공격 대상이다.

3. Element.insertAdjacentHTML()

• insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree안에 원하는 node들을 추가 한다.
• 이미 사용중인 element는 다시 파싱하지 않는다.
• element안에 존재하는 다른 element를 건드리지 않는다
• element.insertAdjacentHTML(position, text);
• position
  • ‘beforebegin’, element 앞에
  • ‘afterbegin’, element 안에 첫번째 child
  • ‘beforeend’ element 안에 가장 마지막 child
  • ‘afterend’ element 뒤에
• text
  • text(인자)는 HTML or XML로 해석될 수 있는 문자열(html code), (DOM) tree에 삽입할 수 있다.

const d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

4. innerHTML의 대안

• 웹페이지 요소의 텍스트 내용만 바꿀 경우에는 Node.textContent 속성을 사용하자!
• 웹페이지에 요소 자체를 삽입할 경우에는 Element.insertAdjacentHTML() 메서드를 사용하자!

 

---

참고

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

 

Element.innerHTML - Web API | MDN

 

Node.textContent - Web API | MDN

 

Node.textContent - Web API | MDN

 

XSS(Cross Site Scripting) 공격이란?

 

 

Element.insertAdjacentHTML() - Web API | MDN

 

크로스 사이트 스크립팅의 정의 및 공격 유형