사용자 문자열을 HTML로 실행하지 않고 안전하게 화면에 표시합니다.
textContent는 입력을 글자로 취급하지만 innerHTML은 마크업으로 해석합니다. 신뢰할 수 없는 입력을 innerHTML, insertAdjacentHTML, eval, Function에 전달하면 XSS로 이어질 수 있습니다. HTML 입력을 꼭 허용해야 한다면 검증된 sanitizer와 엄격한 허용 목록이 필요합니다.
코드를 읽을 때는 element.textContent = userInput; 부분부터 찾으세요. 현재 값과 실행 순서를 줄마다 적어 보면 문법을 외우지 않아도 결과를 예측할 수 있습니다.
외부 입력과 실패가 정상 흐름을 깨뜨릴 수 있는 경계에서 사용합니다. 오류를 숨기지 말고 사용자에게 필요한 안내와 개발자가 추적할 정보를 분리하세요.
실행하기 전에 예상 결과를 짧게 적은 뒤 textContent 출력과 정적이며 신뢰할 수 있는 innerHTML 사용의 차이를 설명하세요. 실제 출력이 다르면 콘솔에 처음 나타난 오류와 그 직전 값을 차례로 확인하세요.
replace로 script 태그만 지우는 방식은 다양한 이벤트 속성, URL, SVG 우회 방법을 막지 못합니다. 직접 sanitizer를 만들지 마세요.
직접 바꿔보세요textContent 출력과 정적이며 신뢰할 수 있는 innerHTML 사용의 차이를 설명하세요.