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

Rate this content
Bookmark
Github

Aprende por qué deberías preocuparte por la Política de Seguridad de Contenido (CSP) y cómo implementarla en una aplicación Next.JS para mejorar tu capa de seguridad. Comprende los conceptos básicos de CSP, las directivas y su papel en la prevención de ataques web. Avanzando hacia Next.js, la sesión profundizará en los detalles de implementación, cubriendo los hashes "nounce" para scripts en línea usando middlewares y las trampas de estrategias comunes. Al final de la sesión, los participantes estarán equipados con el conocimiento y las habilidades para implementar y evaluar una política CSP robusta en Next.js, aprovechando sus últimas características de la versión 13, protegiendo eficazmente sus aplicaciones web contra ataques en línea.

Lucas Estevão
Lucas Estevão
6 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Lucas Esteveau discute la importancia de la Política de Seguridad de Contenido (CSP) como una capa adicional de seguridad para los navegadores. Explica cómo validar e implementar CSP utilizando herramientas como csp-evaluator.withgoogle.com y observatory.mozilla.org. También destaca el uso de componentes de servidor y middleware en el proyecto Hudafor para establecer y hacer cumplir las directivas CSP. Lucas aconseja comenzar con un CSP solo de informe, revisar los resultados y aplicar gradualmente la política. Enfatiza la importancia de revisar los informes de violación de políticas e iterar el proceso al hacer cambios.

1. Introducción a la Política de Seguridad de Contenido

Short description:

Soy Lucas Esteveau, un contratista principal de ingeniería de interfaz de usuario de Avenue Code en Apple. Hablemos de por qué deberías preocuparte por una Política de Seguridad de Contenido. Los navegadores tienen características de seguridad, pero no pueden prevenir todos los ataques. Una CSP es una capa de seguridad que restringe la funcionalidad del navegador. Puedes implementarla usando etiquetas meta o encabezados. En Next.js, puedes agregar directivas en tu archivo de configuración de next.

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.

2. Validación e Implementación de CSP

Short description:

Para validar tu CSP, puedes usar csp-evaluator.withgoogle.com o observatory.mozilla.org. Announced permite ejecutar scripts en línea de forma segura. Los componentes del servidor obtienen el announce del encabezado. Un middleware en el proyecto Hudafor establece el announce en el encabezado de la solicitud. El middleware define directivas y establece el encabezado de solicitud de CSP. Aplica directivas dinámicamente en función del entorno. Comienza con CSP solo de informe, revisa los resultados y aplica la política más tarde. El navegador envía un informe con una solicitud POST al punto final definido. Revisa el informe para detectar violaciones de políticas. Repite el proceso al hacer cambios. Encuentra la aplicación de muestra Next.js con CSP en mi GitHub.

¿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!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix es un nuevo marco de trabajo web de los creadores de React Router que te ayuda a construir mejores y más rápidos sitios web a través de una sólida comprensión de los fundamentos de la web. Remix se encarga de las tareas pesadas como la renderización del servidor, la división de código, la precarga y la navegación, y te deja con la parte divertida: ¡construir algo increíble!
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
Los tutoriales interactivos basados en la web se han convertido en un elemento básico de los frameworks de front end, y es fácil ver por qué: a los desarrolladores les encanta poder probar nuevas herramientas sin el problema de instalar paquetes o clonar repositorios.Pero en la era de los meta-frameworks full stack como Next, Remix y SvelteKit, estos tutoriales solo llegan hasta cierto punto. En esta charla, veremos cómo nosotros, en el equipo de Svelte, estamos utilizando la tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Concurrent React y Server Components están cambiando la forma en que pensamos sobre el enrutamiento, la renderización y la obtención de datos en las aplicaciones web. Next.js recientemente compartió parte de su visión para ayudar a los desarrolladores a adoptar estas nuevas características de React y aprovechar los beneficios que desbloquean.En esta charla, exploraremos el pasado, presente y futuro del enrutamiento en las aplicaciones de front-end y discutiremos cómo las nuevas características en React y Next.js pueden ayudarnos a arquitectar aplicaciones más eficientes y con más funciones.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Solid captó la atención de la comunidad frontend al popularizar la programación reactiva con su convincente uso de Señales para renderizar sin re-renderizaciones. Los hemos visto adoptados en el último año en todo, desde Preact hasta Angular. Las Señales ofrecen un conjunto poderoso de primitivas que aseguran que tu interfaz de usuario esté sincronizada con tu estado, independientemente de los componentes. Un lenguaje universal para la interfaz de usuario frontend.
Pero, ¿qué pasa con lo Asíncrono? ¿Cómo logramos orquestar la carga y mutación de datos, el renderizado en el servidor y la transmisión? Ryan Carniato, creador de SolidJS, echa un vistazo a una primitiva diferente. Una que a menudo se malinterpreta pero que es igual de poderosa en su uso. Únete a él mientras muestra de qué se trata todo este Suspense.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico
React Summit 2023React Summit 2023
139 min
Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crear una cuenta gratuita- Crear un nuevo proyecto con Next.js y Tailwind- Explorar la estructura de directorios- Anatomía de un Brick- Crear un nuevo Brick (Texto-Imagen)- Agregar un título y descripción con edición visual RichText- Agregar una imagen con edición visual- Agregar controles de barra lateral para editar props (padding y lado de la imagen)- Anidar Bricks usando el componente Repeater- Crear un brick de galería de imágenes- Publicar en Netlify o Vercel- Tipos de página y campos personalizados- Acceder a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias e Incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de destino creadas visualmente en React Bricks- Funciones empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados
De 0 a Autenticación en una hora con ReactJS
React Summit 2023React Summit 2023
56 min
De 0 a Autenticación en una hora con ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps.
Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend
Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.