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

Rate this content
Bookmark
Project website

En esta charla, exploraremos la poderosa característica de seguridad de la Política de Seguridad de Contenido (CSP) y cómo se puede implementar en Next.js para reforzar las defensas de tu sitio web contra ataques web comunes como Cross-Site Scripting (XSS) e inyección de datos. Cubriremos los conceptos básicos de CSP, sus beneficios y las mejores prácticas para implementarlo en Next.js.


Además, compartiremos algunas herramientas para evaluar y probar tu política. Al final de esta charla, tendrás una sólida comprensión de cómo mejorar la seguridad de tu sitio web con CSP y proteger a tus usuarios de las siempre presentes amenazas de la web moderna.

Lucas Estevão
Lucas Estevão
9 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Lucas Estevão, un Ingeniero Principal de UI y Gerente Técnico en Avenue Code, discute cómo implementar la Política de Seguridad de Contenido (CSP) con Next.js para mejorar la seguridad del sitio web. Explica que CSP es una capa de seguridad que protege contra ataques de scripting entre sitios e inyecciones de datos al restringir la funcionalidad del navegador. La charla cubre la adición de CSP a una aplicación XJS utilizando metaetiquetas o encabezados, y demuestra el uso del atributo 'nonce' para permitir scripts en línea de forma segura. Estevão también destaca la importancia de utilizar informes de seguridad de contenido para identificar y mejorar la seguridad de la aplicación.

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

Short description:

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. Estoy realmente emocionado de hablarles sobre la Política de Seguridad de Contenido con Next.js y cómo pueden mejorar la seguridad de su sitio web. Una CSP o una política de seguridad de contenido es una capa de seguridad que ayuda a proteger las aplicaciones de ataques como el scripting de tipo cruzado, XSS o ataques de inyección de datos, y lo hace restringiendo la funcionalidad del navegador.

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.

2. Añadiendo la Política de Seguridad de Contenido

Short description:

Esta es una aplicación XJS. Queremos añadir la CSP a la página. La forma más fácil es añadiéndola a la etiqueta head usando una etiqueta meta. Intentemos añadir encabezados en su lugar. Añadiremos una política de seguridad de contenido simple para verla funcionando en los encabezados. A continuación, intentaremos usar un middleware para añadir una política de seguridad de contenido. Crea un nuevo archivo llamado middleware.ts en la raíz de nuestra aplicación y consulta la documentación para más detalles.

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.

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

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.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
¡React 18! ¡Funciones concurrentes! Tal vez ya hayas probado las nuevas APIs como useTransition, o tal vez solo hayas oído hablar de ellas. Pero, ¿sabes cómo React 18 logra las mejoras de rendimiento que trae consigo? En esta charla, echemos un vistazo bajo el capó de las características de rendimiento de React 18: - Cómo React 18 reduce el tiempo que tu página permanece congelada (también conocido como TBT) - Qué sucede exactamente en el hilo principal cuando ejecutas useTransition() - Cuál es la trampa con las mejoras (¡no hay torta gratis!), y por qué Vue.js y Preact se negaron rotundamente a lanzar algo similar
Entendiendo la Arquitectura Fiber de React
React Advanced Conference 2022React Advanced Conference 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
Hemos escuchado mucho sobre la Arquitectura Fiber de React, pero parece que pocos de nosotros la entendemos en profundidad (o tenemos el tiempo para hacerlo). En esta charla, Tejas repasará su mejor intento de entender Fiber (revisado por otros expertos), y lo presentará de una manera 'explicar-como-si-tuviera-cinco años'.
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Node Congress 2022Node Congress 2022
26 min
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Top Content
¿Sabes qué está pasando realmente en tu carpeta node_modules? Los ataques a la cadena de suministro de software han explotado en los últimos 12 meses y solo están acelerándose en 2022 y más allá. Profundizaremos en ejemplos de recientes ataques a la cadena de suministro y qué pasos concretos puedes tomar para proteger a tu equipo de esta amenaza emergente.
Puedes consultar las diapositivas de la charla de Feross aquí.
Dentro de Fiber: la descripción general en profundidad que querías para TLDR
React Summit 2022React Summit 2022
27 min
Dentro de Fiber: la descripción general en profundidad que querías para TLDR
Quiero proporcionar una descripción general en profundidad de los conceptos importantes detrás de la reconciliación. Luego exploraremos cómo React utiliza el algoritmo y repasaremos algunas palabras mágicas que escuchamos mucho, como coroutines, continuations, fibers, generators, algebraic effects y veremos cómo se relacionan con React.js.
Componentes del Servidor: La Epopeya de la Representación UX
React Summit 2023React Summit 2023
26 min
Componentes del Servidor: La Epopeya de la Representación UX
Los componentes del servidor, introducidos en React v18, ponen fin a estas limitaciones, permitiendo representar completamente los componentes de React en el servidor, en un formato de abstracción intermedio sin necesidad de agregar al paquete de JavaScript.Esta charla tiene como objetivo cubrir los siguientes puntos:1. Una divertida historia de cómo necesitábamos CSR y cómo SSR comenzó a ocupar su lugar2. ¿Qué son los componentes del servidor y qué beneficios aportan, como un tamaño de paquete de JavaScript de 0?3. Demostración de una aplicación simple utilizando representación en el lado del cliente, SSR y componentes del servidor, y análisis de las mejoras de rendimiento y comprensión de cuándo usar cada enfoque4. Mi opinión sobre cómo cambiará la representación de la interfaz de usuario con este enfoque

Workshops on related topic

Aventuras de Renderizado Concurrente en React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Comenzando con Suspense y Renderizado Concurrente en React
React Summit 2020React Summit 2020
125 min
Comenzando con Suspense y Renderizado Concurrente en React
Featured Workshop
Maurice de Beijer
Maurice de Beijer
React sigue evolucionando y haciendo que las cosas difíciles sean más fáciles para el desarrollador promedio.
Un caso en el que React no era particularmente difícil pero muy repetitivo, es trabajar con solicitudes AJAX. Siempre hay una trinidad de estados de carga, éxito y posibles errores que deben manejarse cada vez. Pero ya no, ya que el componente `<Suspense />` facilita mucho la vida.
Otro caso es el rendimiento de aplicaciones más grandes y complejas. Por lo general, React es lo suficientemente rápido, pero con una aplicación grande, la renderización de componentes puede entrar en conflicto con las interacciones del usuario. El renderizado concurrente se encargará de esto, en su mayoría de forma automática.
Aprenderás todo sobre cómo usar <Suspense />, mostrar indicadores de carga y manejar errores. Verás lo fácil que es comenzar con el renderizado concurrente. Harás que el suspense sea aún más capaz combinándolo con el renderizado concurrente, el gancho `useTransition()` y el componente <SuspenseList />.
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.