innerHTML vs innerText vs textContent
1️⃣ innerHTML
요소 안의 HTML 문자열 형태를 가져온다
포함된 HTML, XML(확장가능한 마크업 언어) 마크업을 가져오거나 설정합니다.
요소 안 HTML 수정도 가능하다
- 문법 틀린 HTML은 브라우저가 자동으로 고쳐준다
✔️xml
데이터에 좀 더 특화된 언어
html와 비슷하지만, 데이터를 계층적으로 구조화하고 태그로 둘러싸서 좀 더 데이터 친화적인 마크업 언어이다<body> <p>p 태그</p> <div>div 태그</div> <script> alert( document.body.innerHTML ); // 내용 읽기 document.body.innerHTML = '새로운 BODY!'; // 교체 </script> </body>추가가 아니라 덮어쓰기이다
innerHTML+=기존 내용 삭제, 기존 내용과 새로운 내용 합친 새로운 내용 작성 기존 내용 완전 삭제 후 다시 재작성이라, 다시 로딩된다
랜더링 엔진으로 문자열을 태그로 인식한다
document.body.innerHTML = "";
// 빈 문자열을 넣으면 삭제 가능2️⃣ innerText
html을 포함한 문자열을 입력하면 html코드가 문자열 그대로 요소 안에 포함된다.
사용자에게 보여지는 text를 의미
문자열 속 태그를 태그로 인식하지 않고 그대로 문자열로 인식해서 화면에 보여준다
✔️innerText vs innerHTML
const innerH = document.getElementById('innerH');
innerH.innerHTML = "<div style='color:red'>innerHTML</div>";
console.log(innerH)
// 스타일 적용된 빨간색 폰트로 innerHTML 출력
const innerT = document.getElementById('innerT');
innerT.innerText = "<div style='color:red'>innerText</div>";
console.log(innerT)
// 스타일 적용되지 않은 기본 폰트로 <div style='color:red'>innerText</div> 출력3️⃣ textContent
script, style 상관없이 노드가 갖고 있는 text를 의미
요소 내 텍스트 접근 가능
<태그> 제외, 오로지 텍스트만 추출한다
✔️innerHTML vs textContent
innerHTML을 사용하면 사용자가 입력한 문자열이 ‘HTML 형태로’ 태그와 함께 저장된다textContent를 사용하면 사용자가 입력한 문자열이 ‘순수 텍스트 형태로’ 저장되기 때문에 태그를 구성하는 특수문자들이 문자열로 처리된다
✔️innerHTML vs textContent vs innerText
<div id='my_div'> 안녕하세요? 만나서 반가워요. <span style='display:none'>숨겨진 텍스트</span> </div> <input type='button' value='innerHTML' onclick='getInnerHTML()'/> <input type='button' value='innerText' onclick='getInnerText()'/> <input type='button' value='textContent' onclick='getTextContent()'/>function getInnerHTML() { const element = document.getElementById('my_div'); alert(element.innerHTML); } function getInnerText() { const element = document.getElementById('my_div'); alert(element.innerText); } function getTextContent() { const element = document.getElementById('my_div'); alert(element.textContent); }
innerHTML
innerText
연속되는 공백은 무시하고 한 개의 공백으로 인식한다
textContent
innerHTMLvsinnerTextvstextContent
| 속성 | 설명 |
|---|---|
innerHTML | HTML 태그를 해석하여 삽입 |
innerText | 렌더링된 텍스트만 반환 (CSS 반영) 텍스트 랜더링된 모양 인식 O <div style = ~~>A</div> 이렇게 나올 수도 있다 |
textContent | 모든 텍스트를 반환 (CSS 무관) 텍스트 랜더링된 모양 인식 X |
innerHTML은 XSS 공격 위험이 있으므로, 사용자 입력을 직접 넣을 때 주의해야 한다
✔️XSS 공격 위험(크로스 사이트 스크립팅)
‘웹사이트를 넘어서 공격한다’, ‘삽입된 스크립트를 통해 다른 웹사이트와 정보 교환한다’
원래는 자바스크립트만을 지칭하는데 사용했다
사용자의 브라우저에서 악성 코드가 실행되어 심각한 보안 위험 초래
악성 스크립트를 주입하는 행위
사용자 정보 도용 목적
- 쿠키 스니핑, 악성 스크립트 유포, 키 로거(컴퓨터가 받아들이는 입력 정보 기록), 마우스 스니퍼, 거짓 정보 추가
// HTML <input id='input'></input> <button id='input-btn'>submit</button> <div id='submitted-input'></div> // script document.querySelector('#input-btn').addEventListener("click", (event) => { const userInput = document.querySelector('#input').value document.querySelector('#submitted-input').innerHTML = userInput })만약 사용자가 입력 폼에 스크립트 코드를 입력한다면, 스크립트 내용이 DOM에 추가된다.
<img src="#">
xss문구 출력
❗️xss공격은 스크립트 삽입하는 방식으로 발생한다
✔️XSS 방지 방법
1. < > 이걸 HTML문자< >형식으로 바꾼다
사용자한테는<script>처럼 보이지만, HTML문서에는 <script;> (브라우저에서 일반 문자로 인식되어서 스크립트가 실행되지 않는다)
2. textContent를 사용한다
4️⃣ outerHTML
DOM 안 요소를 교체한다
<div>Hello, world!</div>
<script>
let div = document.querySelector('div');
// div.outerHTML를 사용해 <p>...</p>로 교체
div.outerHTML = '<p>새로운 요소</p>'; // (*)
// 어! div가 그대로네요!
alert(div.outerHTML); // <div>Hello, world!</div> (**)
</script>div.outerHTML=...는 아래와 같은 일을 합니다.
- '문서’에서
div를 삭제 - 새로운 HTML 조각인
<p>A new element</p>을 삭제 후 생긴 공간에 삽입 div엔 여전히 기존 값이 저장되어 있고 새로운 HTML 조각은 어디에도 저장되어있지 않는다
