• 검색

Angular는 반응형 범용 단일 페이지 응용 프로그램(Single Page Applications)을 구축하기 위한 훌륭한 플랫폼입니다. 모든 Angular의 안정적인 릴리스는 전 세계 수많은 기업 및 사용자가 참여하고 제작하고 배포합니다. 여기에서는 Angular의 보안 측면으로 중점 적으로 이야기해 볼까 합니다.

웹 개발은 작동하는 코드를 작성하는 것이 아니라, 취약하지 않은 코드를 작성하는 것입니다. 다른 웹 응용 프로그램에 대한 여러 가지 일반적인 취약점이 정기적으로 드러납니다. 취약점은 오래된 종속성, 잘못된 코딩 방법 또는 패치 업데이트의 불규칙성을 통해 발생할 수 있습니다.

이 포스팅에서는 Angular 응용 프로그램에서 발생할 수 있는 취약점과 이러한 취약점을 피하는 가장 좋은 방법에 대해 설명합니다.

정기적인 Angular 업데이트 및 취약한 종속성

Angular 팀은 다양한 기능 개발, 버그 및 취약점 수정, 보안 패치 등을 위해 정기적으로 릴리스를 게시하고 있습니다. 소프트웨어 개발팀은 Angular 라이브러리를 지속적으로 업데이트하여 사용 가능한 최신 개발과 동기화 상태를 유지할 것을 강력히 권장합니다. 

그렇지 않은 경우 악의적인 사용자가 이전 버전의 소프트웨어와 관련된 알려진 보안 취약점을 통해 응용 프로그램을 공격할 수 있습니다.

오늘날 수 많은 타사 라이브러리 구성 요소를 찾아 볼 수 있으며, 이러한 라이브러리를 사용하지 않고 응용 프로그램을 개발하는 것은 이제는 정말 어려운 작업일 수 있습니다. 라이브러리는 때때로 공격자가 유해한 데이터나 코드를 응용 프로그램에 입력하기 위해 악의적으로 사용할 수 있는 공개 된 취약점을 가질 수 있습니다. 잘 알려진 취약점 중 일부에는 CSRF, 버퍼 오버플로, XSS 등이 있습니다.

종속성과 구성 요소에 일반적인 허점과 취약점이 없는지 확인하기 위해 오픈 소스 취약점 관리 도구를 사용할 수 있습니다 .

다음은 코드 보안을 위해 수행 할 수있는 작업 목록입니다.

1. 항상 npm 또는 GitHub와 같은 저장소에서 라이브러리를 다운로드하십시오.
2. 업데이트된 버전의 라이브러리를 사용하고 더 이상 사용되지 않는 또는 단종된 패키지를 피하십시오.
3. npm 감사를 실행하여 코드를 모니터링하거나 코드 분석 도구를 사용하십시오.
4. NVD (National Vulnerability Database) 및 CVE (Common Vulnerabilities and Exposures)와 같은 보안 리소스를 정기적으로 방문하십시오.

사이트 간 스크립팅 방지 (XSS)

악의적인 사용자는 XSS를 통해 일반 사용자가 액세스하는 웹 페이지에 클라이언트 쪽 스크립트를 입력할 수 있습니다. 이 코드는 상당한 피해를 줄 수 있습니다. 예를 들어, 사용자 데이터를 훔치거나 피해를 입힐 의도로 사용자를 사칭하는 작업을 수행 할 수 있습니다. XSS에 대한 자세한 내용은 OWASP 웹 사이트를 참조하십시오 .

Angular 살균(Sanitization) 및 보안 컨텍스트

XSS 버그를 체계적이고 효과적으로 차단하기 위해 Angular는 기본적으로 각 값을 신뢰할 수 없는 값으로 가정합니다. 따라서 property, style, attribute, interpolation 또는 클래스 바인딩(class binding)을 통해, 템플릿(template)을 사용하여 값을 DOM에 입력하면 Angular는 자동으로 값을 삭제하고, 이러한 신뢰할 수 없는 값을 허용하지 않습니다.

BrowserModule의 샘플 선언은 다음과 같습니다.

export const BROWSER_SANITIZATION_PROVIDERS: Array<any> = [
  {provide: Sanitizer, useExisting: DomSanitizer},
  {provide: DomSanitizer, useClass: DomSanitizerImpl},
];

@NgModule({
  providers: [
    BROWSER_SANITIZATION_PROVIDERS
    ...
  ],
  exports: [CommonModule, ApplicationModule]
})
export class BrowserModule {}

DomSanitizer의 기본 개념은 입력을 삭제하고, 사용자가 제출한 데이터를 정리하는 것입니다. 다음은 클래스 스켈레톤(skeleton )의 모습에 대한 예입니다.

export enum SecurityContext { NONE, HTML, STYLE, SCRIPT, URL, RESOURCE_URL }

export abstract class DomSanitizer implements Sanitizer {
  abstract sanitize(context: SecurityContext, value: SafeValue|string|null): string|null;
  abstract bypassSecurityTrustHtml(value: string): SafeHtml;
  abstract bypassSecurityTrustStyle(value: string): SafeStyle;
  abstract bypassSecurityTrustScript(value: string): SafeScript;
  abstract bypassSecurityTrustUrl(value: string): SafeUrl;
  abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl;

알다시피, 두 가지 뚜렷한 패턴이 있습니다. 먼저 살균 메소드(sanitize method)가 있습니다. 이는 '컨텍스트(context)'와 '신뢰할 수 없는 값(untrusted value)'을 식별하고 "신뢰할 수 있는 값(trusted valu)"을 리턴합니다.

두 번째 방법은 '신뢰할 수 없는 값(untrusted value)'을 캡처하는 'bypassSecurityTrustX'방법을 사용합니다. 이는 값 사용(value usage)을 기반으로 하며 신뢰할 수 있는 객체를 반환합니다.

Sanitize () 메소드

특정 컨텍스트에 대해 값을 신뢰할 수 있는 경우, sanitize 메소드는 그 안에 안전한 값을 노출 시키고 직접 활용합니다. 그렇지 않은 경우, 보안 컨텍스트를 기반으로 하여 안전하게 렌더링됩니다.

세니타이징 값을 삭제하기 위한 세 가지 주요 기능이 있습니다.

1. 신뢰할 수 없는 HTML 값을 구문 분석하고 토큰을 확인하여 삭제하는 sanitizeHTML 함수.

2. 정규식을 사용하여 신뢰할 수 없는 스타일 또는 URL 값을 삭제하는 sanitizeStlye 함수.

3. 정규식을 사용하여 신뢰할 수 없는 URL 값을 삭제하는 sanitizeURL 함수.

살균(Sanitization)을 비활성화하는 방법

살균(sanitization)을 비활성화해야하는 특정 상황에서는 사용자가 bypassSecurityTrustX 방법 중 하나를 통해, 생성 된 값을 사용하여 보안 문제를 해결할 수 있습니다. 이를 관련 템플릿의 값에 바인딩 할 수 있습니다.

예를 들면 다음과 같습니다.

import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml]="html"></div>
  `,
})
export class App {
  constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml('<h1>DomSanitizer</h1><script>ourSuperSafeCode()</script>') ;
  }
} 

JSON 웹 토큰을 사용한 Angular 인증

Angular에서 인증을 구현하려는 경우 가장 좋은 방법은 JWT 기반 인증 시스템을 사용하는 것입니다. 실제로 단일 웹 페이지 애플리케이션 (SPA)에서 인증 시스템을 구현하는 경우 JSON 웹 토큰을 사용하는 것이 가장 좋습니다. 간단히 말해서, JWT는 디지털 서명 된 JSON 페이로드이며 URL 친화적인 문자열 형식으로 인코딩됩니다.

토큰에 포함된 페이로드는 사용자 세션을 정의합니다. 이는 userId 또는 emailId와 같이 사용자에게 고유한 세부 사항이 포함되어 있음을 의미할 수 있습니다. 토큰이 유효한지 확인하려면 서버가 토큰의 유효성을 검사해야 합니다. 이것이 의미하는 바는 서버가 토큰을 확인하기 위해 데이터베이스에 접속할 필요가 없다는 것입니다.

토큰은 만료되면 무효화되고 만료 시간은 토큰을 만들 때 정의됩니다.

Angular 인증 프로세스 개요

1. 사용자가 계정을 만들면 인증 서버는 새 토큰을 만들어 클라이언트 측 응용 프로그램으로 되돌립니다.
2. 토큰 페이로드는 사용자 고유의 항목 (예 : userId) 및 만료 시간을 포함하는 추가 세부 사항을 지정합니다.
3. 프론트 엔드는 이 토큰을 어딘가에 저장하는 것이 바람직합니다. 쿠키에 포함하고 토큰을 모든 요청의 헤더에 추가합니다.
4. 서버는 토큰의 유효성을 검사하고 토큰이 유효하면 사용자가 요청된 리소스에 액세스할 수 있습니다.
5. 토큰이 만료되면 서버는 페이로드가 데이터베이스의 데이터와 일치하는지 디코딩하고 확인합니다. 그렇다면 새 토큰이 생성됩니다.

Angular에 대한 자세한 내용은 Angular-University.io의 문서를 참조하십시오.

콘텐츠 보안 정책

CSP 또는 콘텐츠 보안 정책은 XSS 및 데이터 삽입을 포함한 특정 유형의 공격을 탐지하고 차단하는 데 도움이 되는 추가 보안 계층입니다. 이러한 공격은 웹 사이트 손상하거나 악성 코드 배포를 통해 데이터를 도난하는 데에 목표가 있습니다.

CSP를 사용하려면 올바른 Content-Security-Policy HTTP 헤더를 리턴하도록 웹 서버를 구성해야합니다. MDN 웹 사이트에서 CSP를 활성화하는 자세한 단계를 찾을 수 있습니다 .

오프라인 템플릿 컴파일러 또는 AOT 컴파일러 사용

Angular 템플릿은 이론적으로 실행 가능하므로, 템플릿의 HTML 태그, 바인딩 표현식 및 속성은 안전을 위해 신뢰되어 져야 합니다. 하지만, 침입자는 템플릿 상의 의도하지 않은 값을 파싱하여, 악의적인 작업을 수행할 수 있습니다.

이러한 위반을 방지하기 위해 사용자는 오프라인 템플릿 컴파일러(offline template compilers)를 활용할 수 있습니다. 이 프로세스는 템플릿 주입이라고도 합니다.

Angular CLI를 사용하는 경우 AOT를 쉽게 활성화 할 수 있습니다.

ng build --aot
ng serve -aot

DOM API를 직접 사용하지 마십시오

불행하게도 내장 브라우저 DOM API는 보안 취약점으로부터 애플리케이션을 자동으로 보호하지 않습니다. 예를 들어 'document'- 'ElementRef'를 통해 사용 가능한 노드에 안전하지 않은 메소드가 포함될 수 있습니다.

사용자는 직접적인 수단을 통해 DOM과의 상호 작용을 피하고, 가능한 경우 Angular 템플릿을 사용해야합니다.

서버 측의 XSS 보호

클라이언트 측의 데이터 유효성 검사는 일반적으로 미용 목적입니다. 누군가는 무언가를 깰 의도로 백-엔드에 직접 API 호출을 시도할 수 있습니다.

서버측 코드의 모든 데이터는 유효성을 검사해야하며, 서버 XSS 취약점을 방지하기 위해 적절히 탈출해야합니다. Angular 응용 프로그램에서 템플릿 코드를 주입하는 것은 응용 프로그램에 직접 실행 코드를 주입하는 것과 유사하기 때문입니다.

서버 측의 Angular 템플릿은 템플릿 언어를 사용하여 생성하지 않는 것이 좋습니다.

HTTP 수준 취약점

Angular에는 XSSI (Cross-Site Script Inclusion) 및 CSRF 또는 XSRF (Cross-Site Request Forgery)와 같은 몇 가지 일반적인 HTTP 취약점을 방지 할 수 있는 지원 기능이 내장되어 있습니다.

이 취약점은 모두 서버 측에서 주로 억제되어야 합니다. 그러나 Angular는 헬퍼(helpers)가 클라이언트 측에서 간단하게 통합할 수 있도록 지원합니다.

사이트 간 스크립트 포함 (XSSI)

JSON 취약점이라고도 하는 XSSI는 공격자의 웹 사이트가 JSON API를 사용하여 데이터에 액세스할 수 있도록 합니다. 이러한 공격은 기본 JavaScript 객체 생성자를 재정의 한 후 <script>태그를 통해 API URL을 포함하여 이전 브라우저에서 실행합니다.

서버는 모든 JSON 응답에 접두사를 사용하여 이러한 공격을 차단하고 문자열 ")]} ', \ n"을 사용하여 실행 불가능하게 만들 수 있습니다.

AngularHttpClient 라이브러리는 구문 분석하기 전에 각 응답에서 문자열 ")]} ', \ n"을 읽고 제거할 수 있습니다.

사이트 간 요청 위조 (XSRF)

'원 클릭 공격'또는 '세션 라이딩'이라고도하는 XSRF는 사용자가 신뢰하는 웹 응용 프로그램에서 무단 명령이 전송되는 웹 사이트 위반입니다.

일반적인 anti-XSRF 메소드에서, 응용 프로그램 서버는 쿠키를 통해 임의 인증 토큰을 전송합니다. 수신 코드는 쿠키를 읽고 각 후속 요청에 대한 토큰에 사용자 지정 요청 헤더를 포함합니다. 그런 다음 서버는 수신된 쿠키 값과 요청 헤더 값을 비교하여 값이 없거나 일치하지 않는 경우 요청을 거부합니다.

이 방법이 효과적인 이유는 모든 브라우저가 동일한 원본 정책을 사용하기 때문입니다. 원래 웹 사이트의 코드만 사이트에서 쿠키를 읽고, 요청 시 사용자 지정 헤더를 포함할 수 있습니다. 따라서 신뢰할 수 있는 사용자 응용 프로그램 만 쿠키를 읽고, 사용자 지정된 헤더를 추가할 수 있습니다.

Angualr 보안 요약

Angular에서 컴포넌트를 빌드할 때 알아야 할 모든 보안 정보를 다뤘습니다. 보안을 중요하게 생각하는 것이 중요합니다 (프론트 엔드에 만 국한되지 않아야 합니다).