초록
크로스 사이트 스크립팅(XSS)은 여전히 가장 널리 퍼져 있고 위험한 웹 취약점 중 하나입니다. 최신 프런트엔드 프레임워크, SPA(단일 페이지 애플리케이션), 풍부한 써드파티 스크립트 생태계는 기회와 복잡성을 모두 확대합니다. 이 글에서는 OWASP XSS 예방 치트 시트와 최근 학계 및 업계 연구를 통합하여 컨텍스트 인코딩, HTML 살균, DOM XSS에 대한 동적 오염 추적, 파싱-차등 퍼징, CSP(콘텐츠 보안 정책) 및 공급망 제어 등 계층화된 방어 전략을 구성합니다. 또한 다음과 같은 설계를 제안합니다. 원클릭 "XSS 스캔" 자동화 파이프라인, 재사용 가능한 스캔 템플릿, 런타임 계측 및 보고서 생성 기능을 갖춘 펜리전트 내 기능입니다. 이 문서는 엔지니어링 백서나 제품 문서에 직접 포함하기에 적합합니다.
동기 부여
XSS 취약점은 공격자가 정상 웹 페이지에 실행 가능한 스크립트를 삽입하여 사이트의 도메인 권한으로 피해자의 브라우저에서 효과적으로 실행할 수 있게 해줍니다. 이러한 공격은 민감한 데이터(쿠키, 로컬 스토리지)를 유출하거나 무단 작업을 수행하거나 콘텐츠를 훼손할 수 있습니다. (MDN 웹 문서)
수십 년에 걸친 인식과 완화 기술에도 불구하고 XSS는 여전히 지속적인 위험으로 남아 있습니다. 클라이언트 측 렌더링, 동적 JavaScript 프레임워크, 타사 스크립트, 점점 더 복잡해지는 템플릿 시스템의 등장으로 인해 정확성을 보장하기가 더 어려워졌습니다.
이 가이드의 목표
- 권위 있는 OWASP 치트 시트의 실용적인 규칙과 최신 학술 및 엔지니어링 연구를 결합하세요.
- 단일 총알이 아닌 강력한 다계층 방어 아키텍처를 제공합니다.
- 펜리전트가 제공할 수 있는 구체적인 설계를 제시합니다. 원클릭 XSS 검사 기능을 통해 연구와 제품을 연결합니다.
기초: 컨텍스트 인코딩 및 세이프 싱크
XSS 예방의 핵심 원칙은 다음과 같습니다: 신뢰할 수 없는 원시 데이터가 실행 가능한 컨텍스트에 도달하는 것을 허용하지 않습니다. 적절한 인코딩이나 위생 처리 없이 게시할 수 없습니다. 인코딩은 컨텍스트(HTML 본문, 속성, JavaScript 리터럴, CSS 또는 URL)에 적합해야 합니다. 이것이 OWASP XSS 예방 치트 시트의 핵심입니다. (cheatsheetseries.owasp.org)
컨텍스트별 출력 인코딩 규칙
| 컨텍스트 | 안전하지 않은 예 | 안전한 인코딩 / 완화 |
|---|---|---|
| HTML 텍스트 콘텐츠 | <div>${사용자 입력}</div> | HTML 엔티티 인코딩(<, &등) |
| HTML 속성 | <img src="${url}"> | 인용 속성 + 속성 인코딩, URL 체계 유효성 검사 |
| 자바스크립트 리터럴 | <script>var v = '${userInput}';</script> | JS 문자열 이스케이프 (\uXXXX, 이스케이프 따옴표/백슬래시) |
| CSS | <div style="width:${input}px"> | 엄격한 유효성 검사, CSS 이스케이프 또는 동적 CSS 허용 안 함 |
| URL / HREF | <a href="/hackinglabs/ko/${href}/">클릭</a> | 퍼센트 인코딩, 스키마 화이트리스트(http/https), 표준화 |
실제로는 항상 기본 제공되거나 잘 테스트된 인코딩 라이브러리를 선호하세요. 자체적으로 임시 대체물을 롤링하지 마세요.
안전한 싱크 및 위험한 API 피하기
올바른 인코딩을 사용하더라도 특정 API는 본질적으로 위험합니다. 위험한 싱크의 예는 다음과 같습니다:
innerHTML,outerHTMLdocument.write,document.writelneval(),함수()생성자- 인라인 이벤트 핸들러(예
onclick="..."동적 콘텐츠 포함)
안전한 대안을 선호합니다:
.textContent또는.innerText텍스트 삽입용element.setAttribute()(제어되는 속성 이름의 경우)- DOM 메서드(예
appendChild,createElement) 문자열 연결 없이
리치 HTML이 필요한 경우 HTML 위생 처리
사용자가 제공한 콘텐츠에 일부 HTML(예: WYSIWYG 편집기, 마크업이 제한된 댓글)을 포함할 수 있는 시나리오에서는 위생 처리가 필요합니다. 핵심 접근 방식은 다음과 같습니다:
- 화이트리스트 허용된 태그, 속성 및 속성 값 패턴.
- 깨지기 쉬운 사용자 정의 정규식 대신 성숙한 라이브러리(예: DOMPurify)를 사용하세요.
- 주의해야 할 사항 구문 분석 차등 공격소독제의 구문 분석 동작이 브라우저의 HTML 구문 분석기와 다를 수 있으므로 우회가 발생할 수 있습니다.
알려진 연구 결과에 따르면 소독기와 브라우저가 대소문자 마크업을 해석하는 방식이 달라서 대체 토큰화를 통해 이스케이프가 가능하다는 사실이 밝혀졌습니다. ("파싱 차이점" 연구 참조)
런타임 오염 추적을 통한 DOM 기반 XSS 탐지
서버 측 기술은 DOM XSS (클라이언트 측 인젝션), 페이지 로드 후 관련 싱크가 자바스크립트에 있을 수 있기 때문입니다. 동적 오염 추적(신뢰할 수 없는 소스를 표시하고 전파를 감시)은 잘 연구된 방법입니다.
- TT-XSS (R. Wang 등)은 동적 손상 기반 DOM XSS 탐지의 고전적인 구현입니다. (科学直通车)
- 우리 세대에 대해 이야기하기 는 동적 데이터 흐름 분석을 사용하여 표적화된 DOM XSS 익스플로잇을 생성합니다. (ResearchGate)
- 트러스티몬 (2025) 는 실제 앱에서 높은 정확도와 낮은 오탐률로 DOM 기반 XSS를 탐지할 수 있는 실용적인 런타임 모니터링 시스템을 시연합니다. (ACM 디지털 라이브러리)
이러한 시스템은 클라이언트 측 실행을 계측하고, 신뢰할 수 없는 입력(예: URL 해시, 쿼리 매개변수, DOM 요소)에 태그를 지정하며, 위험한 싱크에 도달하는 시점을 감지합니다(예. innerHTML)를 사용하여 스크립트를 실행할 수 있습니다.
한 가지 주의할 점은 런타임 추적에는 성능 비용이 발생한다는 점입니다. 일부 작품은 프리필터로서의 ML/DNN 를 사용하여 오염 추적 오버헤드를 줄일 수 있습니다. 예를 들어, 멜리처 등은 딥러닝을 사용하여 취약할 가능성이 있는 기능을 사전 분류하고 해당 기능에만 오염 추적을 적용할 것을 제안합니다. (contrib.andrew.cmu.edu)
예시 A - 고정(안전 싱크대 사용 텍스트 콘텐츠)
<html>
<head><title>Welcome</title></head>
<body>
<h1>안녕하세요!</h1>
<div id="greeting"></div>
<script>
function getQueryParam(name) {
return new URLSearchParams(window.location.search).get(name);
}
var raw = getQueryParam("name") || "";
// Use textContent to insert as plain text (safe)
document.getElementById("greeting").textContent = raw;
</script>
<p>저희 사이트에 오신 것을 환영합니다.</p>
</body>
</html>이것이 안전한 이유: 텍스트 콘텐츠 는 일반 텍스트를 작성합니다. raw 포함 <script>…</script>를 사용하면 실행되지 않고 텍스트로 렌더링됩니다. 또한 URLSearchParams 는 깨지기 쉬운 인덱스/서브 문자열 구문 분석을 방지합니다. portswigger.net
예제 B - 속성 싱크 및 안전한 URL 처리(href 의사 싱크)
취약한 패턴:
// 취약합니다:
var params = new URLSearchParams(window.location.search);
var target = params.get("url"); // 사용자 제어
document.getElementById("mylink").href = target;
만약 대상 는 자바스크립트 코드이며, 링크를 클릭하면 JS가 실행됩니다.
안전 패턴(유효성 검사 체계):
function safeHref(input) {
try {
var u = new URL(input, window.location.origin);
if (u.protocol === "http:" || u.protocol === "https:") {
return u.toString();
}
} catch(e) { /* invalid URL */ }
return "#";
}
document.getElementById("mylink").href = safeHref(params.get("url"));설명: 새 URL() 정규화; 우리는 http:/https: 스키마를 차단합니다. 이 블록은 자바스크립트:/데이터: 계획. portswigger.net
콘텐츠 보안 정책(CSP): 심층 방어
인코딩과 살균이 주요 방어 수단이지만, CSP는 다음과 같은 기능을 제공합니다. 강력한 2차 방어벽. 논스 또는 해시를 사용하여 잘 구성된 CSP와 함께 엄격한 동적 및 제거 '안전하지 않은 인라인'를 사용하면 XSS 악용을 크게 억제할 수 있습니다.
하지만 함정도 존재합니다:
- 재사용 금지: 일부 사이트는 여러 응답에 동일한 논스를 재사용하여 CSP의 보호 기능을 약화시킵니다. 최근 연구 "웹 보안의 논스"에 따르면 많은 실제 사이트가 이를 사용하고 있는 것으로 나타났습니다. (arXiv)
- 배포 복잡성: 레거시 인라인 스크립트, 타사 라이브러리 및 브라우저 불일치를 지원하다 보면 정책이 느슨해지는 경우가 많습니다.
따라서 CSP는 인코딩과 위생 처리를 대체하는 것이 아니라 보완해야 합니다.
엔지니어링 모범 사례 CI, 린트, 테스트, 모니터링
강력한 XSS 방어를 운영합니다:
- ESLint / 코드 린터허용되지 않는 싱크(innerHTML, eval)의 사용을 금지하거나 플래그를 지정하고, 템플릿 표현식에 컨텍스트 주석을 요구합니다.
- CI의 정적 및 동적 분석:
- JS 모듈을 위한 다중 파일 정적 오염 분석
- 퍼즈 테스트 또는 차등 구문 분석 테스트
- 스테이징 환경에서의 런타임 계측
- 단위/보안 테스트단위 테스트에서 컨텍스트 기반 페이로드를 생성하여 올바른 인코딩이 적용되었는지 확인합니다("자동화된 XSS 취약점 탐지 및 복구" 또는 "단위 테스트를 통한 XSS 탐지"에서와 같이).arXiv)
- 모니터링 및 알림CSP 위반 보고서, 의심스러운 흐름에 대한 계측된 런타임 경고, 인코딩 실패에 대한 로그 메트릭을 수집합니다.
펜리젠트 원클릭 XSS 스캔 디자인
아래는 펜리전트 제품에 포함할 수 있는 제안된 설계 사양입니다. 원클릭 XSS 스캐닝 "플레이북".
작업 워크플로(고급 수준)
- 크롤링 및 JS 렌더링 - 모든 페이지와 JS 기반 경로를 검색하세요.
- 정적 분석 - 소스 코드의 오염 전파를 통해 고위험 싱크와 함수를 찾습니다.
- 템플릿 스캔 - 템플릿화된 스캐너(예: Nuclei)를 사용하여 일반적인 XSS 페이로드를 실행합니다.
- 런타임/동적 스캔 - 헤드리스 브라우징 및 계측을 사용하여 페이로드를 주입하고 스크립트 실행을 탐지합니다.
- 런타임 오염 추적 - 페이지 런타임을 계측하고 신뢰할 수 없는 데이터가 위험한 싱크에 도달하는지 감시합니다.
- 구문 분석 차등 퍼즈 테스트 - 에지 케이스 마크업을 새니타이저 + 브라우저에 피드하고 차이를 감지합니다.
- CSP 및 SRI 감사 - 헤더, 스크립트 태그를 검사하고 논스 재사용, 누락된 무결성 속성을 확인합니다.
- 보고서 생성 - PoC, 위험 등급, 수정 제안을 통해 취약점을 취합하고 선택적으로 PR 패치를 생성합니다.
샘플 핵 템플릿(반영된 XSS)
ID: xss-reflect-basic
정보
이름: 반영된 XSS 기본
작성자: penligent-scan
심각도: 높음
요청
- 메서드: GET
경로
- "{{BaseURL}}?q={{payload}}"
페이로드:
payload:
- ""
일치자
- 유형: 단어
part: body
단어
- ""컨텍스트 인식 페이로드 세트(속성, JS, URL)로 확장하고 헤드리스 검증으로 연결하여 오탐을 줄일 수 있습니다.
샘플 작업 정의(JSON)
{
"이름": "XSS 퀵스캔",
"단계": [
{"id": "크롤링", "유형": "크롤러", "매개변수": {"start_url": "{{target}}", "render_js": true}},
{"id": "static", "type": "static_analysis", "deps": ["크롤링"], "매개변수": {"분석기": ["multi-file-taint"]}},
{"id": "template_scan", "type": "스캐너", "DEPS": ["크롤링"], "매개변수": {"템플릿": ["xss-reflect-basic"]}},
{"id": "dynamic", "type": "dynamic_scan", "deps": ["template_scan", "static"], "params": {"engine": "headless-instrumented"}},
{"id": "dom_taint", "type": "런타임_테인트", "DEPS": ["dynamic"], "params": {"agent": "계측된 브라우저"}},
{"id": "파싱_차이", "유형": "파싱_차이", "DEPS": ["dynamic"], "params": {}},
{"id": "audit_csp", "type": "csp_audit", "deps": ["크롤링"], "매개변수": {}},
{"id": "report", "type": "report_gen", "deps": ["dom_taint", "parsing_diff", "audit_csp"], "params": {"format": "PDF,HTML"}}
]
}보고서 및 출력
각 결과에는 다음이 포함됩니다:
- 유형(반영/저장/DOM)
- 개념 증명(HTTP 요청/응답, DOM 스냅샷, 스크린샷)
- 심각도 점수
- 수정 제안(예: 올바른 인코더, 소독제 구성, 안전한 API 사용)
- 선택 사항으로 패치 또는 PR 스켈레톤 자동 생성
내부 기술 보고서에서 관련 문헌(예: TrustyMon 인용, 차등 논문 파싱)을 링크할 수도 있습니다.
샘플 코드 스니펫 및 모범 사례
다음은 React와 유사한 설정에서 안전/안전하지 않은 몇 가지 예시 코드 조각입니다:
안전하지 않음(취약함)
함수 UserGreeting(props) { return ; }더 안전한 버전
'dompurify'에서 DOMPurify를 임포트합니다;
함수 UserGreeting(props) {
const clean = DOMPurify.sanitize(props.userContent, { ALLOWED_TAGS: ['b','i','u','a'], ALLOWED_ATTR: ['href'] });
return <div dangerouslysetinnerhtml="{{" __html: clean }} />;
}아니면 더 좋은 방법도 있습니다:
함수 UserGreeting(props) {
return <div>{props.userContent}</div>// 리액트가 자동 이스케이프됩니다.
}속성 값의 경우:
// Unsafe
<img src={userInput} />
// Safer
function safeUrl(u) {
const doc = new URL(u, window.location.origin);
if (doc.protocol === 'http:' || doc.protocol === 'https:') {
return doc.toString();
}
return '/'; // fallback
}
<img src={safeUrl(userInput)} />결론 및 다음 단계
이 문서에서는 OWASP XSS 예방 치트 시트 (실용적인 규칙)을 사용하여 최신 연구 방향 (런타임 테인트, 파싱 디퍼렌셜, ML 프리필터)를 사용하여 강력하고 엔지니어링 친화적인 방어 방식을 구축할 수 있습니다. 펜리젠트의 원클릭 스캔 설계는 이러한 방법을 제품화하여 팀이 파이프라인을 다시 만들지 않고도 강력한 방어 방식을 쉽게 채택할 수 있도록 도와줍니다.
