Aplicaciones Angular seguras al final de su vida útil sin tener que reescribirlas: Primeros pasos con Endless Lifecycle Support

¿Alguna vez has actualizado una vieja aplicación Angular a una versión un poco menos antigua, pensando que te daría algo de tiempo, sólo para ser golpeado con una pared de advertencias de seguridad en rojo en tu terminal? Crees que estás avanzando, pero las vulnerabilidades siguen acumulándose como multas de aparcamiento sin pagar.

En lugar de desmontarlo todo o enviar código inseguro, TuxCare's Soporte de Ciclo de Vida Interminable (ELS) le ofrece una forma de parchear vulnerabilidades, mantenerse seguro y alinearse con las mejores prácticas de seguridad de Angular, todo mientras gana tiempo para una actualización adecuada sin el caos.

Veamos cómo empezar.

El nuevo chico del barrio... más o menos

Si mantienes una aplicación Angular heredada que ya no recibe soporte oficial, estás en buena compañía. Según el sitio web de sitio web de npmtodavía hay más de 98.000 descargas semanales de la CLI de Angular v16, prueba de que muchos equipos siguen confiando en versiones anteriores.

¿Cuál es el problema? Un código más antiguo significa dependencias más antiguas (y una lista creciente de problemas de seguridad que pueden violar rápidamente las mejores prácticas de seguridad de Angular si no se corrigen). No es que estas aplicaciones se hayan vuelto malas de repente; es que el ecosistema que las rodea sigue moviéndose, y los actores de amenazas se mueven aún más rápido.

A partir del noviembre de 2024, Angular v16 ha llegado al final de su ciclo de vida (EOL). Aunque todavía se puede instalar (al igual que otras versiones anteriores), ya no se publican actualizaciones de seguridad oficiales.

Si tu aplicación aún no está lista para una migración completa, es totalmente normal; la mayoría de los equipos de producción dan prioridad a la estabilidad y dejan la modernización en segundo plano.

En los ejemplos de abajo, usaremos Angular v16. La versión más reciente aún bajo soporte activo es la v20.

Tienes opciones

Migrar de Angular, o de cualquier framework heredado, no es tan fácil como hacer clic en "Actualizar" y esperar lo mejor.

Si alguna vez has vivido la era de Bootstrap 3, sabrás que a veces "simplemente migrar" es más fácil decirlo que hacerlo. Para la mayoría de las organizaciones, estas aplicaciones Angular antiguas son fundamentales, están estrechamente vinculadas a sistemas backend y no pueden reescribirse de la noche a la mañana.

Quieres modernizar tu sistema, pero quizá no dispongas de los recursos necesarios para hacerlo todo de una vez. Eso no significa que tengas que dejar tu pila sin protección ni que debas renunciar a las mejores prácticas de seguridad de Angular mientras esperas.

Cómo mantenerse seguro sin reescribirlo todo ahora mismo

Ahí es exactamente donde TuxCare Endless Lifecycle Support (ELS) para bibliotecas de TuxCare.

ELS for Libraries mantiene sus versiones anteriores de Angular parcheadas y seguras mucho después de que haya finalizado el soporte oficial, lo que le ayuda a mantener las mejores prácticas de seguridad de Angular y a proteger sus aplicaciones de producción mientras las actualiza según su propio calendario.

Sin tiempos de inactividad, interrupciones ni migraciones para conectarse a nuestro repositorio, y sin tener que reescribir "quemando las naves".

Esto es lo que ELS for Libraries ofrece a los usuarios de Angular:

• Parches de seguridad continuos para versiones de Angular al final de su vida útil.
• Protección contra vulnerabilidades nuevas y en evolución, incluso las que afectan a marcos de trabajo obsoletos.
• Tranquilidad ante el cumplimiento de la normativa, demostrando a los auditores que sus sistemas permanecen parcheados y supervisados.
• Espacio para planificar tu migración, según tu calendario, no el del marco.

Además de Angular, ELS for Libraries también cubre versiones obsoletas de varias bibliotecas de código abierto, entre las que se incluyen CometD, Apache Struts, Apache Spark,^Spring®, AngularJS, Netty, Vue, Next.js y muchas otras.

Por ejemplo, los equipos que se enfrentan a cambios recientes en los marcos de trabajo pueden leer nuestro análisis sobre las implicaciones del fin de vida útil de Next.js o averiguar qué ocurre cuando una organización se enfrenta al fin de vida útil de Apache Spark para comparar esos ciclos de soporte.

Configuración de ELS para bibliotecas para proteger Angular

A continuación se muestra un desglose de cómo configurar el uso de ELS para bibliotecas de TuxCare (que incluye cobertura para Angular al final de su vida útil, entre muchas otras bibliotecas de código abierto) para mantener sus aplicaciones seguras y protegidas.

Vaya a la página Página de Angular ELS en la documentación del sitio web de TuxCare. Notarás que la página que está enlazada está dedicada a versiones de Angular que abarcan 9, 10, 11, 12, 13, 14, 15, 16, 17 y 18. El ejemplo en el código de abajo cubre Angular v16.

1. Lo primero es lo primero, necesitas un nombre de usuario, una contraseña y un token de TuxCare para poder modificar la línea del registro con el token. Una vez que tenga esas credenciales, proceda al paso 2, póngase en contacto con [email protected] para obtener el token.
2. Navegue hasta la raíz de su directorio Angular y cree un archivo .npmrc . Dentro de este archivo es donde vas a añadir la información de registro proporcionada por TuxCare.

mi-proyecto-angular/

├── src/

├── angular.json

├── paquete.json

├── .npmrc         ⚠️ ← Crear it aquí

└── tsconfig.json

1. Copie y pegue esta línea y añádala al archivo .npmrc y guarde. Asegúrese de reemplazar su ${TOKEN} con el que se le ha proporcionado.

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}

1. Abra su archivo package.json y reemplace el archivo dependencias por las dependencias de TuxCare dependencias, como a continuación, y guardar.

"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]"

 },

1. Debe eliminar node_modules y package-lock.jsony borrar la caché. Asegúrese de ejecutar el siguiente comando.

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

1. Asegúrese de que su versión de npm está actualizada. Esto es por razones de seguridad y cumplimiento. Si no está ejecutando una versión de npm 9.6.3 o posterior, ejecute el siguiente comando.

npm instale -g npm@latest

1. Ahora deberías estar listo para ejecutar el comando npm install para instalar la solución Angular v16 ELS.

npm instale

El resultado que se muestra a continuación es un ejemplo de cómo debería ser. Su experiencia puede variar.

925 paquetes añadidos y 926 paquetes auditados en 3 millones de euros.


158 paquetes buscan financiación

  ejecute `npm fund` para más detalles


encontrado 0 vulnerabilidades

Reflexiones finales

El fin de la vida útil no tiene por qué significar el fin de la seguridad. Con Endless Lifecycle Support (ELS) for Libraries de TuxCare, puedes mantener tus aplicaciones Angular seguras, conformes y en línea con las mejores prácticas de seguridad de Angular, mucho después de que termine el soporte oficial, y sin reescribir la funcionalidad principal o revisar tu pila.

Para los desarrolladores y equipos que gestionan aplicaciones críticas para la producción, ELS actúa como una red de seguridad, parcheando las vulnerabilidades en segundo plano para que usted pueda centrarse en el lanzamiento de funciones, no en la persecución de CVE.

Tanto si mantiene Angular v9, v16 o cualquier otra versión intermedia, TuxCare le ayuda a salvar la distancia entre las cargas de trabajo actuales y los planes de actualización futuros, sin tiempo de inactividad, sin prisas y sin sorpresas.

¿Quiere saber más?

Consulte la lista completa de bibliotecas y frameworks compatibles en https://tuxcare.com/endless-lifecycle-support/libraries-eol-support/.

Resumen

Nombre del artículo

Asegurar el final de la vida útil de Angular

Descripción

Aprenda a aplicar las mejores prácticas de seguridad de Angular a las aplicaciones Angular heredadas y al final de su vida útil con el Soporte de Ciclo de Vida Interminable de TuxCare.

Autor

Chris DeMars

Nombre del editor

TuxCare

Logotipo de la editorial