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.

9 min
15 Nov, 2023

AI Generated Video Summary

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.

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

Short description:

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 seguridad de tu CSV. Y denounce es solo una cadena, un hash creado para un solo uso. Así que veamoslo en acción.

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.

4. Uso de informes de seguridad de contenido

Short description:

Puedes utilizar un informe de seguridad de contenido para identificar problemas en tu aplicación y mejorar su seguridad. Al agregar tu dominio, puedes generar un informe que proporciona información sobre lo que necesita mejora o corrección. Además, puedes modificar tu política de seguridad de contenido para permitir recursos específicos, como imágenes, sin romper tu aplicación. Aprovecha este informe para mejorar la seguridad de tu aplicación web.

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.

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

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
React Advanced Conference 2021React Advanced Conference 2021
30 min
Cracking the Concurrent Mode
With concurrent mode coming in React 18, let's talk about the complexities behind providing declarative APIs for concurrent rendering. While implementing concurrent mode APIs from scratch for Brahmos.js, I came across lot of use cases and variability which made it one of the most interesting problem to solve, and appreciate more the React's effort on advocating Concurrent UI. In this talk we will see what concurrent mode means for a web app, what are the internal complexities and how I solved it for Brahmos.js.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit 2020React Summit 2020
125 min
Getting Started with Suspense and Concurrent Rendering in React
Featured Workshop
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `<Suspense />` component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using <Suspense />, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the <SuspenseList /> component.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components