XSS 치트 시트: 하드코어 보안 엔지니어를 위한 실무 가이드

또 다른 XSS 치트 시트가 여전히 중요한 이유

최신 프레임워크 ≠ XSS 프리. React/Angular/Svelte의 자동 이스케이프 기능은 템플릿 구멍을 줄여주지만, 실제 시스템에서는 여전히 DOM API 오용, 안전하지 않은 타사 위젯, 허용되는 마크다운/WYSIWYG를 제공합니다, 자바스크립트: URL 핸들러, SVG/MathML, JSONP 잔여물, 암시적 신뢰에 대한 위치/해시/postMessage.

벡터 에코시스템은 진화합니다. 포트스위거는 페이로드에 다음과 같은 주석을 지속적으로 추가합니다. 이벤트/태그/속성/브라우저를 사용하여 "부족의 기억"을 대폭 줄였습니다. 이러한 큐레이션은 페이로드 분류를 다시 만들지 않고도 광범위한 범위를 커버해야 할 때 유용합니다.

필터링만으로는 방어할 수 없습니다. OWASP는 10년 넘게 이 작업을 반복해 왔습니다. 데이터의 렌더링 컨텍스트. 결합 적절한 출력 인코딩, 위생 처리 (사용자가 작성한 HTML의 경우), 정책 (CSP, 신뢰할 수 있는 유형) 및 프레임워크 위생 는 협상할 수 없습니다.

XSS 치트 시트 펜리젠트

공격 표면 × 컨텍스트 매트릭스

이 매트릭스를 실행 체크리스트 를 사용하여 플레이라이트/버프/핵 검증 또는 코드 감사를 스크립팅할 수 있습니다. 각 행은 렌더링 컨텍스트 위험 싱크공통 항목에서 첫 번째 방어 동작및 확인 방법 규모에 맞게.

컨텍스트	위험한 싱크대(예시)	일반적인 진입 지점	기본 방어	대규모로 검증하는 방법
HTML 텍스트	`innerHTML`템플릿 문자열 연결	반영된 매개변수, 검색 상자, 사용자 바이오스, 댓글	HTML 출력 인코딩신뢰할 수 없는 HTML을 푸시하지 마십시오.	헤드리스 렌더링 + DOM 테인트 훅; 이전/이후 DOM 차이
속성	`href/src/action`, any `켜기*` 핸들러	`자바스크립트:` URL, SVG 속성, `데이터:` URL	속성/URL 인코딩금지 `자바스크립트:`; CSP	속성별 퍼즈, 자동 트리거 및 탐색 모니터링
자바스크립트	`평가`, `기능`, `setTimeout(문자열)`	JSONP 콜백, 동적 스크립트 컨케트/구문 분석	동적 평가 금지, 입력 직렬화, 필요한 경우 샌드박스 적용	Hook `평가/기능`호출 스택 및 인수 수집
URL/Nav	`위치`, `document.URL` concat	오픈 리디렉션, 해시/조각 주입	표준화; 엄격한 허용 목록; 원시 문자열을 스티칭하지 않음	리얼-UA 리플레이, 리디렉션 체인 추적
템플릿/SSR	안전하지 않은 필터/부분	서버 측 템플릿 데이터 교차	엄격한 템플릿 이스케이프, 가변 화이트리스트	템플릿 단위 테스트 + 플레이스홀더 퍼징
풍부한 콘텐츠	WYSIWYG/마크다운/SVG/MathML	외부 HTML/SVG 붙여넣기; 사용자 프로필 콘텐츠	허용 목록 살균(DOMPurify); CSP위험한 태그 삭제	일괄 페이로드 리플레이 + CSP 위반 로깅

실제로 실행할 수 있는 최소 재현 가능한 예제(MRE)

1) 속성 컨텍스트 + 제로 인터랙션 트리거

<input autofocus onfocus="fetch('/beacon?xss=1')">

중요한 이유 많은 UX 흐름(검색 필드, 빠른 프롬프트)에서 로드 시 포커스 이벤트가 자체 트리거됩니다. 다음으로 대체 <svg onload=…> 또는 <img onerror="…"> 를 사용하여 다양한 트리거 의미를 테스트할 수 있습니다.

2) SVG 캐리어 + URL 처리 문제

<svg><a xlink:href="javascript:fetch('/beacon?svg')">x</a></svg>

중요한 이유 SVG는 역사적으로 특이한 어트리뷰트 구문 분석 기능을 갖춘 별도의 XML 네임스페이스입니다. 팀에서는 종종 SVG를 위생 처리하거나 마크다운 렌더러를 통해 허용하는 것을 잊어버리는 경우가 있습니다.

3) DOM 기반 XSS(소스 → 싱크 계보)

<script>
  const q = new URL(location).hash.slice(1);
  document.getElementById('out').innerHTML = q; // sink
</script>
<div id="out"></div>

중요한 이유 고전적인 "URL에서 읽기, DOM에 쓰기" 안티 패턴입니다. 레거시 사이트와 내부 도구의 모든 곳에 존재합니다. 다음과 같이 수정하세요. 컨텍스트에 맞는 인코딩 를 사용하고 HTML 싱크에 직접 쓰지 마세요.

방어적 기준선(구호가 아닌 엔지니어링 우선)

컨텍스트별 출력 인코딩. 인코딩 대상 HTML / 속성 / URL / JS 를 각각 사용합니다. 프레임워크 자동 이스케이프는 다음을 포함하지 않습니다. 손으로 말아서 만든 DOM 업데이트.
사용자 HTML에 대한 허용 목록 위생 처리. 비즈니스 로직에 풍부한 콘텐츠(댓글, 약력, 지식창고)가 필요한 경우 다음을 사용하세요. DOMPurify (또는 이와 동등한 구성)을 사용하여 블랙리스트 "단어 자르기"를 피하세요.
콘텐츠 보안 정책. 시작하기 스크립트-src 'self' + 블록 인라인을 기본으로 설정하고 object-src 'none' 그리고 베이스-우리 '없음'. Adopt 신뢰할 수 있는 유형 을 사용하여 컴파일/실행 시 안전한 DOM API를 강제 적용합니다.
위험한 API 감사. 금지 또는 게이트 eval/새 함수/설정타임아웃(문자열) 및 동적 JSON→코드 변환을 지원합니다. 빌드 중에 ESLint 규칙을 적용하고 위반 사항이 발견되면 CI에 실패합니다.
코드로 테스트 및 확인합니다. 페이로드 재생을 자동화하세요. 페어링 대상 CSP 위반 보고 그리고 게이트웨이/로그 상관관계 를 사용하여 '데모 가능한 팝업'과 악용 가능 비즈니스에 중요한 경로로 이동합니다.

치트 시트에서 파이프라인까지: 자동화를 통한 배송

'벡터 라이브러리'에서 '프로덕션 등급 보증'으로 가는 최단 경로는 5단계 루프입니다:

컨텍스트 검색. 정적 스캔(ESLint 규칙, 시맨틱 그렙) + 잠재적 싱크에 태그를 지정하는 런타임 프로브(innerHTML, 속성 설정자, 탐색 포인트).
벡터 스케줄링. 각 싱크/컨텍스트를 큐레이팅된 풀 페이로드(속성 이벤트, 태그 쿼리, URL 핸들러), 브라우저 및 기능 플래그별로 필터링합니다.
헤드리스 교정. 플레이라이터/크로미움은 벡터당 실행됩니다. 캡처 콘솔, 네트워크, CSP 위반및 DOM 돌연변이.
신호 상관관계. 헤드리스 결과와 함께 API 게이트웨이 그리고 앱 로그 를 사용하여 "노이즈 대 실제"를 구분합니다. 이렇게 하면 첫날부터 오탐을 제거할 수 있습니다.
증거 우선 보고. 스크린샷, HTTP 추적, 차이점 전/후 DOM, 정책 위반을 자동으로 첨부합니다. 점수 신뢰도 엔지니어는 어디서부터 시작해야 할지 알 수 있습니다.

미니멀 플레이메이커 리플레이어(드롭인 스니펫)

'playwright'에서 { chromium }을 가져옵니다;

const 벡터 = [
  '#\"&gt;<img src="x" onerror="fetch(\">',
  '#<svg onload="fetch(\">'
];

(async () =&gt; {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  page.on('console', m =&gt; console.log('console:', m.text()));
  page.on('pageerror', e =&gt; console.error('pageerror:', e));
  for (벡터의 const v) {
    await page.goto('https://target.example/' + v);
    await page.screenshot({ path: `evidence_${encodeURIComponent(v)}.png` });
  }
  await browser.close();
})();

프로덕션화합니다: 각 실행에 소스→싱크 계보 레이블 추가, 켜기 CSP 보고서 전용 를 사용하여 위반 사항을 수집하고 DOM 차이점 를 사용하여 PR에서 회귀를 명확하게 만들 수 있습니다.

설계해야 하는 프레임워크 현실

React/JSX. 자동 이스케이프는 도움이 되지만 위험하게 설정된 내부 HTML 및 원시 ref.current.innerHTML = ... 싱크대를 다시 엽니다. 코드 냄새로 취급하고 소독제와 신뢰할 수 있는 유형 정책으로 문을 닫습니다.
각도. 소독제는 괜찮지만 bypassSecurityTrustHtml 및 유사한 API는 구멍을 뚫을 수 있습니다. 모든 우회 방법을 문서화하고 검증된 소스로 제한하세요.
Next/Nuxt/SSR. 서버에서 생성된 페이지는 다음과 같은 경우에만 에코해야 합니다. 인코딩 콘텐츠. 서버 실수를 '정리'하기 위해 클라이언트 프레임워크에 의존하지 마세요.
마크다운/MDX/WYSIWYG. 다음과 같이 취급합니다. HTML 수집 문제를 해결하세요. 렌더러를 강화하고, 신뢰할 수 없는 위젯을 샌드박스하고, 이벤트 속성/URL 핸들러를 퍼지하세요.
SVG/MathML. 반드시 허용해야 하는 경우 기능 집합을 제한하고 XML 네임스페이스를 이해하는 소독기를 실행하세요. 중요하지 않은 경우 안전한 래스터 를 서버에 저장합니다.

실제로 필요한 실용적인 페이로드 제품군

온-이벤트 자동 트리거: 자동 초점, onload, onerror, 애니메이션 시작, 온포커스, 온포인터. 사용자 클릭 없이 익스플로잇 가능성을 증명하는 데 적합합니다.
URL 핸들러: 자바스크립트:, 데이터:그리고 때때로 vbscript: (레거시). 허용 목록을 적용합니다.
템플릿 충돌: 순진한 필터를 통과하는 분할/연결 트릭(예: 속성 컨텍스트에서 벗어난 후 HTML을 다시 입력하는 방식).
DOM 클로버링: ID/이름을 덮어쓰면 코드 경로를 리디렉션하고 싱크에 착륙할 수 있습니다.
돌연변이 관찰자 타이밍: 초기 로드 대신 동적 업데이트를 악용하는 트리거.

CSP 및 신뢰할 수 있는 유형: '있으면 좋은 것'에서 가드레일까지

CSP 는 스크립트 소스와 인라인 실행을 제한하는 정책 언어를 제공합니다. 엄격하게 시작한 다음 검증된 경우에만 확대합니다. 다음과 페어링 리포트-우리/보고 대상 및 수확 위반 신고 원격 분석에서
신뢰할 수 있는 유형 개발자를 강제로 합격시키다 정책 생성 값을 원시 문자열을 허용하는 DOM API(innerHTML, outerHTML, insertAdjacentHTML, 범위#컨텍스트 프래그먼트 생성). 이렇게 하면 구성에 따라 DOM XSS의 전체 클래스가 제거됩니다.
롤아웃 팁: 에서 CSP를 실행합니다. 보고서 전용 두 번의 스프린트를 통해 위반 사항을 수정한 다음 시행합니다. 단일 앱 전반의 신뢰할 수 있는 유형 정책 그리고 검증된 빌더를 통해서만 "축복받은" HTML을 발행합니다.

엔지니어에게 익스플로잇 가능성을 증명하는 방법

Repro 스크립트: 재생할 한 줄짜리(URL 또는 컬)와 Playwright 브랜치를 입력합니다.
DOM 차이: 변경된 정확한 노드와 경로(#app > .profile > .bio).
통화 스택: JS 싱크의 경우, 스택 추적을 포함하세요. 평가/기능 후크.
CSP 증거: 인라인/스크립트 소스 위반에 대한 위반 JSON을 첨부합니다.
비즈니스 내러티브: "이렇게 하면 다음에서 세션 토큰을 유출할 수 있습니다. /계정 주입된 <img> 비콘'이 매번 '알림 팝업'을 이깁니다.

펜리전트 내에서 이 xss 치트 시트 실행하기

이미 사용 중인 경우 펜리전트 를 자동화된 펜테스트 플랫폼으로 사용하면 위의 내용을 실행 가능한 단일 템플릿으로 패키징할 수 있습니다:

작업 템플릿: "XSS 정찰 + 유효성 검사." 에이전트는 정찰(하위 도메인/포트/지문)을 수행하고, 탐지된 컨텍스트에 따라 벡터를 예약하고, 헤드리스 리플레이를 실행하며, 다음과 같은 작업을 수행합니다. 신호의 상관관계 로그/게이트웨이를 사용하여 노이즈를 줄입니다.
증거 우선 내보내기. 검색 결과는 다음과 함께 제공됩니다. 신뢰도 점수재현 가능한 단계, 스크린샷, CSP 위반 로그, 엔지니어가 신뢰할 수 있는 DOM 차이점 등을 제공합니다.
가장 도움이 되는 곳. 레거시 + SPA 스택이 혼합된 대규모 범위 또는 CSP/신뢰 유형으로 마이그레이션하고 다음이 필요한 팀 증거 기반 분류 가 아니라 페이로드 퀴즈입니다.

XSS 치트 시트

노련한 팀을 계속 괴롭히는 일반적인 함정

출력이 아닌 입력을 살균합니다. HTML을 허용해야 하는 경우 그리고 는 여전히 대상 컨텍스트에 따라 출력 시 인코딩되며, 이 둘은 서로 바꿔서 사용할 수 없습니다.
허용 자바스크립트: "유연성"을 위해. 완전히 삭제하거나 특정 프로토콜만 화이트리스트에 추가합니다(https, 메일 주소아마도 전화).
마크다운을 "안전한 텍스트"로 취급합니다. 렌더러의 플러그인이 안전성을 결정합니다. 허용된 태그/속성을 감사하고, 신뢰할 수 없는 SVG의 경우 서버 측 래스터화를 고려하세요.
HTML이 아닌 컨텍스트 무시. URL 연결 및 JSON→JS 평가는 반복적인 위반 행위입니다. "문자열을 코딩하지 않기" 정책을 강화합니다.
하나의 환경을 신뢰합니다. 헤드리스에서 실패한 XSS는 모바일 크롬이나 이전 데스크톱 빌드에서는 여전히 성공할 수 있습니다. 계속 브라우저 매트릭스 고부가가치 앱에 적합합니다.

프로덕션 체크리스트 , 이를 CI 배지 옆에 고정합니다.

컨텍스트 인식 인코딩 HTML/Attr/URL/JS에 대한 단위 테스트가 포함된 유틸리티
DOMPurify (또는 이에 상응하는) 리치 콘텐츠 경로에 대한 강화된 구성으로 잠겼습니다.
CSP 와 함께 스크립트-src 'self' (안전하지 않은 인라인 없음), object-src 'none', 베이스-우리 '없음'원격 측정으로 유선 위반 수집
신뢰할 수 있는 유형 정책 + 빌드 타임 린트 규칙으로 원시 문자열 싱크를 차단합니다.
ESLint 규칙 금지 eval/새 함수/설정타임아웃(문자열) (CI 적용)
극작가 리플레이 제품군 포트스위거 스타일 벡터로 시드, 벡터별 스크린샷 + DOM 차이점
자동화된 신호 상관관계 앱 로그 / API 게이트웨이 이벤트 사용
증거 우선 보고서 신뢰도 점수 비즈니스에 미치는 영향 노트
PR 템플릿 라인: "새로운 HTML 싱크 소개?" "소독제 우회?" "TT 정책 업데이트?"
타사 위젯/WYSIWYG/마크다운 설정의 정기적인 검토

자주 묻는 질문

Q: 이미 React/Angular를 사용하는 경우에도 이 기능이 필요한가요?
A: 네. 프레임워크가 모든 DOM 쓰기, 타사 위젯 또는 마크다운/SVG를 통제하지는 않습니다. 여전히 새니타이저 + CSP + TT가 필요하며 신뢰할 수 없는 데이터를 원시 DOM 싱크에 쓰는 것을 피해야 합니다.

질문: CSP로 모든 인라인 스크립트를 차단해야 하나요?
A: 예, 기본적으로 그렇습니다. 꼭 필요한 경우에만 논스 또는 해시를 사용하고 예외를 문서화하세요. 장기적인 목표는 인라인 스크립트를 아예 사용하지 않는 것입니다.

Q: 소독으로 충분하나요?
A: 아니요. 살균은 다음과 같은 공격 표면을 줄입니다. HTML 수집하지만 여전히 올바른 출력 인코딩 그리고 정책 가드레일. 다양한 문제, 다양한 도구.

질문: 어떤 브라우저를 테스트하나요?
A: 최소한 사용자 기반의 상위 2개 데스크톱 + 모바일 엔진이 필요합니다. 일부 벡터는 브라우저에 따라 다르거나 기능 플래그에 따라 달라지므로 매트릭스를 작게 유지하세요.

추가 읽기(권위 있는 자료)

포트스위거 - 크로스 사이트 스크립팅(XSS) 치트 시트 - 벡터, PoC 및 브라우저 노트의 살아있는 카탈로그입니다.
OWASP - XSS 예방 치트 시트 - 엄격한 컨텍스트별 인코딩 전략과 해야 할 일/하지 말아야 할 일 표를 제공합니다.
OWASP - DOM 기반 XSS 방지 치트 시트 - 소스→싱크 패턴 및 완화 기능을 브라우저에서 사용할 수 있습니다.
포트스위거 - XSS란 무엇인가요? - 신입사원 교육을 위한 체계적인 튜토리얼과 실습 실습을 제공합니다.

부록: 빠른 위생 및 인코딩 참고 자료

HTML 텍스트 노드 → 탈출 & " ' /
속성 값 → HTML 속성 인코딩 + 신뢰할 수 없는 데이터의 이벤트 속성 허용 안 함
URL → 구성 요소 인코딩허용 목록 프로토콜; 절대 원시를 쓰지 마십시오. 자바스크립트: / 데이터:
JS 문자열 → 직렬화 코드를 해석하는 API에 사용자 데이터를 전달하지 않습니다.

마무리 노트: 유용한 XSS 치트 시트 는 파이프라인에 와이어 연결-영리한 페이로드의 포스터가 아닙니다. 컨텍스트 검색으로 시작하여 컨텍스트별로 벡터를 예약하고, 헤드리스 방식으로 재생하고, 로그와 상호 연관시키고, 신뢰도 점수와 함께 증거를 전송하세요. Penligent를 도입하든 자체 하네스를 구축하든, 다음과 같은 방법으로 프로세스를 추진하세요. 증거 정책을 통해 가드레일을 적용하도록 합니다.