innerHTML , innerText , appendChild

innerHTML

---

• DOM 객체의 Property로 존재한다.
• 특정 노드의 내부 문자를 가져올때 html 태그를 태그로 인식
• 문자열을 노드로 교체하는 단계가 있어 브라우저가 문자열을 파싱하고 노드 만들고 다시 렌더링하는 과정을 거치게 된다
• 노드를 직렬화하여 할당하는 방식
• XSS 공격에 취약하다.

 

XSS ( Cross-Site Scripting )
 웹 애플리케이션에서 많이 나타나는 취약점이다.
관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점 이다.

사용 예시 : https://tecoble.techcourse.co.kr/post/2021-04-26-cross-site-scripting/

XSS 방지 방법
    XSS 공격은 스크립트를 삽입하는 방식으로 발생하기 때문에 기본적으로 스크립트 태그를 사용한다.
따라서,  < 와 > 같은 문자를 필터링 해주는 방법으로 방어 할 수 있다.

 

 웹 브라우저가 innerHTML 을 XML DOM 구조로 본다.

let element = document.querySelector('.test');
element.innerHTML = '<a href=javascript: alert('테스트')>';
element.innerHTML += '테스트중입니다.';
element.innerHTML += '</a>';

위와 같은 코드에서 웹 브라우저는 innerHTML을 XML DOM 구조로 보기 때문에,

처음 <a> 태그에 대한 닫히는 태그 </a> 가 자동으로 삽입이 된다.

 

 

innerText

---

• 특정 노드에 렌더링 된 텍스트를 읽어올때 유용하다. (html 태그를 문자로 인식)
• 시작 태그와 종료 태그 사이에 있는 텍스트를 설정할 수 있다.

 

 

appendChild

---

• appendChild는 DOM 객체의 Method이다.
• 인자를 DOM 객체를 받아 해당 객체의 자식리스트 맨 마지막에 더해주는 기능을 한다.
• element 개수만큼 매번 새로 할당