innerHTML을 통한 XSS와 방지 방법

el.innerHTML = userInput은 문자열을 HTML로 구문 분석합니다. userInput에 <script> 태그나 이벤트 처리기 속성(onclick, onerror)이 포함되어 있으면 브라우저가 이를 해석하여 페이지에서 공격자가 제어하는 코드를 실행합니다.

사용자 데이터를 HTML에 삽입하는 모든 코드(서버 템플릿, 클라이언트 측 렌더링)는 데이터가 이스케이프되지 않으면 XSS 위험이 있습니다. API 응답으로 innerHTML을 구성하는 단일 페이지 앱은 특히 취약하며, 해당 응답에 사용자 콘텐츠가 포함될 때 위험이 커집니다.

div.innerHTML = `Welcome, ${user}`를 통해 설정한 사용자 이름 "Bob<img src=x onerror=alert(1)>"은 img 로드에 실패할 때 alert(1)을 실행합니다. 동일한 페이로드를 일반 텍스트(textContent 사용)로 처리하면 브라우저가 태그가 아닌 문자로만 인식하므로 안전합니다.

textContent는 텍스트만 설정하므로 HTML 특수 문자가 태그가 아닌 리터럴 문자로 표시됩니다. 이는 대부분의 경우에 적합한 도구입니다. 텍스트가 아니라 마크업을 실제로 렌더링해야 할 때만 innerHTML로 전환하십시오.

사용자 데이터로 요소를 만들려면 createElement와 textContent를 사용하여 구성하십시오: const li = document.createElement("li"); li.textContent = name; ul.appendChild(li);. 결과 구조는 innerHTML로 만든 것과 동일하지만, 설계상 XSS로부터 안전합니다.

서버에서 생성된 신뢰할 수 있는 HTML(직접 만든 템플릿의 출력, 신뢰할 수 있는 편집기에서 정제된 서식 있는 텍스트)에는 innerHTML을 사용해도 괜찮습니다. 신뢰할 수 없는 출처의 데이터에는 정제 없이 직접 적용하지 마십시오.

사용자가 서식 있는 텍스트를 제출하는 경우(댓글 편집기, 마크다운 렌더링), innerHTML을 설정하기 전에 정제하십시오: el.innerHTML = DOMPurify.sanitize(richHtml). DOMPurify는 위험한 태그와 속성을 제거하면서 <b>, <em>, <a>와 같은 안전한 서식은 유지합니다.

el.insertAdjacentHTML("beforeend", html)은 HTML 문자열을 구문 분석하므로 innerHTML과 동일한 XSS 공격 표면을 가집니다. 규칙도 같습니다. 사용자 데이터를 직접 전달하지 말고 정제하거나 DOM 메서드를 사용하십시오. document.write도 마찬가지이지만, 이제는 누구도 사용해서는 안 됩니다.

React, Vue, Svelte, Angular는 모두 기본적으로 삽입된 텍스트를 이스케이프하므로 {name}은 안전합니다. 이들은 이스케이프를 우회하는 기능을 제공합니다(React의 dangerouslySetInnerHTML, Vue의 v-html). 이러한 기능은 동일한 XSS 위험을 가지므로 정제와 함께 신중하게 사용하십시오.

속성 값도 공격 경로가 될 수 있습니다. url="javascript:alert(1)"인 <a href={url}>은 클릭할 때 실행됩니다. 사용자 입력을 href, src 또는 URL을 담는 다른 속성에 넣기 전에 URL 스킴별로 검증하십시오(http:, https:, mailto:, tel:만 허용).

최신 브라우저는 신뢰할 수 있는 형식을 지원합니다. CSP를 require-trusted-types-for 'script'로 구성하면 innerHTML이 원시 문자열을 거부하고, 정책으로 감싼 값만 통과합니다. 이를 통해 개발자의 주의가 아니라 API 자체로 XSS를 방지할 수 있습니다.

어떤 단일 계층도 충분하지 않습니다. 서버에서 입력을 검증하고, 렌더링할 때 출력을 이스케이프하며, 삽입된 스크립트를 차단하는 CSP를 적용하고, 원시 문자열을 거부하는 신뢰할 수 있는 타입을 사용하며, innerHTML을 사용하는 모든 부분을 보안 검토로 확인하십시오. 계층화된 방어는 어느 한 계층에 버그가 있어도 견딜 수 있습니다.

el.textContent = userInput은 XSS로부터 안전한데 el.innerHTML = userInput은 왜 위험합니까?

사용자 입력에 innerHTML을 사용하는 것은 고전적인 XSS 공격 벡터입니다. 텍스트에는 textContent를 사용하고, 구조를 만들 때는 createElement+textContent를 사용하며, 서식 있는 HTML이 필요할 때는 DOMPurify를 사용하십시오. 속성 값에 사용할 URL 스킴을 검증하십시오. CSP와 신뢰할 수 있는 타입을 함께 적용하여 코드 검토에서 놓친 버그를 무력화하십시오. 최신 프레임워크는 기본적으로 이스케이프하므로, 안전하지 않은 우회 기능은 드물게 사용하고 반드시 검토하십시오.