Protege Tu Aplicación Next.js Con una Política de Seguridad de Contenido

Hola a todos. Gracias por tenerme en la Conferencia React Advanced 2023. Soy Lucas Esteveau. Soy un contratista principal de ingeniería de interfaz de usuario de Avenue Code en Apple desde que me mudé a California hace unos cuatro años. También presento un podcast en portugués brasileño sobre la carrera en tecnología. Así que si tienes curiosidad y hablas portugués, échale un vistazo en las principales plataformas de streaming.

Estoy realmente emocionado de hablarles sobre cómo debería ser su aplicación Next.js con una Política de Seguridad de Contenido hoy y quiero empezar respondiendo ¿por qué debería preocuparme por una Política de Seguridad de Contenido? Bueno, resulta que tu navegador no es 100% seguro. Ya sea React o Next.js o cualquier biblioteca o marco que puedas estar utilizando para tu aplicación web. Aunque los navegadores tienen características de seguridad incorporadas como la política de origen único y CORS y bibliotecas y marcos como React y Next.js hacen un trabajo bastante decente en la limpieza del código y proporcionando características web para cerrar brechas de seguridad, no podemos darlo por hecho. Si un código como este se inyecta en tu sitio web, tu navegador o las características predeterminadas de React no pueden prevenir que esto se ejecute. Es decir, tu aplicación podría estar expuesta a ataques de scripting de tipo cruzado, y los preciados datos podrían filtrarse.

Ahí es cuando una CSP resulta útil. Una política de seguridad de contenido. Es una capa de seguridad que ayuda a proteger las aplicaciones de ataques como los ataques de scripting de tipo cruzado o ataques de inyección de datos, y lo hace restringiendo la funcionalidad del navegador. Una política de seguridad de contenido está compuesta por una lista de directivas de política. El navegador estará limitado a permitir solo lo que definas en tu política. Así que aquí tienes un ejemplo de cómo se compone una política de seguridad de contenido. Aquí otro ejemplo, donde las directivas de política, donde estoy definiendo que las fuentes predeterminadas de contenido, déjame volver a este. Aquí hay ejemplos de directivas de política donde estoy definiendo que las fuentes predeterminadas de contenido deben provenir de mi dominio. Y estoy añadiendo una excepción para las fuentes, porque quiero permitir que se descarguen las Fuentes Web de Google.

Hay dos formas de implementar una política de seguridad de contenido en tu aplicación. La primera es añadiendo una etiqueta meta en el encabezado HTML, pero esta no es la preferida. La otra forma, y la mejor manera de hacerlo, es crear un encabezado para ello. Así que aquí estamos añadiendo una clave CSP y el valor que contendrá nuestras directivas. En este caso, como dije antes, estoy diciendo que la fuente predeterminada de mi contenido, va a venir de mi dominio, y añadiendo una excepción para las fuentes que también pueden venir de Google. Cuando se trata de Next.js, así es como se ve una CSP. Simplemente puedes añadir una lista de directivas en tu encabezado dentro de tu archivo de configuración de next. Puedes definir a qué tipo de solicitudes se aplicará la CSP utilizando el atributo de origen. En este caso, estoy diciendo que mi política de seguridad de contenido se aplicará a cada una de las solicitudes. No estoy filtrando, aunque podrías hacerlo, filtrando tu API por ejemplo.

¿Qué pasa con la validation? Es bastante simple. Tienes prácticamente dos recursos que puedes usar para validar tu CSP. Puedes comprobarlo yendo a csp-evaluator.withgoogle.com o a observatory.mozilla.org. Asegúrate de que todo se ve bien, estás siguiendo las mejores prácticas y mueve el código a tu propia aplicación.

Habrá casos en los que necesites scripts en línea. Para esos escenarios, announced permitirá que tus scripts se ejecuten sin perder la security de tu CSP. Announced es básicamente una cadena aleatoria, un hash creado para un solo uso. Veamos cómo se puede usar announced en un componente de servidor. Con una política de CSP estricta establecida, los navegadores modernos solo ejecutarán scripts cuyo atributo announced coincida con el valor establecido en el encabezado de la política. Los scripts añadidos dinámicamente a la página por scripts con el announce adecuado también serán ejecutados.

Así es como se ve un componente de servidor, como dije, obteniendo el announce del encabezado. Para exponer el announce, necesitamos crear un middleware en el proyecto Hudafor y establecer el announce en el encabezado de la solicitud. Aquí lo estamos haciendo con la ayuda de crypto. Para usar el announce en nuestra política, podemos definir las directivas y establecer el encabezado de solicitud de CSP dentro de nuestro middleware. Incluso podemos aplicar directivas dinámicamente dependiendo del entorno en el que nos encontramos. Aquí estoy comprobando si no estoy en producción y si no lo estoy, puedo perder mi CSP security ya que estoy en modo de desarrollo. Así es como se ve nuestro middleware. Sé que parece mucho, pero no te preocupes por cada línea de código. La idea aquí es que entiendas el proceso. Puedes revisar mi código en mi GitHub.

Pero revisémoslo. Primero creamos el announce, luego definimos nuestro CSP y añadimos ambos a los encabezados de la solicitud. No necesitas aplicar todas las reglas a la vez y arriesgarte a romper tu aplicación. Puedes añadir primero el CSP solo de informe, revelar los resultados y aplicarlo más tarde. Así es como se ve un CSP solo de informe, muy similar al regular. El navegador enviará una solicitud HTTP POST al punto final que definamos, con un informe que se ve así. Puedes ver la política original y revisar lo que está rompiendo. Y luego puedes repetir este proceso cuando hagas cambios en tu política. Solo de informe, revelar y aplicar. Gracias. Espero que hayas encontrado útil este contenido. Puedes encontrar la aplicación de muestra de Next.js con una CSP implementada en mi GitHub. ¡Y feliz codificación!