# Angular

## The Checklist

Checklist [from here](https://lsgeurope.com/post/angular-security-checklist).

* [ ] Angular은 클라이언트 측 프레임워크로 간주되며 서버 측 보호를 제공할 것으로 기대되지 않습니다.
* [ ] 스크립트에 대한 소스 맵이 프로젝트 구성에서 비활성화되어 있습니다.
* [ ] 신뢰할 수 없는 사용자 입력은 항상 템플릿에서 사용되기 전에 보간되거나 정리됩니다.
* [ ] 사용자는 서버 측 또는 클라이언트 측 템플릿에 대한 제어 권한이 없습니다.
* [ ] 신뢰할 수 없는 사용자 입력은 애플리케이션에서 신뢰하기 전에 적절한 보안 컨텍스트를 사용하여 정리됩니다.
* [ ] `BypassSecurity*` 메서드는 신뢰할 수 없는 입력과 함께 사용되지 않습니다.
* [ ] 신뢰할 수 없는 사용자 입력은 `ElementRef`, `Renderer2`, `Document`와 같은 Angular 클래스나 다른 JQuery/DOM 싱크에 전달되지 않습니다.

## What is Angular

Angular은 **강력한** 및 **오픈 소스** 프론트 엔드 프레임워크로 **Google**에서 유지 관리합니다. **TypeScript**를 사용하여 코드 가독성과 디버깅을 향상시킵니다. 강력한 보안 메커니즘을 통해 Angular는 **XSS** 및 **오픈 리다이렉트**와 같은 일반적인 클라이언트 측 취약점을 방지합니다. 서버 측에서도 사용할 수 있어 **양쪽**에서 보안 고려 사항이 중요합니다.

## Framework architecture

Angular의 기본 개념을 더 잘 이해하기 위해 필수 개념을 살펴보겠습니다.

일반적인 Angular 프로젝트는 보통 다음과 같습니다:
```bash
my-workspace/
├── ... #workspace-wide configuration files
├── src
│   ├── app
│   │   ├── app.module.ts #defines the root module, that tells Angular how to assemble the application
│   │   ├── app.component.ts #defines the logic for the application's root component
│   │   ├── app.component.html #defines the HTML template associated with the root component
│   │   ├── app.component.css #defines the base CSS stylesheet for the root component
│   │   ├── app.component.spec.ts #defines a unit test for the root component
│   │   └── app-routing.module.ts #provides routing capability for the application
│   ├── lib
│   │   └── src #library-specific configuration files
│   ├── index.html #main HTML page, where the component will be rendered in
│   └── ... #application-specific configuration files
├── angular.json #provides workspace-wide and project-specific configuration defaults
└── tsconfig.json #provides the base TypeScript configuration for projects in the workspace
```
문서에 따르면, 모든 Angular 애플리케이션은 최소한 하나의 컴포넌트, 즉 DOM과 컴포넌트 계층을 연결하는 루트 컴포넌트(`AppComponent`)를 가지고 있습니다. 각 컴포넌트는 애플리케이션 데이터와 로직을 포함하는 클래스를 정의하며, 타겟 환경에 표시될 뷰를 정의하는 HTML 템플릿과 연결됩니다. `@Component()` 데코레이터는 그 아래의 클래스를 컴포넌트로 식별하고, 템플릿 및 관련 컴포넌트 전용 메타데이터를 제공합니다. `AppComponent`는 `app.component.ts` 파일에 정의되어 있습니다.

Angular NgModules는 애플리케이션 도메인, 워크플로우 또는 밀접하게 관련된 기능 세트를 위한 컴파일 컨텍스트를 선언합니다. 모든 Angular 애플리케이션은 일반적으로 `AppModule`이라고 명명된 루트 모듈을 가지고 있으며, 이는 애플리케이션을 시작하는 부트스트랩 메커니즘을 제공합니다. 애플리케이션은 일반적으로 많은 기능 모듈을 포함합니다. `AppModule`은 `app.module.ts` 파일에 정의되어 있습니다.

Angular `Router` NgModule은 애플리케이션의 다양한 상태와 뷰 계층 간의 탐색 경로를 정의할 수 있는 서비스를 제공합니다. `RouterModule`은 `app-routing.module.ts` 파일에 정의되어 있습니다.

특정 뷰와 관련이 없고 컴포넌트 간에 공유하고 싶은 데이터나 로직에 대해서는 서비스 클래스를 생성합니다. 서비스 클래스 정의는 즉시 `@Injectable()` 데코레이터로 시작됩니다. 이 데코레이터는 다른 제공자가 클래스에 종속성으로 주입될 수 있도록 하는 메타데이터를 제공합니다. 의존성 주입(DI)은 컴포넌트 클래스를 간결하고 효율적으로 유지할 수 있게 해줍니다. 이들은 서버에서 데이터를 가져오거나, 사용자 입력을 검증하거나, 콘솔에 직접 로그를 남기지 않고, 이러한 작업을 서비스에 위임합니다.

## Sourcemap 구성

Angular 프레임워크는 `tsconfig.json` 옵션을 따르며 TypeScript 파일을 JavaScript 코드로 변환한 후 `angular.json` 구성으로 프로젝트를 빌드합니다. `angular.json` 파일을 살펴보면 소스맵을 활성화하거나 비활성화하는 옵션이 있음을 확인했습니다. Angular 문서에 따르면, 기본 구성은 스크립트에 대해 소스맵 파일이 활성화되어 있으며 기본적으로 숨겨져 있지 않습니다:
```json
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false,
"hidden": false
}
```
일반적으로, sourcemap 파일은 생성된 파일을 원본 파일에 매핑하여 디버깅 목적으로 사용됩니다. 따라서 프로덕션 환경에서 사용하는 것은 권장되지 않습니다. sourcemaps가 활성화되면 Angular 프로젝트의 원래 상태를 복제하여 가독성을 높이고 파일 분석에 도움이 됩니다. 그러나 비활성화된 경우, 검토자는 보안 패턴을 검색하여 컴파일된 JavaScript 파일을 수동으로 분석할 수 있습니다.

또한, Angular 프로젝트의 컴파일된 JavaScript 파일은 브라우저 개발자 도구 → Sources (또는 Debugger and Sources) → \[id].main.js에서 찾을 수 있습니다. 활성화된 옵션에 따라 이 파일의 끝에 `//# sourceMappingURL=[id].main.js.map` 행이 포함될 수 있으며, **hidden** 옵션이 **true**로 설정된 경우 포함되지 않을 수 있습니다. 그럼에도 불구하고 **scripts**에 대해 sourcemap이 비활성화되면 테스트가 더 복잡해지고 파일을 얻을 수 없습니다. 또한, `ng build --source-map`와 같이 프로젝트 빌드 중에 sourcemap을 활성화할 수 있습니다.

## 데이터 바인딩

바인딩은 구성 요소와 해당 뷰 간의 통신 프로세스를 의미합니다. 이는 Angular 프레임워크와 데이터 전송에 사용됩니다. 데이터는 이벤트, 보간, 속성 또는 양방향 바인딩 메커니즘을 통해 전달될 수 있습니다. 또한, 데이터는 관련 구성 요소(부모-자식 관계) 간 및 두 개의 관련 없는 구성 요소 간에 Service 기능을 사용하여 공유될 수 있습니다.

바인딩은 데이터 흐름에 따라 분류할 수 있습니다:

* 데이터 소스에서 뷰 대상까지 (포함 _interpolation_, _properties_, _attributes_, _classes_ 및 _styles_); 템플릿에서 `[]` 또는 `{{}}`를 사용하여 적용할 수 있습니다;
* 뷰 대상에서 데이터 소스까지 (포함 _events_); 템플릿에서 `()`를 사용하여 적용할 수 있습니다;
* 양방향; 템플릿에서 `[()]`를 사용하여 적용할 수 있습니다.

바인딩은 속성, 이벤트 및 속성뿐만 아니라 소스 지시문의 모든 공개 멤버에서 호출할 수 있습니다:

| 유형      | 대상                                                   | 예시                                                               |
| --------- | -------------------------------------------------------- | -------------------------------------------------------------------- |
| 속성     | 요소 속성, 구성 요소 속성, 지시문 속성                | \<img \[alt]="hero.name" \[src]="heroImageUrl">                      |
| 이벤트    | 요소 이벤트, 구성 요소 이벤트, 지시문 이벤트          | \<button type="button" (click)="onSave()">Save                       |
| 양방향   | 이벤트 및 속성                                       | \<input \[(ngModel)]="name">                                         |
| 속성     | 속성 (예외)                                           | \<button type="button" \[attr.aria-label]="help">help                |
| 클래스    | 클래스 속성                                           | \<div \[class.special]="isSpecial">Special                           |
| 스타일    | 스타일 속성                                           | \<button type="button" \[style.color]="isSpecial ? 'red' : 'green'"> |

## Angular 보안 모델

Angular의 설계는 기본적으로 모든 데이터를 인코딩하거나 정화하여 XSS 취약점을 발견하고 악용하기 어렵게 만듭니다. 데이터 처리에는 두 가지 뚜렷한 시나리오가 있습니다:

1.  보간 또는 `{{user_input}}` - 컨텍스트에 민감한 인코딩을 수행하고 사용자 입력을 텍스트로 해석합니다;

```jsx
//app.component.ts
test = "<script>alert(1)</script><h1>test</h1>";

//app.component.html
{{test}}
```

결과: `&lt;script&gt;alert(1)&lt;/script&gt;&lt;h1&gt;test&lt;/h1&gt;`
2.  속성, 속성, 클래스 및 스타일에 대한 바인딩 또는 `[attribute]="user_input"` - 제공된 보안 컨텍스트에 따라 정화를 수행합니다.

```jsx
//app.component.ts
test = "<script>alert(1)</script><h1>test</h1>";

//app.component.html
<div [innerHtml]="test"></div>
```

결과: `<div><h1>test</h1></div>`

`SecurityContext`의 유형은 6가지입니다:

* `None`;
* `HTML`은 값을 HTML로 해석할 때 사용됩니다;
* `STYLE`은 `style` 속성에 CSS를 바인딩할 때 사용됩니다;
* `URL`은 `<a href>`와 같은 URL 속성에 사용됩니다;
* `SCRIPT`는 JavaScript 코드에 사용됩니다;
* `RESOURCE_URL`은 코드로 로드되고 실행되는 URL로, 예를 들어 `<script src>`에서 사용됩니다.

## 취약점

### 보안 신뢰 우회 메서드

Angular는 기본 정화 프로세스를 우회하고 특정 컨텍스트에서 값이 안전하게 사용될 수 있음을 나타내기 위해 메서드 목록을 도입합니다. 다음은 다섯 가지 예입니다:

1.  `bypassSecurityTrustUrl`은 주어진 값이 안전한 스타일 URL임을 나타내는 데 사용됩니다:

```jsx
//app.component.ts
this.trustedUrl = this.sanitizer.bypassSecurityTrustUrl('javascript:alert()');

//app.component.html
<a class="e2e-trusted-url" [href]="trustedUrl">Click me</a>

//result
<a _ngcontent-pqg-c12="" class="e2e-trusted-url" href="javascript:alert()">Click me</a>
```
2.  `bypassSecurityTrustResourceUrl`은 주어진 값이 안전한 리소스 URL임을 나타내는 데 사용됩니다:

```jsx
//app.component.ts
this.trustedResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png");

//app.component.html
<iframe [src]="trustedResourceUrl"></iframe>

//result
<img _ngcontent-nre-c12="" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png">
```
3.  `bypassSecurityTrustHtml`은 주어진 값이 안전한 HTML임을 나타내는 데 사용됩니다. 이 방법으로 DOM 트리에 `script` 요소를 삽입하더라도 포함된 JavaScript 코드를 실행하지 않습니다.

```jsx
//app.component.ts
this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml("<h1>html tag</h1><svg onclick=\"alert('bypassSecurityTrustHtml')\" style=display:block>blah</svg>");

//app.component.html
<p style="border:solid" [innerHtml]="trustedHtml"></p>

//result
<h1>html tag</h1>
<svg onclick="alert('bypassSecurityTrustHtml')" style="display:block">blah</svg>
```
4.  `bypassSecurityTrustScript`는 주어진 값이 안전한 JavaScript임을 나타내는 데 사용됩니다. 그러나 이 방법을 사용하여 템플릿에서 JS 코드를 실행할 수 없기 때문에 그 동작이 예측할 수 없음을 발견했습니다.

```jsx
//app.component.ts
this.trustedScript = this.sanitizer.bypassSecurityTrustScript("alert('bypass Security TrustScript')");

//app.component.html
<script [innerHtml]="trustedScript"></script>

//result
-
```
5.  `bypassSecurityTrustStyle`은 주어진 값이 안전한 CSS임을 나타내는 데 사용됩니다. 다음 예시는 CSS 주입을 설명합니다:

```jsx
//app.component.ts
this.trustedStyle = this.sanitizer.bypassSecurityTrustStyle('background-image: url(https://example.com/exfil/a)');

//app.component.html
<input type="password" name="pwd" value="01234" [style]="trustedStyle">

//result
Request URL: GET example.com/exfil/a
```

Angular는 뷰에 표시하기 전에 데이터를 정화하기 위해 `sanitize` 메서드를 제공합니다. 이 메서드는 제공된 보안 컨텍스트를 사용하고 입력을 적절하게 정화합니다. 그러나 특정 데이터 및 컨텍스트에 대해 올바른 보안 컨텍스트를 사용하는 것이 중요합니다. 예를 들어, HTML 콘텐츠에 `SecurityContext.URL`을 적용하면 위험한 HTML 값에 대한 보호를 제공하지 않습니다. 이러한 시나리오에서 보안 컨텍스트의 오용은 XSS 취약점으로 이어질 수 있습니다.

### HTML 주입

이 취약점은 사용자 입력이 `innerHTML`, `outerHTML` 또는 `iframe` `srcdoc`의 세 가지 속성 중 하나에 바인딩될 때 발생합니다. 이러한 속성에 바인딩하면 HTML이 그대로 해석되지만, 입력은 `SecurityContext.HTML`을 사용하여 정화됩니다. 따라서 HTML 주입은 가능하지만 교차 사이트 스크립팅(XSS)은 불가능합니다.

`innerHTML`을 사용하는 예:
```jsx
//app.component.ts
import { Component} from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent{
//define a variable with user input
test = "<script>alert(1)</script><h1>test</h1>";
}

//app.component.html
<div [innerHTML]="test"></div>
```
<div><h1>test</h1></div>

### 템플릿 주입

#### 클라이언트 측 렌더링 (CSR)

Angular는 템플릿을 활용하여 페이지를 동적으로 구성합니다. 이 접근 방식은 Angular가 평가할 템플릿 표현식을 이중 중괄호(`{{}}`)로 감싸는 것을 포함합니다. 이렇게 함으로써 프레임워크는 추가 기능을 제공합니다. 예를 들어, `{{1+1}}`와 같은 템플릿은 2로 표시됩니다.

일반적으로 Angular는 템플릿 표현식과 혼동될 수 있는 사용자 입력을 이스케이프합니다 (예: \`< > ' " \`\`와 같은 문자). 이는 블랙리스트 문자를 사용하지 않기 위해 JavaScript 문자열 객체를 생성하는 함수를 활용하는 등 이 제한을 우회하기 위해 추가 단계가 필요함을 의미합니다. 그러나 이를 달성하기 위해서는 Angular의 컨텍스트, 속성 및 변수를 고려해야 합니다. 따라서 템플릿 주입 공격은 다음과 같이 나타날 수 있습니다:
```jsx
//app.component.ts
const _userInput = '{{constructor.constructor(\'alert(1)\'()}}'
@Component({
selector: 'app-root',
template: '<h1>title</h1>' + _userInput
})
```
위에서 설명한 바와 같이: `constructor`는 Object `constructor` 속성의 범위를 나타내며, 이를 통해 String 생성자를 호출하고 임의의 코드를 실행할 수 있습니다.

#### 서버 사이드 렌더링 (SSR)

CSR과 달리, Angular Universal은 템플릿 파일의 SSR을 담당합니다. 이러한 파일은 사용자에게 전달됩니다. 이러한 구분에도 불구하고, Angular Universal은 SSR 보안을 강화하기 위해 CSR에서 사용되는 동일한 세척 메커니즘을 적용합니다. SSR에서의 템플릿 주입 취약점은 CSR에서와 동일한 방식으로 발견될 수 있으며, 사용되는 템플릿 언어가 동일하기 때문입니다.

물론, Pug 및 Handlebars와 같은 서드파티 템플릿 엔진을 사용할 때 새로운 템플릿 주입 취약점이 발생할 가능성도 있습니다.

### XSS

#### DOM 인터페이스

앞서 언급한 바와 같이, 우리는 _Document_ 인터페이스를 사용하여 DOM에 직접 접근할 수 있습니다. 사용자 입력이 사전에 검증되지 않으면 교차 사이트 스크립팅(XSS) 취약점으로 이어질 수 있습니다.

아래 예제에서는 `document.write()` 및 `document.createElement()` 메서드를 사용했습니다:
```jsx
//app.component.ts 1
import { Component} from '@angular/core';

@Component({
selector: 'app-root',
template: ''
})
export class AppComponent{
constructor () {
document.open();
document.write("<script>alert(document.domain)</script>");
document.close();
}
}

//app.component.ts 2
import { Component} from '@angular/core';

@Component({
selector: 'app-root',
template: ''
})
export class AppComponent{
constructor () {
var d = document.createElement('script');
var y = document.createTextNode("alert(1)");
d.appendChild(y);
document.body.appendChild(d);
}
}

//app.component.ts 3
import { Component} from '@angular/core';

@Component({
selector: 'app-root',
template: ''
})
export class AppComponent{
constructor () {
var a = document.createElement('img');
a.src='1';
a.setAttribute('onerror','alert(1)');
document.body.appendChild(a);
}
}
```
#### Angular 클래스

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';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

public constructor (
private renderer2: Renderer2
){}
@ViewChild("img") img!: ElementRef;

addAttribute(){
this.renderer2.setAttribute(this.img.nativeElement, 'src', '1');
this.renderer2.setAttribute(this.img.nativeElement, 'onerror', 'alert(1)');
}
}

//app.component.html
<img #img>
<button (click)="setAttribute()">Click me!</button>
```
*   DOM 요소의 속성을 설정하려면 `Renderer2.setProperty()` 메서드를 사용하고 XSS 공격을 유발할 수 있습니다:

```tsx
//app.component.ts
import {Component, Renderer2, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

public constructor (
private renderer2: Renderer2
){}
@ViewChild("img") img!: ElementRef;

setProperty(){
this.renderer2.setProperty(this.img.nativeElement, 'innerHTML', '<img src=1 onerror=alert(1)>');
}
}

//app.component.html
<a #a></a>
<button (click)="setProperty()">Click me!</button>
```

연구 중에 우리는 XSS 및 CSS 주입과 관련하여 `Renderer2`의 다른 메서드인 `setStyle()`, `createComment()`, 및 `setValue()`의 동작도 조사했습니다. 그러나 이러한 메서드의 기능적 제한으로 인해 유효한 공격 벡터를 찾을 수 없었습니다.

#### jQuery

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 노드 집합으로 변환하기 위해 기본 메서드를 사용하며, 이를 문서에 삽입할 수 있습니다.

```tsx
jQuery.parseHTML(data [, context ] [, keepScripts ])
```

앞서 언급했듯이 HTML 문자열을 수용하는 대부분의 jQuery API는 HTML에 포함된 스크립트를 실행합니다. `jQuery.parseHTML()` 메서드는 `keepScripts`가 명시적으로 `true`가 아닌 한 파싱된 HTML에서 스크립트를 실행하지 않습니다. 그러나 대부분의 환경에서 `<img onerror>` 속성을 통해 간접적으로 스크립트를 실행하는 것은 여전히 가능합니다.

```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()
{
var $palias = $("#palias"),
str = "<img src=1 onerror=alert(1)>",
html = $.parseHTML(str),
nodeNames = [];
$palias.append(html);
});
}
}

//app.component.html
<button>Click me</button>
<p id="palias">some text</p>
```

### Open redirects

#### DOM 인터페이스

W3C 문서에 따르면, `window.location` 및 `document.location` 객체는 최신 브라우저에서 별칭으로 처리됩니다. 그렇기 때문에 이들은 일부 메서드와 속성의 유사한 구현을 가지며, 이는 아래에 언급된 `javascript://` 스키마 공격으로 인해 열린 리디렉션 및 DOM XSS를 유발할 수 있습니다.

*   `window.location.href`(및 `document.location.href`)

현재 DOM 위치 객체를 가져오는 표준 방법은 `window.location`을 사용하는 것입니다. 또한 이를 사용하여 브라우저를 새 페이지로 리디렉션할 수 있습니다. 결과적으로 이 객체에 대한 제어를 가지면 열린 리디렉션 취약점을 악용할 수 있습니다.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.location.href = "https://google.com/about"
}
}

//app.component.html
<button type="button" (click)="goToUrl()">Click me!</button>
```

다음 시나리오에 대한 악용 과정은 동일합니다.
*   `window.location.assign()`(및 `document.location.assign()`)

이 메서드는 창이 지정된 URL에서 문서를 로드하고 표시하도록 합니다. 이 메서드에 대한 제어를 가지면 열린 리디렉션 공격의 싱크가 될 수 있습니다.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.location.assign("https://google.com/about")
}
}
```
*   `window.location.replace()`(및 `document.location.replace()`)

이 메서드는 현재 리소스를 제공된 URL의 리소스로 대체합니다.

`assign()` 메서드와의 차이점은 `window.location.replace()`를 사용한 후 현재 페이지가 세션 기록에 저장되지 않는다는 것입니다. 그러나 이 메서드에 대한 제어를 가질 때 열린 리디렉션 취약점을 악용할 수도 있습니다.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.location.replace("http://google.com/about")
}
}
```
*   `window.open()`

`window.open()` 메서드는 URL을 가져와서 이를 새 탭이나 기존 탭 또는 창에 로드합니다. 이 메서드에 대한 제어를 가지면 XSS 또는 열린 리디렉션 취약점을 유발할 수 있는 기회가 될 수 있습니다.

```tsx
//app.component.ts
...
export class AppComponent {
goToUrl(): void {
window.open("https://google.com/about", "_blank")
}
}
```

#### Angular 클래스

*   Angular 문서에 따르면, Angular `Document`는 DOM 문서와 동일하므로 Angular에서 클라이언트 측 취약점을 악용하기 위해 DOM 문서에 대한 일반 벡터를 사용할 수 있습니다. `Document.location` 속성과 메서드는 아래 예제와 같이 성공적인 열린 리디렉션 공격의 싱크가 될 수 있습니다:

```tsx
//app.component.ts
import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(@Inject(DOCUMENT) private document: Document) { }

goToUrl(): void {
this.document.location.href = 'https://google.com/about';
}
}

//app.component.html
<button type="button" (click)="goToUrl()">Click me!</button>
```
*   연구 단계에서 우리는 열린 리디렉션 취약점에 대한 Angular `Location` 클래스도 검토했지만 유효한 벡터를 찾지 못했습니다. `Location`은 애플리케이션이 브라우저의 현재 URL과 상호작용하는 데 사용할 수 있는 Angular 서비스입니다. 이 서비스는 주어진 URL을 조작하는 여러 메서드 - `go()`, `replaceState()`, 및 `prepareExternalUrl()`를 가지고 있습니다. 그러나 우리는 이를 외부 도메인으로 리디렉션하는 데 사용할 수 없습니다. 예를 들어:

```tsx
//app.component.ts
import { Component, Inject } from '@angular/core';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
})
export class AppComponent {
location: Location;
constructor(location: Location) {
this.location = location;
}
goToUrl(): void {
console.log(this.location.go("http://google.com/about"));
}
}
```

결과: `http://localhost:4200/http://google.com/about`
*   Angular `Router` 클래스는 주로 동일한 도메인 내에서 탐색하는 데 사용되며 애플리케이션에 추가적인 취약점을 도입하지 않습니다:

```jsx
//app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'https://google.com', pathMatch: 'full' }]
```

결과: `http://localhost:4200/https:`

다음 메서드도 도메인 범위 내에서 탐색합니다:

```jsx
const routes: Routes = [ { path: '', redirectTo: 'ROUTE', pathMatch: 'prefix' } ]
this.router.navigate(['PATH'])
this.router.navigateByUrl('URL')
```

## 참고문헌

* [Angular](https://angular.io/)
* [Angular Security: The Definitive Guide (Part 1)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-1)
* [Angular Security: The Definitive Guide (Part 2)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-2)
* [Angular Security: The Definitive Guide (Part 3)](https://lsgeurope.com/post/angular-security-the-definitive-guide-part-3)
* [Angular Security: Checklist](https://lsgeurope.com/post/angular-security-checklist)
* [Workspace and project file structure](https://angular.io/guide/file-structure)
* [Introduction to components and templates](https://angular.io/guide/architecture-components)
* [Source map configuration](https://angular.io/guide/workspace-config#source-map-configuration)
* [Binding syntax](https://angular.io/guide/binding-syntax)
* [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)
* [GitHub - angular/dom\_security\_schema.ts](https://github.com/angular/angular/blob/main/packages/compiler/src/schema/dom\_security\_schema.ts)
* [XSS in Angular and AngularJS](https://github.com/swisskyrepo/PayloadsAllTheThings/blob/master/XSS%20Injection/XSS%20in%20Angular.md)
* [Angular Universal](https://angular.io/guide/universal)
* [DOM XSS](https://book.hacktricks.wiki/en/pentesting-web/xss-cross-site-scripting/dom-xss.html)
* [Angular ElementRef](https://angular.io/api/core/ElementRef)
* [Angular Renderer2](https://angular.io/api/core/Renderer2)
* [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)
* [Angular Document](https://angular.io/api/common/DOCUMENT)
* [Angular Location](https://angular.io/api/common/Location)
* [Angular Router](https://angular.io/api/router/Router)