ELS로 수명이 다한 Angular 앱의 보안 유지

이 블로그 글의 AI 요약으로 바로 가기

시간을 벌 수 있을 거라 생각하고 오래된 Angular 앱을 조금 덜 오래된 버전으로 업그레이드했다가 단말기에 빨간색 보안 경고가 가득 표시된 적이 있나요? 앞으로 나아가고 있다고 생각하지만 취약점은 미납 주차 위반 딱지처럼 계속 쌓여만 갑니다.

모든 것을 찢어버리거나 안전하지 않은 코드를 배포하는 대신 TuxCare의 엔드리스 수명 주기 지원(ELS) 를 사용하면 혼란 없이 적절한 업그레이드를 위한 시간을 확보하면서 취약점을 패치하고, 보안을 유지하고, Angular 보안 모범 사례에 부합할 수 있는 방법을 제공합니다.

시작하는 방법을 자세히 알아보세요.

블록의 새로운 아이... 일종의

더 이상 공식적으로 지원되지 않는 레거시 Angular 앱을 유지 관리하고 있다면 다행입니다. 에 따르면 npm의 웹사이트에 따르면 여전히 98,000회 이상의 주간 다운로드 이 매주 98,000건 이상 다운로드되고 있으며, 이는 많은 팀이 여전히 이전 버전을 사용하고 있다는 증거입니다.

문제는 무엇일까요? 오래된 코드는 오래된 종속성을 의미하며, 패치하지 않고 방치할 경우 Angular 보안 모범 사례를 빠르게 위반할 수 있는 보안 문제 목록이 늘어납니다. 이러한 앱이 갑자기 나빠졌다는 것이 아니라 앱 주변의 생태계가 계속 움직이고 위협 행위자가 더 빠르게 움직인다는 것입니다.

2024년 11월 기준 2024년 11월, Angular v16은 지원 종료(EOL). 여전히 이 버전(및 기타 이전 버전)을 설치할 수는 있지만, 공식 보안 업데이트는 중단되었습니다.

앱이 아직 완전한 마이그레이션을 진행할 준비가 되지 않았다면, 이는 지극히 정상적인 일입니다. 대부분의 운영 팀은 안정성을 최우선으로 하고, 현대화는 그 다음으로 고려하기 때문입니다.

아래 예제에서는 Angular v16을 사용합니다. 아직 지원 중인 가장 최신 버전은 v20입니다.

옵션이 있습니다.

Angular 또는 레거시 프레임워크에서 마이그레이션하는 것은 '업그레이드'를 클릭하고 최상의 결과를 기대하는 것만큼 쉽지 않습니다.

부트스트랩 3 시대를 경험해 본 적이 있다면 "그냥 마이그레이션"이 말처럼 쉽지 않다는 것을 알고 계실 것입니다. 대부분의 조직에서 이러한 구형 Angular 앱은 미션 크리티컬하고 백엔드 시스템과 긴밀하게 연결되어 있으며 하룻밤 사이에 다시 작성할 수 없습니다.

시스템을 현대화하고 싶지만, 한 번에 모두 진행할 자원이 부족할 수도 있습니다. 그렇다고 해서 기다리는 동안 시스템 스택을 무방비 상태로 두거나, Angular 보안 모범 사례를 소홀히 해야 한다는 뜻은 아닙니다.

지금 당장 모든 것을 다시 작성하지 않고도 보안을 유지하는 방법

바로 이 점이 바로 TuxCare의 라이브러리용 ELS(엔드풀 라이프사이클 지원) 가 필요한 이유입니다.

라이브러리용 ELS는 공식 지원이 종료된 후에도 기존 Angular 버전에 대한 패치 및 보안을 유지하여 자체 일정에 따라 업그레이드하면서 Angular 보안 모범 사례를 유지하고 프로덕션 앱을 보호할 수 있도록 지원합니다.

리포지토리에 연결하기 위한 다운타임, 중단 또는 마이그레이션이 없으며, "배를 태우는" 재작성이 필요하지 않습니다.

다음은 라이브러리용 ELS가 Angular 사용자에게 제공하는 기능입니다:

수명이 종료된 Angular 버전에 대한 지속적인 보안 패치가 진행 중입니다.
새로운 취약점과 진화하는 취약점, 심지어 오래된 프레임워크를 대상으로 하는 취약점까지 보호합니다.
감사자에게 시스템이 계속 패치되고 모니터링되고 있음을 보여줌으로써 안심하고 컴플라이언스를 준수할 수 있습니다.
프레임워크의 일정이 아닌 사용자의 일정에 맞춰 마이그레이션을 계획할 수 있는 여유를 가지세요.

Angular 외에도 ELS for Libraries는 CometD, Apache Struts, Apache Spark,^Spring®, AngularJS, Netty, Vue, Next.js 등 다양한 오픈소스 라이브러리의 지원 종료 버전을 포함하여 다수 다루고 있습니다.

예를 들어, 최근 프레임워크 전환을 겪고 있는 팀이라면 next.js의 지원 종료 ( EOL )가 미치는 영향에 대한 당사의 분석 자료를 참고하거나, 조직이 Apache Spark의 지원 종료 상황에 직면했을 때 어떤 일이 발생하는지 살펴봄으로써 각 지원 주기를 비교해 볼 수 있습니다.

라이브러리용 ELS를 설정하여 앵귤러 보안 유지

다음은 앱을 안전하게 보호하고 유지하기 위해 TuxCare의 라이브러리용 ELS(다른 많은 오픈 소스 라이브러리 중 수명이 종료된 Angular에 대한 보장 포함)를 사용하여 설정하는 방법에 대한 분석입니다.

페이지로 이동합니다. 앵귤러 ELS 페이지 로 이동합니다. 링크된 페이지는 9, 10, 11, 12, 13, 14, 15, 16, 17, 18에 걸친 Angular 버전 전용 페이지임을 알 수 있습니다. 아래 코드의 예는 Angular v16을 다룹니다.

먼저 토큰으로 레지스트리 줄을 수정하려면 사용자 이름, 비밀번호, TuxCare의 토큰이 필요합니다. 이러한 자격 증명이 있으면 2단계로 진행하여 [email protected] 에 문의하여 해당 토큰을 받습니다.
Angular 디렉터리의 루트로 이동하여 .npmrc 파일을 만듭니다. 이 파일 내에 TuxCare에서 제공한 레지스트리 정보를 추가할 수 있습니다.

my-angular-project/

├── src/

├── angular.json

├── package.json

├── .npmrc         ⚠️ ← Create it 여기

└── tsconfig.json

이 줄을 복사하여 붙여넣은 다음 .npmrc 파일에 추가하고 저장합니다. 반드시 ${TOKEN} 을 제공된 토큰으로 바꾸어야 합니다.

registry=https://registry.npmjs.org/

@els-js:registry=https://nexus.repo.tuxcare.com/repository/els_js/

//nexus.repo.tuxcare.com/repository/els-js/:_auth=${TOKEN}

열고 package.json 파일을 열고 의존성 블록을 TuxCare 의존성 로 바꾸고 저장합니다.

"dependencies": {

   "@angular/animations": "npm:@els-js/[email protected]",

   "@angular/common": "npm:@els-js/[email protected]",

   "@angular/compiler": "npm:@els-js/[email protected]",

   "@angular/core": "npm:@els-js/[email protected]",

   "@angular/forms": "npm:@els-js/[email protected]",

   "@angular/platform-browser": "npm:@els-js/[email protected]",

   "@angular/platform-browser-dynamic": "npm:@els-js/[email protected]",

   "@angular/router": "npm:@els-js/[email protected]",

   "rxjs": "^7.4.0",

   "tslib": "^2.3.0",

   "zone.js": "~0.13.0"

 },

 "devDependencies": {

   "@angular-devkit/build-angular": "^16.2.12",

   "@angular/cli": "^16.2.12",

   "@angular/compiler-cli": "npm:@els-js/[email protected]",

   "@types/jasmine": "~4.3.0",

   "@types/node": "^18.7.0",

   "jasmine-core": "~4.6.0",

   "karma": "~6.4.0",

   "karma-chrome-launcher": "~3.2.0",

   "karma-coverage": "~2.2.0",

   "karma-jasmine": "~5.1.0",

   "karma-jasmine-html-reporter": "~2.1.0",

   "typescript": "~5.1.3"

 },

 "overrides": {

   "@angular/animations": "npm:@els-js/[email protected]",

   "@angular/common": "npm:@els-js/[email protected]",

   "@angular/compiler": "npm:@els-js/[email protected]",

   "@angular/core": "npm:@els-js/[email protected]",

   "@angular/forms": "npm:@els-js/[email protected]",

   "@angular/platform-browser": "npm:@els-js/[email protected]",

   "@angular/platform-browser-dynamic": "npm:@els-js/[email protected]",

   "@angular/compiler-cli": "npm:@els-js/[email protected]",

   "@angular/router": "npm:@els-js/[email protected]",

   "@babel/runtime": "7.26.10",

   "esbuild": "0.25.0",

   "rxjs": "^7.4.0",

   "[email protected]": "npm:@els-js/[email protected]",

   "[email protected]": "npm:@els-js/[email protected]",

   "[email protected]": "npm:@els-js/[email protected]",

   "[email protected]": "npm:@els-js/[email protected]"

 },

노드 모듈의 node_modules 와 package-lock.json을 제거하고 캐시를 지워야 합니다. 아래 명령을 실행하세요.

rm -rf node_modules package-lock.json && npm cache clean --force

npm 버전이 최신 버전인지 확인하세요. 이는 보안 및 규정 준수를 위한 것입니다. npm 버전을 실행하지 않는 경우 9.6.3 이상의 버전을 실행하고 있지 않다면 아래 명령을 실행하세요.

npm 설치 -g npm@latest

이제 npm 설치 명령을 실행하여 Angular v16 ELS 솔루션을 설치하면 됩니다.

npm 설치

아래 출력은 예상 결과의 예시입니다. 마일리지는 다를 수 있습니다.

3개월 동안 925개의 패키지를 추가하고 926개의 패키지를 감사했습니다.


158개의 패키지가 펀딩을 찾고 있습니다.

  자세한 내용은 `npm fund`를 실행하세요.


0개의 취약점 발견

최종 생각

수명 종료가 보안 종료를 의미할 필요는 없습니다. 공식 지원이 종료된 후에도 핵심 기능을 다시 작성하거나 스택을 점검하지 않고도 TuxCare의 라이브러리용 ELS(엔드리스 수명 주기 지원)를 사용하면 Angular 앱을 안전하고 규정을 준수하며 Angular 보안 모범 사례에 따라 유지할 수 있습니다.

프로덕션에 중요한 앱을 관리하는 개발자와 팀에게 ELS는 안전망과 같은 역할을 하며, 백그라운드에서 취약점을 패치하여 CVE를 쫓는 대신 기능 출시에 집중할 수 있도록 해줍니다.

Angular v9을 유지 관리하든, v16을 유지 관리하든, 그 사이에 있는 모든 것을 유지 관리하든, TuxCare는 다운타임이나 서두를 필요 없이 오늘의 워크로드와 내일의 업그레이드 계획 사이의 간극을 메울 수 있도록 도와줍니다.

자세히 알아볼 준비가 되셨나요?

지원되는 라이브러리 및 프레임워크의 전체 목록은 다음에서 확인하세요. https://tuxcare.com/endless-lifecycle-support/libraries-eol-support/.

요약