insertAdjacentHTML vs innerHTML 차이점(보안)

 1. 개요

 insertAdjacentHTML과 innerHTML은 웹 개발에서 DOM 요소를 조작하는 데 사용되는 두 가지 중요한 JavaScript 메서드.
 하지만 각 메서드는 작동 방식, 성능, 보안 측면에서 몇 가지 주요 차이점을 가지고 있다.
 여기서는 두 메서드의 차이점을 명확하게 비교 분석하여 개발자가 상황에 맞는 적절한 메서드를 선택할 수 있도록 하자.

 

 2. 작동 방식

1) innerHTML
 ○ 대상 요소의 모든 자식 요소를 제거하고 전달된 HTML 문자열로 완전히 대체
 ○ 마치 요소 내부를 빈 캔버스처럼 비우고 새로운 그림을 그리는 것과 유사
 ○ 이미 존재하는 이벤트 리스너, 데이터 속성 등이 모두 삭제

2) insertAdjacentHTML
 ○ 전달된 HTML 문자열을 대상 요소의 특정 위치에 삽입
 ○ beforebegin, beforeend, afterbegin, afterend 네 가지 위치 중 하나를 선택하여 삽입할 수 있다
 ○ 기존 요소 및 이벤트 리스너, 데이터 속성 등은 유지

 

 3. 성능

1) innerHTML
 ○ 전체 요소를 새로 파싱하고 DOM 트리를 다시 구성하기 때문에 성능이 느릴 수 있다.
 ○ 특히 요소에 많은 자식 요소가 있거나 자주 변경해야 하는 경우 성능 저하가 심각할 수 있다.

2) insertAdjacentHTML
 ○ 기존 요소를 유지하고 새로운 HTML을 삽입하기 때문에 innerHTML보다 성능이 우수하다.
 ○ 특히 자식 요소가 많거나 자주 변경해야 하는 경우 성능 향상 효과가 뚜렷하다.

 

 4. 보안

1) innerHTML
 ○ 악성 코드를 포함하는 HTML 문자열을 전달하면 XSS 공격의 위험이 높다.
 ○ 사용자 입력을 직접 innerHTML에 설정하는 경우 반드시 이스케이핑 처리를 수행해야 한다.

2) insertAdjacentHTML
 ○ innerHTML보다 XSS 공격에 대한 취약성이 낮다.
 ○ 하지만 여전히 악성 코드를 포함하는 HTML 문자열을 전달하면 공격 가능성이 있다.
 ○ 사용자 입력을 insertAdjacentHTML에 사용할 때도 주의가 필요하다.

 

 5. 사용 시나리오

1) innerHTML
 ○ 요소 내용을 간단하게 초기화하거나 전체적으로 변경해야 하는 경우 적합하다.
 ○ 자식 요소의 구조나 이벤트 리스너가 중요하지 않은 경우 사용 가능하다.

2) insertAdjacentHTML
 ○ 요소 내 특정 위치에 새로운 콘텐츠를 삽입해야 하는 경우 적합하다.
 ○ 자식 요소의 구조나 이벤트 리스너를 유지해야 하는 경우 사용 가능하다.
 ○ 성능이 중요한 경우 innerHTML보다 우선적으로 사용하는 것이 좋다.