Política de Seguridad de Contenido con Next.js: Mejorando la Seguridad de tu Sitio Web

Hola a todos. Gracias por tenerme en la Cumbre React US 2023. Soy Lucas Estevão, Ingeniero Principal de UI y Gerente Técnico en Avenue Code, una consultoría a través de la cual he estado ayudando a empresas como Toys R Us, Wal-Mart e incluso la icónica Apple a construir un software mejor. También presento un podcast sobre career en tecnología para hablantes de portugués, así que si tienes curiosidad, échale un vistazo en las principales plataformas de streaming. Solo necesitas buscar Códigos de Carreira.

Estoy realmente emocionado de hablarles sobre la Política de Security con Next.js y cómo pueden mejorar la seguridad de su sitio web. Quiero comenzar respondiendo ¿por qué debería importarme una política de security? Y para resumir, su navegador no es 100% seguro. Tampoco lo es React o Next.js o cualquier marco que puedas estar utilizando. Aunque los navegadores tienen incorporadas características de security como la política de origen único y course, no podemos darlo por hecho. Las bibliotecas y frameworks como React o Next.js, de nuevo, hacen un trabajo bastante decente sanitizando el código y proporcionando características para cerrar las brechas de security, pero eso no es suficiente. Si un código como este se inyecta en su sitio web, su navegador o las características predeterminadas de React no pueden prevenir que esto se ejecute. Ahí es cuando una CSP resulta útil.

Una CSP o una política de security es una capa de security que ayuda a proteger las aplicaciones de ataques como el scripting de tipo cruzado, XSS o ataques de data inyección, y lo hace restringiendo la funcionalidad del navegador. Una CSP está compuesta por una lista de directivas de política. El navegador estará limitado a permitir solo lo que la política define. Aquí hay ejemplos de directivas de política, donde estoy definiendo que las fuentes predeterminadas de contenido deben provenir de mi dominio y estoy agregando una excepción para las fuentes porque quiero permitir que se descarguen las fuentes web de Google. Ahora veamos cómo podemos implementar eso en una aplicación XJS. Vamos a la práctica ahora.

Bien, esta es una aplicación XJS, solo una plantilla que creé usando NPX. Lo primero que queremos intentar hacer es añadir la CSP a la página. Y la forma más fácil de hacerlo es añadiéndola en la etiqueta head usando una etiqueta meta.

Así que vamos a la aplicación y vemos que la imagen no se está mostrando aquí. Y la imagen no se muestra porque proviene de un dominio diferente. Viene de React Summit. Y mi directiva está imponiendo que el contenido debería venir por defecto de mi propio dominio. La imagen no debería aparecer, pero vamos a eliminar esto de aquí. Esa no es la mejor manera de añadir una política de security.

Intentemos hacerlo añadiendo encabezados. Así que si vas a la documentation, ves cómo añadir encabezados a tu aplicación Next.js, y ves un montón de opciones para añadir diferentes encabezados, incluyendo la política de security. Así que preparé algo aquí. Elegí algunos de los encabezados de security. Voy a añadirlos a nuestra configuración de la aplicación Next.js. Y también voy a añadir los encabezados. Y de nuevo, todo esto está disponible en los documentos. Voy a guardar esto, y vamos al paso número dos.

Lo que queremos hacer aquí es simplemente añadir una política de security simple para verla funcionando en los encabezados. Así que voy a hacer esto y añadir la política de security a mi encabezado. Y quiero ver esto sucediendo en acción. Se está recargando. Voy a recargar esta página. Sólo para asegurarme, voy a ir a la pestaña de red. Vamos a comprobarlo. Abre esto, puedes ver que la política de security está ahí exactamente de la manera que la configuramos. La imagen todavía no aparece. Vamos al paso número tres y intentemos usarlo para añadir una política de security usando un middleware. Y para eso, vamos a crear un nuevo archivo en la raíz de nuestra aplicación. Así que nuevo archivo, en realidad no aquí, sino en la raíz, nuevo archivo middleware.ts, déjame mover esto aquí. Y si vuelves a la documentation de nuevo, puedes ver todo acerca de cómo trabajar con los middlewares.

Y voy a tomar este ejemplo que ya está añadiendo denounce. Y habrá casos en los que necesites scripts en línea. Y para esos escenarios, denounce permitirá que tus scripts se ejecuten sin perder la security de tu CSV. Y denounce es solo una cadena, un hash creado para un solo uso. Así que veamoslo en acción.

Voy a copiar estos basados en el middleware. De hecho, preparé una política de contenido security personalizada aquí, más simple que esta. Así que voy a reemplazar eso. Y otra cosa que quiero hacer es añadir algunas reglas condicionalmente. Así que voy a añadir este pequeño código aquí, para comprobar cuál es mi entorno. Si no es producción, asumiré que es desarrollo. Y si es desarrollo, puedo perder mi CSP. Si es producción, puedo hacerlo más estricto. Así que guardé.

Vamos al paso número cuatro, y hagamos una pequeña limpieza. Vamos a la configuración de Next, y de hecho, eliminemos la política de security de contenido de allí. Voy a guardar esto. Debería verse así, exactamente como está en nuestro middleware. Y veamos cómo está funcionando la aplicación ahora. Prácticamente lo mismo. Recarguemos para asegurarnos. Comprobemos si la política de security de contenido, se muestra en los encabezados. Oh, está cargando. Aquí vamos, política de security de contenido. Todo lo que añadimos, incluyendo los now's. Comprobemos el encabezado xnow's. También está aquí, porque estamos añadiendo el encabezado en esta línea. Ahora necesitamos validar nuestra política de security de contenido, y para eso podemos usar prácticamente dos sitios web. Uno, puedes simplemente copiar tu política de security de contenido y pegarla en el de Google. Voy a eliminar esta pequeña condición, de lo contrario no va a funcionar, y comprobar.

Te dará prácticamente un informe de todo lo que necesitamos mejorar o hacer mejor o tal vez algo falta o está mal. Puedes agregar tu dominio aquí si quieres. Luego también tienes Mozilla, así que vamos a comprobar apple.com por ejemplo. Aquí vamos, tienes tu informe de seguridad de contenido con un montón de otra información sobre la seguridad de tu sitio web.

Pero una cosa que deberíamos hacer aquí que olvidé, es agregar realmente el dominio de React Summit a mi directiva de imagen. De esta manera, podría ver realmente la imagen cargada. Así que vamos a comprobar nuestra aplicación una vez más. Esperemos a la recarga en caliente y aquí vamos. Aquí está la imagen porque ahora mi política de seguridad de contenido lo permite.

Ahora, un consejo extra, no necesitas romper tu aplicación. Puedes simplemente usar un informe de seguridad de contenido para identificar los problemas en tu aplicación. Y una vez que sepas qué está pasando, puedes entonces hacer cumplir y prevenir que tu aplicación se rompa mientras añades una nueva capa de seguridad para aumentar la seguridad de tu aplicación web. Gracias. Espero que encuentres útil este contenido y puedas mejorar la seguridad de tus aplicaciones. Puedes encontrar esa aplicación de muestra en mi GitHub y feliz codificación.