Creación de un Componente React para Sanitizar HTML

Resumen

¿Cómo solucionar problemas de HTML en la vista del producto en React?

En el desarrollo de aplicaciones web con React, es común enfrentarse a problemas relacionados con el manejo del HTML, especialmente cuando se reciben strings con etiquetas HTML insertadas. Este tutorial te guiará para solucionar estos problemas al crear un componente que mitigue vulnerabilidades y errores de hidratación. Veremos cómo sanitizar HTML para asegurar la protección contra ataques de XSS y optimizar la interfaz.

¿Cuál es el problema inicial con la inyección de HTML en React?

Inyectar HTML en una aplicación React directamente desde un string puede generar:

Problemas de hidratación: El HTML inicial y el generado en el cliente pueden no coincidir.
Vulnerabilidades de XSS (Cross Site Scripting): Pueden inyectarse scripts maliciosos.

El uso de la inyección peligrosa de HTML en React puede parecer una solución rápida, pero entraña riesgos considerables. Por ejemplo, al intentar incluir el HTML directamente, puede resultar en errores y abrir puertas a posibles ataques.

¿Cómo crear un componente React para sanitizar HTML?

Para resolver estos inconvenientes, se puede crear un componente especializado en sanitizar el HTML. La clave está en procesar el HTML entrante, eliminando cualquier etiqueta o característica que pueda comprometer la seguridad o causar inconsistencias.

Crear el archivo del componente

Primero, organizamos el proyecto:

Ubicación del componente: Debe ubicarse en una carpeta Shared para uso común. Crear un archivo sanitized.html.tsx.
Configurar las props: Definir una interfaz o tipo que represente las propiedades del componente. A través del uso de HTMLAttributes de React, podemos integrar otras propiedades.

type SanitizedHTMLProps = {
  html: string;
} & React.HTMLAttributes<HTMLDivElement>;

Uso de la librería sanitized HTML

Para limpiar el HTML, utilizaremos una librería adecuada y ampliamente utilizada en el ecosistema JavaScript:

Instalación de la librería: Se detiene el proyecto temporalmente para agregar la dependencia.
```
npm install sanitize-html
```
Implementación del componente: Se utiliza sanitize-html para filtrar el HTML.

import React from 'react';
import sanitizeHtml from 'sanitize-html';

const SanitizedHTML: React.FC<SanitizedHTMLProps> = ({ html, ...props }) => {
  const sanitizedHTML = sanitizeHtml(html, {
    allowedTags: ['b', 'i', 'em', 'strong', 'a'],
    allowedAttributes: {
      'a': ['href'],
    },
  });

  return <div {...props} dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;
};

export default SanitizedHTML;

¿Cómo integrar el componente en la vista del producto?

Una vez definido el componente de sanitización, se puede integrar en la vista del producto:

Importar y reemplazar la inyección peligrosa: Importar el componente SanitizedHTML y usarlo en lugar del método peligroso.
Configuración de etiquetas permitidas: Configura el campo allowedTags para controlar qué etiquetas pueden pasar. Por defecto, si el contenido es solo texto, no se deberían permitir etiquetas adicionales.

¿Qué considerar para una aplicación segura?

Al implementar esta solución, es fundamental considerar:

Seguridad ante todo: Evitar dejar pasar etiquetas innecesarias, sobre todo scripts o estilos que puedan modificar el layout o funcionalidad de la aplicación.
Flexibilidad controlada: Solo permitir etiquetas si es estrictamente necesario, como en listas o imágenes.

Este enfoque no solo mejora la seguridad y estabilidad de la aplicación sino también su rendimiento y mantenimiento a largo plazo. ¡Sigue explorando y mejorando tus habilidades en React para crear aplicaciones web más seguras y eficientes!