innerHTML 사용하지마!
안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다.
코드리뷰 중 다음과 같은 피드백을 받았다.
...???innerHTML이 별로구나..처음 알았네요. 피드백을 받기 전까지는 innerHTML이 제 코딩 인생에 전부였지만, 이번을 계기로 innerHTML을 사용하면 안되는 이유와 innerHTML 속성의 대안에 대해 알아 보겠습니다.
목차
- Node.textContent vs Node.innerText vs Element.innerHTML
- 2.XSS(Cross Site Scripting) 크로스 사이트 스크립팅
- Element.insertAdjacentHTML()
- innerHTML의 대안
- 참고
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을 쓰면 안되는 이유
textContent 중심으로 본 innerText 및 innerHTML과의 장단점 비교
velog.io
Element.innerHTML - Web API | MDN
Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.
developer.mozilla.org
Node.textContent - Web API | MDN
Node 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.
developer.mozilla.org
Node.textContent - Web API | MDN
Node 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.
developer.mozilla.org
XSS(Cross Site Scripting) 공격이란?
XSS 란? 웹 해킹 공격 중 XSS라는 공격 기법이 있다. Cross Site Scripting의 약자로 CSS라고 하는 것이 맞지만 이미 CSS가 Cascading Style Sheets의 약어로 사용되고 있어 XSS라 한다. XSS는 게시판이나 웹 메일..
4rgos.tistory.com
Element.insertAdjacentHTML() - Web API | MDN
insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에
developer.mozilla.org
크로스 사이트 스크립팅의 정의 및 공격 유형
크로스 사이트 스크립팅(XSS)은 피해자가 친숙하게 생각하는 사이트에 해커가 악성 스크립트를 주입하는 행위를 말합니다. 크로스 사이트 스크립팅이라는 용어의 의미와 공격 사례, 반사형 XSS,
nordvpn.com