10 prácticas recomendadas de seguridad para React

¿Buscas las mejores formas de proteger tu app de React? ¡Llegaste al lugar indicado! Creamos esta lista de verificación de prácticas recomendadas de seguridad para React para ayudarte a ti y a tu equipo a encontrar y corregir problemas de seguridad en tus aplicaciones de React. También te mostraremos cómo probar automáticamente tu código de React para detectar problemas de seguridad y corregirlos automáticamente.

¡Empecemos!

Descarga la guía práctica.

10 prácticas recomendadas de seguridad para React

1. Usa la protección XSS predeterminada con el enlace de datos

2. Ten cuidado con las URL peligrosas y la inyección de scripts basada en URL

3. Desinfecta y renderiza HTML

4. Evita el acceso directo al DOM

5. Protege el renderizado del lado del servidor de React

6. Busca vulnerabilidades conocidas en las dependencias

7. Evita los ataques de inyección JSON

8. Usa versiones de React sin vulnerabilidades

9. Usa configuraciones de linter

10. Evita el código peligroso de las bibliotecas

1. Usa la protección XSS predeterminada de React con el enlace de datos

¿React es vulnerable a los ataques de secuencias de comandos entre sitios (XSS)?

De forma predeterminada, React está diseñado para no ser vulnerable, pero los desarrolladores pueden habilitar opciones que podrían hacerlo vulnerable a los ataques de secuencias de comandos entre sitios.

¿Cómo puedo prevenir los ataques XSS en React?

Usa el enlace de datos predeterminado con llaves ({}) y React escapará los valores automáticamente para protegerte contra los ataques XSS. Ten en cuenta que esta protección solo se aplica al renderizar textContent, no al renderizar atributos HTML.

Usa la sintaxis de enlace de datos de JSX ({}) para colocar datos en tus elementos.

Haz esto:

<div>{data}</div>

Evita los valores dinámicos de atributos sin una validación personalizada.

No hagas esto:

<form action={data}>...

2. Ten cuidado con las URL peligrosas y la inyección de scripts basada en URL

Las URL pueden contener contenido de scripts dinámico mediante URL con el protocolo javascript:. Usa la validación para asegurarte de que tus enlaces sean http: o https: y evitar la inyección de scripts basada en URL javascript:. Valida las URL con una función nativa de análisis de URL y luego compara la propiedad del protocolo analizado con una lista de permitidos.

Haz esto:

function validateURL(url) {
  const parsed = new URL(url)
  return ['https:', 'http:'].includes(parsed.protocol)
}

<a href={validateURL(url) ? url : ''}>Click here!</a>

No hagas esto:

<a href={attackerControlled}>Click here!</a>

3. Desinfecta y renderiza HTML

Es posible insertar HTML directamente en los nodos del DOM renderizados mediante dangerouslySetInnerHTML. Todo contenido que se inserte de esta manera debe desinfectarse antes. Usa una biblioteca de desinfección como dompurify en todos los valores antes de colocarlos en la propiedad dangerouslySetInnerHTML.

Usa dompurify al insertar HTML en el DOM.

Haz esto:

import purify from "dompurify";
<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

4. Evita el acceso directo al DOM

Evita siempre acceder al DOM para insertar contenido directamente en sus nodos. Pero si tienes que hacerlo, usa dangerouslySetInnerHTML para insertar HTML y desinféctalo con dompurify antes de insertarlo.

¿Qué es dangerouslySetInnerHTML de React?

dangerouslySetInnerHTML es una propiedad que permite a los desarrolladores insertar contenido HTML directamente en un elemento HTML de una app de React.

Haz esto:

import purify from "dompurify";
<div dangerouslySetInnerHTML={{__html:purify.sanitize(data) }} />

Evita usar refs y findDomNode() para acceder a elementos renderizados del DOM e insertar contenido directamente mediante innerHTML y propiedades o métodos similares.

No hagas esto:

this.myRef.current.innerHTML = attackerControlledValue;

5. Protege el renderizado del lado del servidor de React

El enlace de datos proporciona el escape automático del contenido al usar funciones de renderizado del lado del servidor como ReactDOMServer.renderToString() y ReactDOMServer.renderToStaticMarkup().

Evita concatenar cadenas en el resultado de renderToStaticMarkup() antes de enviarlas al cliente para la hidratación.

Para evitar XSS, no concatenes datos sin desinfectar con el resultado de renderToStaticMarkup().

Haz esto:

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello World!")
    ) + otherData
  );
});

6. Busca vulnerabilidades conocidas en las dependencias

Algunas versiones de componentes de terceros pueden tener problemas de seguridad de JavaScript. Antes de agregar dependencias a un proyecto, revísalas siempre con una herramienta de análisis de composición de software (SCA) y asegúrate de actualizarlas cuando haya una versión más reciente.

Extensión de Snyk para VS Code

Mientras desarrollas una aplicación React en VS Code, puedes usar la extensión de Snyk para recibir alertas sobre vulnerabilidades conocidas en tu proyecto. Verás estas alertas como subrayados ondulados directamente en tu archivo package.json, en el panel de extensiones de Snyk y en el panel de problemas de VS Code. Esto es útil porque no tienes que salir de tu entorno de desarrollo para conocer estas vulnerabilidades: todo está a tu alcance.

App de Snyk (https://app.snyk.io)

Abrir un pull request para corregir una vulnerabilidad en React es tan sencillo como hacer tres clics. Primero, identifica la vulnerabilidad que quieres resolver en tu app con la aplicación web de Snyk. Luego, haz clic en Corregir esta vulnerabilidad (o en Corregir estas vulnerabilidades si hay varias). Obtén más información sobre el producto Snyk aquí.

Luego se te pedirá que confirmes si quieres abrir un pull request (PR) para corregir la vulnerabilidad con Snyk.

Después de confirmar, se te llevará al PR que abrió Snyk para que puedas revisar y probar que tu app siga funcionando según lo esperado con los cambios solicitados antes de fusionarlos.

Snyk CLI

También puedes usar la CLI gratuita de Snyk para buscar vulnerabilidades. Corrige vulnerabilidades automáticamente con Snyk al integrarlo con tu sistema de administración del código fuente para recibir correcciones automatizadas:

$ npx snyk test

7. Evita los ataques de inyección JSON

Es común enviar datos JSON junto con páginas de React renderizadas en el servidor. Escapa siempre los caracteres < con un valor inocuo para evitar ataques de inyección.

Reemplaza siempre los caracteres significativos de HTML en JSON por caracteres equivalentes inocuos.

Haz esto:

window.__PRELOADED_STATE__ =   ${JSON.stringify(preloadedState).replace( /</g, '\\u003c')}

8. Usa versiones de React sin vulnerabilidades

La biblioteca React ha tenido algunas vulnerabilidades de alta gravedad, por lo que es recomendable mantenerla actualizada con la versión más reciente.

Evita las versiones vulnerables de react y react-dom. Verifica que estés usando la versión más reciente con npm outdated para consultar las versiones disponibles.

9. Usa configuraciones de linter

Instala configuraciones y complementos de linter que detecten automáticamente problemas de seguridad en tu código y ofrezcan recomendaciones para corregirlos.

Usa la configuración de seguridad de React para ESLint para detectar problemas de seguridad en nuestra base de código.

Configura un hook de pre-commit que falle cuando detecte problemas del linter relacionados con la seguridad, con una biblioteca como husky.

Usa Snyk para actualizar automáticamente a nuevas versiones cuando las versiones que usas tengan vulnerabilidades.

10. Evita el código peligroso de las bibliotecas

El código de las bibliotecas suele usarse para realizar operaciones peligrosas, como insertar HTML directamente en el DOM. Revisa manualmente el código de las bibliotecas o usa linters para detectar usos inseguros de los mecanismos de seguridad de React.

Evita las bibliotecas que usen dangerouslySetInnerHTML, innerHTML, URL sin validar u otros patrones inseguros. Usa linters de seguridad en tu carpeta node_modules para detectar patrones inseguros en el código de tus bibliotecas.

Descarga la guía práctica de seguridad para React

Descarga este práctico PDF y úsalo como lista de verificación para comprobar la seguridad de tu aplicación React.