Angular는 **강력한** 오픈 소스 프론트엔드 프레임워크로, **Google**에서 유지보수하고 있습니다. 코드 가독성과 디버깅을 향상시키기 위해 **TypeScript**를 사용합니다. 강력한 보안 메커니즘을 갖추고 있어 Angular는 **XSS**와 **오픈 리디렉션**과 같은 일반적인 클라이언트 사이드 취약점을 방지합니다. 또한 서버 사이드에서도 사용할 수 있어 보안 고려 사항이 **양쪽 모두** 중요합니다.
문서에 따르면, 모든 Angular 애플리케이션은 적어도 하나의 컴포넌트, 즉 루트 컴포넌트(`AppComponent`)를 가지고 있으며, 이 컴포넌트는 컴포넌트 계층 구조와 DOM을 연결합니다. 각 컴포넌트는 애플리케이션 데이터와 로직을 포함하는 클래스를 정의하며, 타겟 환경에서 표시할 뷰를 정의하는 HTML 템플릿과 연결됩니다. `@Component()` 데코레이터는 바로 아래의 클래스를 컴포넌트로 식별하고, 템플릿과 관련된 컴포넌트별 메타데이터를 제공합니다. `AppComponent`는 `app.component.ts` 파일에 정의되어 있습니다.
Angular NgModules는 컴포넌트 집합에 대한 컴파일 컨텍스트를 선언하며, 응용 프로그램 도메인, 워크플로우 또는 관련된 기능 세트에 전용됩니다. 모든 Angular 애플리케이션에는 일반적으로 `AppModule`이라는 이름의 루트 모듈이 있으며, 이 모듈은 애플리케이션을 시작하는 부트스트랩 메커니즘을 제공합니다. 일반적으로 애플리케이션에는 많은 기능 모듈이 포함됩니다. `AppModule`은 `app.module.ts` 파일에 정의되어 있습니다.
특정 뷰와 관련되지 않은 데이터나 로직을 공유하려면 서비스 클래스를 생성합니다. 서비스 클래스 정의는 `@Injectable()` 데코레이터로 바로 앞에 위치합니다. 이 데코레이터는 다른 프로바이더를 클래스에 의존성으로 주입할 수 있도록 메타데이터를 제공합니다. 의존성 주입(DI)을 사용하면 컴포넌트 클래스를 가볍고 효율적으로 유지할 수 있습니다. 컴포넌트 클래스는 서버에서 데이터를 가져오거나 사용자 입력을 유효성 검사하거나 콘솔에 직접 로그를 기록하지 않습니다. 이러한 작업은 서비스에 위임합니다.
Angular 프레임워크는 `tsconfig.json` 옵션을 따라 TypeScript 파일을 JavaScript 코드로 변환한 다음 `angular.json` 구성으로 프로젝트를 빌드합니다. `angular.json` 파일을 살펴보면 소스맵을 활성화하거나 비활성화할 수 있는 옵션이 있습니다. Angular 문서에 따르면, 기본 구성은 스크립트에 대한 소스맵 파일이 활성화되어 있으며 기본적으로 숨겨지지 않습니다.
일반적으로, 소스맵 파일은 디버깅 목적으로 사용되며 생성된 파일을 원본 파일에 매핑합니다. 따라서 프로덕션 환경에서 사용하는 것은 권장되지 않습니다. 소스맵이 활성화되면 Angular 프로젝트의 원래 상태를 복제하여 가독성을 향상시키고 파일 분석을 돕습니다. 그러나 비활성화된 경우에도 리뷰어는 보안에 취약한 패턴을 수동으로 검색하여 컴파일된 JavaScript 파일을 분석할 수 있습니다.
또한, Angular 프로젝트의 컴파일된 JavaScript 파일은 브라우저 개발자 도구 → 소스(또는 디버거 및 소스) → \[id].main.js에서 찾을 수 있습니다. 활성화된 옵션에 따라 이 파일은 끝에 다음 행을 포함할 수 있습니다. `//# sourceMappingURL=[id].main.js.map` 또는 **hidden** 옵션이 **true**로 설정된 경우 포함되지 않을 수도 있습니다. 그러나 **scripts**에 대한 소스맵이 비활성화된 경우 테스트가 더 복잡해지며 파일을 얻을 수 없습니다. 또한, 소스맵은 `ng build --source-map`과 같이 프로젝트 빌드 중에 활성화될 수 있습니다.
바인딩은 컴포넌트와 해당하는 뷰 간의 통신 과정을 의미합니다. Angular 프레임워크와 데이터 간의 전송에 사용됩니다. 데이터는 이벤트, 보간법, 속성 또는 양방향 바인딩 메커니즘을 통해 전달될 수 있습니다. 또한, 데이터는 관련 컴포넌트(부모-자식 관계) 및 서비스 기능을 사용하여 두 개의 관련 없는 컴포넌트 간에 공유될 수도 있습니다.
이 취약점은 사용자 입력이 `innerHTML`, `outerHTML`, 또는 `iframe``srcdoc` 중 하나의 속성에 바인딩될 때 발생합니다. 이러한 속성에 바인딩하는 경우 HTML이 그대로 해석되지만, 입력은 `SecurityContext.HTML`을 사용하여 살균됩니다. 따라서 HTML 삽입은 가능하지만, 크로스 사이트 스크립팅 (XSS)은 불가능합니다.
Angular는 페이지를 동적으로 구성하기 위해 템플릿을 활용합니다. 이 접근 방식은 Angular가 평가하기 위해 이중 중괄호(`{{}}`)로 둘러싼 템플릿 표현식을 포함합니다. 이를 통해 프레임워크는 추가적인 기능을 제공합니다. 예를 들어, `{{1+1}}`과 같은 템플릿은 2로 표시됩니다.
일반적으로, Angular는 템플릿 표현식과 혼동될 수 있는 사용자 입력을 이스케이프합니다 (예: \`< > ' " \`\`와 같은 문자). 이는 블랙리스트에 등록된 문자를 사용하지 않기 위해 JavaScript 문자열 객체를 생성하는 함수를 활용하는 등의 추가 단계가 필요함을 의미합니다. 그러나 이를 달성하기 위해서는 Angular 컨텍스트, 속성 및 변수를 고려해야 합니다. 따라서 템플릿 주입 공격은 다음과 같이 나타날 수 있습니다:
CSR과 달리, Angular Universal은 템플릿 파일의 SSR을 담당합니다. 이러한 파일은 사용자에게 전달됩니다. 그러나 이 구별에도 불구하고, Angular Universal은 SSR 보안을 강화하기 위해 CSR에서 사용되는 동일한 살균 메커니즘을 적용합니다. SSR에서 템플릿 주입 취약점은 사용된 템플릿 언어가 동일하기 때문에 CSR에서와 같은 방식으로 발견될 수 있습니다.
Angular에서 DOM 요소와 작업하기 위해 사용할 수 있는 몇 가지 클래스가 있습니다: `ElementRef`, `Renderer2`, `Location` 및 `Document`. 마지막 두 클래스에 대한 자세한 설명은 **Open redirects** 섹션에서 제공됩니다. 첫 번째 두 클래스의 주요 차이점은 `Renderer2` API가 DOM 요소와 컴포넌트 코드 사이에 추상화 계층을 제공하는 반면, `ElementRef`는 요소에 대한 참조만을 보유한다는 것입니다. 따라서 Angular 문서에 따르면 `ElementRef` API는 DOM에 직접 액세스해야 할 때에만 마지막 수단으로 사용해야 합니다.
*`ElementRef`에는 DOM 요소를 조작하는 데 사용할 수 있는 `nativeElement` 속성이 포함되어 있습니다. 그러나 `nativeElement`의 부적절한 사용은 XSS 삽입 취약점을 초래할 수 있습니다. 아래의 예시를 참조하세요:
```tsx
//app.component.ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
...
constructor(private elementRef: ElementRef) {
const s = document.createElement('script');
s.type = 'text/javascript';
s.textContent = 'alert("Hello World")';
this.elementRef.nativeElement.appendChild(s);
}
}
```
*`Renderer2`는 직접적인 네이티브 요소 액세스가 지원되지 않는 경우에도 안전하게 사용할 수 있는 API를 제공하지만, 여전히 일부 보안 결함이 있습니다. `Renderer2`를 사용하면 `setAttribute()` 메서드를 사용하여 HTML 요소에 속성을 설정할 수 있으며, 이 메서드에는 XSS 방지 메커니즘이 없습니다.
```tsx
//app.component.ts
import {Component, Renderer2, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
저희의 연구 중에는 XSS 및 CSS 삽입과 관련하여 `Renderer2`의 `setStyle()`, `createComment()`, `setValue()`와 같은 다른 메서드의 동작도 조사했습니다. 그러나 이러한 메서드들에 대한 유효한 공격 벡터를 찾지 못했으며, 이는 기능적인 제한 때문입니다.
jQuery는 Angular 프로젝트에서 HTML DOM 객체 조작을 돕기 위해 사용할 수 있는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다. 그러나 알려진 바와 같이 이 라이브러리의 메서드는 XSS 취약점을 얻을 수 있는 방법으로 악용될 수 있습니다. 취약한 jQuery 메서드가 Angular 프로젝트에서 어떻게 악용될 수 있는지 설명하기 위해 이 하위 섹션을 추가했습니다.
*`html()` 메서드는 일치하는 요소 집합의 첫 번째 요소의 HTML 콘텐츠를 가져오거나 모든 일치하는 요소의 HTML 콘텐츠를 설정합니다. 그러나 설계상 HTML 문자열을 허용하는 jQuery 생성자나 메서드는 잠재적으로 코드를 실행할 수 있습니다. 이는 `<script>` 태그의 삽입이나 코드를 실행하는 HTML 속성의 사용으로 발생할 수 있습니다.
```tsx
//app.component.ts
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit
{
ngOnInit()
{
$("button").on("click", function()
{
$("p").html("<script>alert(1)</script>");
});
}
}
//app.component.html
<button>Click me</button>
<p>some text here</p>
```
*`jQuery.parseHTML()` 메서드는 문자열을 DOM 노드 집합으로 변환하기 위해 네이티브 메서드를 사용하며, 이후 문서에 삽입할 수 있습니다.
이전에 언급한 대로, HTML 문자열을 허용하는 대부분의 jQuery API는 HTML에 포함된 스크립트를 실행합니다. `jQuery.parseHTML()` 메서드는 `keepScripts`가 명시적으로 `true`인 경우에만 구문 분석된 HTML에서 스크립트를 실행하지 않습니다. 그러나 대부분의 환경에서는 여전히 간접적으로 스크립트를 실행할 수 있습니다. 예를 들어, `<img onerror>` 속성을 통해 실행할 수 있습니다.
```tsx
//app.component.ts
import { Component, OnInit } from '@angular/core';
W3C 문서에 따르면 `window.location` 및 `document.location` 객체는 현대 브라우저에서 별칭으로 처리됩니다. 그래서 이들은 일부 메서드와 속성의 유사한 구현을 가지고 있으며, 이는 아래에서 언급한대로 `javascript://` 스키마 공격을 통한 개방형 리디렉션 및 DOM XSS를 발생시킬 수 있습니다.
* Angular 문서에 따르면, Angular `Document`는 DOM 문서와 동일하며, 이는 Angular에서 클라이언트 측 취약점을 악용하기 위해 일반적인 벡터를 사용할 수 있다는 것을 의미한다. `Document.location` 속성과 메서드는 다음 예제에서 보여주는 대로 성공적인 개방형 리디렉션 공격에 대한 취약점으로 사용될 수 있다:
```tsx
//app.component.ts
import { Component, Inject } from '@angular/core';
* 연구 단계에서는 Angular `Location` 클래스도 개방형 리디렉션 취약점을 검토했지만, 유효한 벡터를 찾지 못했다. `Location`은 Angular 서비스로, 응용 프로그램이 브라우저의 현재 URL과 상호 작용할 수 있도록 한다. 이 서비스에는 주어진 URL을 조작하는 여러 가지 메서드가 있다 - `go()`, `replaceState()`, `prepareExternalUrl()` 등. 그러나 이들을 외부 도메인으로의 리디렉션에 사용할 수는 없다. 예를 들면:
```tsx
//app.component.ts
import { Component, Inject } from '@angular/core';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
* [Angular Context: Easy Data-Binding for Nested Component Trees and the Router Outlet](https://medium.com/angular-in-depth/angular-context-easy-data-binding-for-nested-component-trees-and-the-router-outlet-a977efacd48)
* [Sanitization and security contexts](https://angular.io/guide/security#sanitization-and-security-contexts)
* [Renderer2 Example: Manipulating DOM in Angular - TekTutorialsHub](https://www.tektutorialshub.com/angular/renderer2-angular/)
* [jQuery API Documentation](http://api.jquery.com/)
* [How To Use jQuery With Angular (When You Absolutely Have To)](https://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9)
