FlawOpen

flawopen.com/Angular 보안/Angular

Angular XSS 방어: 안전한 기본값과 우회 API

참고 페이지
핵심 답변

Angular는 템플릿 바인딩 값을 기본적으로 신뢰하지 않습니다. 보간은 텍스트를 이스케이프하고 HTML 및 URL 바인딩은 컨텍스트에 맞게 정제합니다. 위험한 경계는 명시적 신뢰입니다. bypassSecurityTrust*는 해당 값에 대한 일반 정제를 건너뛰라고 Angular에 지시합니다. 실제로 사용될 정확한 보안 컨텍스트에 맞게 값을 검증하고 구성한 뒤에만 사용하세요.

RISKY — the escape hatch
this.safeHtml = this.sanitizer
  .bypassSecurityTrustHtml(comment);
// <div [innerHTML]="safeHtml"></div>
더 안전 — 신뢰할 수 없는 입력을 텍스트로 유지
<div>{{ comment }}</div>
// 보간은 마크업을 텍스트로 이스케이프합니다

Angular가 정제하는 것과 정제할 수 없는 것

Angular는 보간 텍스트를 이스케이프하고 HTML 및 URL 컨텍스트의 신뢰할 수 없는 값을 정제합니다. 예를 들어 [innerHTML]은 위험한 마크업을 제거하면서 안전한 HTML은 유지합니다. 일반 보간은 마크업을 해석하지 않습니다. 실행 가능한 콘텐츠를 불러오는 iframe src 같은 Resource URL은 임의의 코드를 가리킬 수 있어 일반적인 방식으로 정제할 수 없습니다. 공격자가 제어하는 값을 bypassSecurityTrustHtml, bypassSecurityTrustUrl, bypassSecurityTrustResourceUrl 또는 관련 우회 API에 전달하지 마세요. 이 API는 특정 컨텍스트에서 값이 안전하다고 선언하고 정제를 생략합니다. 정당한 embed가 필요하면 고정 origin과 검증된 식별자로 URL을 구성한 직후 trusted로 표시하세요.

우회 API와 DOM sink 감사

grep -rn "bypassSecurityTrust" --include="*.ts" .

자주 묻는 질문

CSP 및 Trusted Types를 통한 심층 방어

Angular의 안전한 바인딩과 함께 Content Security Policy (CSP)를 설정하고 Trusted Types를 강제하여 심층 방어를 적용하세요. 애플리케이션이 DomSanitizer.bypassSecurityTrust*를 호출하면 Angular에는 Trusted Types 정책 angular#unsafe-bypass가 필요합니다. 가능하면 이러한 호출을 제거하고, 불가피하다면 각 호출 위치를 목록화하여 정확한 컨텍스트에 맞게 검증된 값만 신뢰하세요.

Angular는 DOM에 쓰는 모든 방식을 정제하나요?

아니요. 템플릿 바인딩은 프레임워크 보호를 받지만 직접 DOM API, ElementRef, 타사 DOM 라이브러리는 이를 우회할 수 있습니다. 템플릿 바인딩을 우선하고 해당 sink는 별도로 감사하세요. 정확한 보안 컨텍스트에 맞게 검증하지 않았다면 입력을 trusted로 표시하지 마세요.

참고 자료

함께 보기 크로스 사이트 스크립팅(XSS, CWE-79): 동작 원리와 언어별 방어 방법 — flawopen.com MIME sniffing XSS: Content-Type과 nosniff CSP와 출력 이스케이프: 둘 다 필요할까요? React의 dangerouslySetInnerHTML은 안전할까? DOMPurify면 innerHTML을 안전하게 만들 수 있나요? Markdown 렌더링은 XSS로부터 안전한가요? Svelte는 기본적으로 XSS를 막을까?