크로스 사이트 스크립팅 (XSS) - html tag

Cross-site Scripting (XSS)

설명

크로스 사이트 스크립팅(XSS) 취약점은 사용자의 입력값이 적절하게 인코딩되지 않은 상태로 HTML 템플릿 문자열에 포함될 때 발생합니다. 이런 경우, 공격자가 악의적인 스크립트나 HTML 태그를 입력값에 삽입할 수 있으며, 이 코드가 사용자 브라우저에서 실행되어 정보 유출이나 세션 탈취 등의 피해가 발생할 수 있습니다.

잠재적 영향

• 개인정보 유출: 사용자의 쿠키, 세션, 입력 정보가 탈취될 수 있습니다.

• 사이트 변조: 공격자가 악의적인 HTML/스크립트를 삽입하여 사이트의 정상적인 동작을 방해하거나 피싱을 유도할 수 있습니다.

해결 방법

• 사용자 입력을 HTML 템플릿에 삽입하기 전 반드시 HTML 이스케이프를 적용해야 합니다.

• 템플릿 엔진 내장 함수나 외부 라이브러리(예: DOMPurify 등)를 사용해서 사용자 입력값을 자동으로 인코딩하세요.

• 가능하다면 innerHTML 대신 textContent, createElement, setAttribute 등을 사용해 DOM을 조작하세요.

취약한 코드 및 안전한 코드 예시

취약한 코드

const userInput = '<img src="x" onerror="alert(1)">'; // 악의적인 입력
const message = `<div>${userInput}</div>`;
document.body.innerHTML = message;

안전한 코드

function escapeHtml(str) {
  return str.replace(/[&<>'"]/g, function (c) {
    return {
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      "'": "&#39;",
      '"': "&quot;",
    }[c];
  });
}
const userInput = '<img src="x" onerror="alert(1)">'; // 악의적인 입력
const message = `<div>${escapeHtml(userInput)}</div>`;
document.body.innerHTML = message;

설명:

• 취약한 코드: userInput 변수에 들어있는 악의적인 태그나 스크립트가 HTML 템플릿 문자열에 그대로 삽입되어, 브라우저에서 실행될 수 있습니다.

• 안전한 코드: escapeHtml 함수를 통해 사용자 입력값을 HTML로 인코딩하여, 태그나 스크립트가 실행되는 것을 방지합니다. 즉, 입력한 값이 태그로 해석되지 않고 평문으로 출력됩니다.

참조

• CWE-116