사용자 문자열을 HTML로 실행하지 않고 안전하게 화면에 표시합니다.
textContent는 입력을 글자로 취급하지만 innerHTML은 마크업으로 해석합니다. 신뢰할 수 없는 입력을 innerHTML, insertAdjacentHTML, eval, Function에 전달하면 XSS로 이어질 수 있습니다. HTML 입력을 꼭 허용해야 한다면 검증된 sanitizer와 엄격한 허용 목록이 필요합니다.
userInput에는 이미지 로딩에 실패하면 onerror 속성의 스크립트를 실행하는 img 태그가 문자열로 들어 있습니다. textContent에 대입했기 때문에 브라우저는 이 값을 태그로 해석하지 않고 꺾쇠괄호까지 보이는 글자로 출력하며, img 요소가 만들어지지 않으니 x라는 주소로 요청이 가지 않고 onerror도 실행되지 않습니다.
외부 입력과 실패가 정상 흐름을 깨뜨릴 수 있는 경계에서 사용합니다. 오류를 숨기지 말고 사용자에게 필요한 안내와 개발자가 추적할 정보를 분리하세요.
replace로 script 태그만 지우는 방식은 다양한 이벤트 속성, URL, SVG 우회 방법을 막지 못합니다. 직접 sanitizer를 만들지 마세요.
직접 바꿔보세요textContent 출력과 정적이며 신뢰할 수 있는 innerHTML 사용의 차이를 설명하세요.