전 세계적으로 디지털 전환이 유입되면서 인프라에 대한 부담이 커지고 있습니다. 해커들은 계속해서 공격 기술을 향상시키고 있어 조금이라도 취약점이 발견되면 악용될 가능성이 큽니다. 그렇기 때문에 많은 개발 팀들은 보안을 강화하고 있고, 개발 방법론을 DevOps에서 DevSecOps로 발전시키고 있습니다.

이 포스팅에서는 Angular 앱을 보호하는 데 사용할 수 있는 네 가지 방법에 대해 설명하겠습니다. 대부분 릴리즈 시점을 중요하게 생각하므로, 워크플로우를 방해하지 않는 간단한 방법들을 소개하겠습니다.

Angular 개요

Angular는 Microsoft에서 개발한 오픈 소스 언어인 TypeScript를 사용하여 단일 페이지 응용 프로그램 (SPA)을 구축할 수 있는 프레임워크입니다. Angular는 핵심 기능을 갖춘 여러 TypeScript 라이브러리를 제공하며 추가 옵션 기능을 위해 더 많은 라이브러리를 추가할 수 있습니다.

Angular 애플리케이션은 NgModules를 사용하여 구축됩니다. 모듈은 컴포넌트에 대한 컴파일 컨텍스트를 제공합니다. Angular 애플리케이션에는 하나 이상의 루트 모듈이 있어야 하며 더 많은 기능 모듈이 있을 수 있습니다.

Angular 아키텍처는 컴포넌트, 뷰 및 서비스를 중심으로 구축됩니다.

1. 컴포넌트는 보기를 정의합니다.
   - 사용자에게 표시하고 애플리케이션 로직에 따라 수정하기 위해 선택할 수 있는 화면 요소들입니다.
   
   
2. 컴포넌트는 서비스를 사용합니다.
   - 서비스 공급자는 종속성 주입을 사용하여 모듈에 추가되어 Angular 모듈을 모듈화하고 쉽게 재사용할 수 있습니다.
   
   
3. 컴포넌트와 서비스는 모두 메타 데이터를 포함하는 데코레이터가 있는 클래스이며 Angular 프레임 워크에 사용 방법을 알려줍니다.

Angular와 AngularJS : 주요 차이점

2010년, Google은 처음으로 Angular1이라고도 하는 AngularJS를 출시했으며 그 인기가 매우 높았지만, React, Vue와 치열한 경쟁을 하게 되었습니다.

2014년, Google은 AngularJS를 완전히 다시 작성하여 JavaScript에서 TypeScript로 변경했다고 발표했습니다. TypeScript의 장점은 정적 입력 기능을 제공한다는 것입니다. Google은 새로운 버전을 Angular2로 명명했습니다.

2 이후의 모든 Angular 버전은 "Angular"또는 "Angular 2+"로 알려져 있습니다. Angular의 버전 관리 히스토리에 대해서는  Angular 로드맵 을 참고하세요.

Angular2는 Angular 사용자를 위한 완전한 변화였습니다. 프로그래밍 언어, 아키텍처 및 데이터 접근 방식이 모두 변경되었습니다. 오늘날 TypeScript를 기반으로 하는 Angular 2+ 버전은 9이며, 많은 개발자들이 AngularJS를 레거시 프레임 워크로 계속 사용하고 있습니다.

AngularJS 사용 시 보안 고려 사항

1. AngularJS는 Angular 2+보다 덜 활발하게 유지보수됩니다. 이전 버전의 AngularJS (1.7 이전)에는 프로토타입 오염, DDoS (Distributed Denial of Service), XSS (Cross-Site Scripting) 및 임의의 명령 실행을 포함하여 29개의 알려진 소프트웨어 취약점을 Snyk 에서 보고했습니다.
   
   
2. 이 취약점을 검토하고 프로젝트 위험을 평가한 후 가능하면 AngularJS를 최신 버전으로 업그레이드해야 합니다.
   
   
3. AngularJS 1.7은 2021 년 6월까지만 유지보수됩니다.

이제, 최신 Angular 2+ 또는“Angular”에 중점을 두겠습니다.

Angular 앱을 보호하는 4 가지 방법

Angular 2+에서 실행되는 애플리케이션을 보호하는 방법을 배우려면 다음 모범 사례를 검토할 수 있습니다. 이러한 모범 사례는 XSS(사이트 간 스크립팅) 및 CSRF(사이트 간 요청 위조)와 같은 공격을 방지하는 데 도움이 됩니다. 이 공격은 low-profile 자동 공격일 수 있지만 대규모 공격 캠페인의 첫 단계로 사용되는 고급 영구 위협의 일부일 수도 있습니다.

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

XSS 공격에는 공격자가 사용자 데이터 도용과 같은 악의적인 작업을 수행하기 위해 패키지의 DOM 요소에 스크립트를 삽입하는 것이 포함됩니다. 이를 방지하려면 여러 곳에서 신뢰할 수없는 입력을 삭제해야 합니다.

1. HTML (내부 HTML 바인딩)
2. 스타일 (CSS)
3. 속성 (바인딩 값)
4. 자료 (파일 참조)

DomSanitizer를 사용하여 항상 외부 사용자가 제공한 신뢰할 수 없는 값을 신뢰할 수있는 값으로 변환하세요. safeValue를 innerHtml 속성에 바인딩하여 HTML 문자열을 서비스 메서드에 전달하여 보안된 값을 얻을 수 있습니다.

import { Component, OnInit } from '@angular/core';  
import { MyService } from './data.service';  
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';  
@Component({  
  selector: 'app-root',  
  template: `<div [innerHtml] = "safeValue"></div>`,  
  providers: [MyService]  
})  
export class MyComponent implements OnInit {  
  safeValue: SafeHtml;  
  constructor(private secure: MyService) {  
    this.safeValue = this.secure.getSafeHtml("<h1>Sanitization Success</h1>");  
  }  
  ngOnInit() {  
  }  
}

2. Angular 파일을 사용자 정의하지 마세요.

Angular 라이브러리를 필요에 맞게 사용자 정의하는 것이 매력적이기 때문에, 사용중인 현재 버전의 Angular에 의존하게 됩니다. 이후 버전의 Angular로 업그레이드하기가 어려우며 중요한 보안 수정 및 기능이 누락 될 수 있습니다. Angular 라이브러리를 개선하고 수정하는 가장 좋은 방법은 풀 요청을 통해 변경 사항을 커뮤니티와 공유하는 것입니다. 이를 통해, 다른 개발자는 변경 사항을 검토하고 다음 버전의 Angular에 변경 사항을 추가 할 수 있습니다.

3. 위험한 Angular API 를 피하세요.

일부 Angular API는 문서에서 보안 위험, 가장 일반적으로 ElementRef 로 표시됩니다. 이 API는 공격자가 페이지의 DOM에 직접 액세스 할 수 있도록 하고 앱을 XSS에 취약하게 만듭니다. 다른 선택 사항이없고 직접 DOM 액세스가 절대적으로 필요한 경우에만 이 API를 사용해야 합니다.

ElementRef 대신 Angular에서 기본적으로 제공되는 템플릿 또는 데이터 바인딩 기능을 사용하는 것이 좋습니다. ElementRef보다 안전한 Renderer2 API를 사용할 수도 있습니다 .

4. HTTP 수준 취약점

Angular의 내장 기능을 사용하여 CSRF (Cross-Site Request Forgery) 및 XSSI (Cross-Site Script Include)를 방지할 수 있습니다. 이러한 문제는 서버 측에서 해결해야하는 보안 문제이지만 Angular의 HttpClient는 이러한 공격에 강한 서버와 응용 프로그램을 통합 할 수 있도록 도와줍니다.

CSRF (Cross-Site Request Forgery) :

CSRF는 애플리케이션에서 신뢰하는 사용자가 무단으로 악의적인 명령을 보내는 공격입니다. 이를 완화하는 일반적인 방법은 애플리케이션 서버가 쿠키에 포함된 임의의 인증 토큰을 보내도록 하는 것입니다. 클라이언트는 쿠키를 읽고 모든 후속 요청에서 동일한 토큰으로 사용자 지정 요청 헤더를 추가합니다. 이를 통해 인증 토큰이 없는 공격자의 요청을 거부 할 수 있습니다.

Angular HttpClient를 사용하면 클라이언트 측에서 인증 토큰을 기본적으로 지원합니다.

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

XSSI는 공격자의 웹 사이트가 응용 프로그램의 JSON API에서 데이터를 읽을 수 있도록 하는 공격입니다. 기본 JavaScript 객체 생성자를 재정의 할 수 있는 이전 브라우저의 취약성을 악용합니다. 그런 다음 <script> 태그를 사용하여 API URL을 제공할 수 있습니다 .

서버는 모든 JSON 응답을 실행 불가능하게 하여 이 공격을 완화할 수 있습니다. 예를 들어, 앞에 문자열 ")]} ', \ n"을 붙여서 수행할 수 있습니다. Angular의 HttpClient는 이 규칙을 인식하고 모든 JSON 응답에서 문자열 ")]} ', \ n"을 자동으로 제거합니다.

추가 Angular 성능 리소스 :

• Angular 앱성능 향상을 위한 14가지 방법
• Angular 애플리케이션에 TurboCharged 데이터 그리드 추가하기
• Web Worker로 Angular 앱 속도 향상하기
• Angular에서 웹 컴포넌트 사용하기
  
• JSON 웹 토큰을 사용한 Angular 보안 및 인증 가이드
    

Angular 보안 - 결론

보안은 보안 전문가뿐만 아니라 개발자도 해결해야 할 중요한 문제입니다. 보안 코드를 작성하는 간단한 방법은 버그 및 오류의 악용을 방지하는 데 도움이 될 수 있습니다. 물론, 완벽하게 막을 수는 없으며, 수정 사항, 릴리스할 패치 및 대응해야 할 긴급한 문제들이 항상 존재할 것입니다. 그러나 보안을 통해 불필요한 위험을 피할 수 있습니다.

프레임워크에 구애받지 않는 웹 컴포넌트를 찾고 계신가요?

- Wijmo : JavaScript 기반 Chart, Grid, Input, UI 컨트롤 

- SpreadJS : JavaScript 기반 MS Excel 스프레트 시트