Protege tu web Astro con React y Next.js: Moderación de comentarios con Azure Content Safety

En un entorno digital donde la interacción con los usuarios es clave, mantener un espacio seguro y positivo es esencial. La moderación de comentarios es una herramienta fundamental para lograrlo, y en mi sitio web he implementado un sistema basado en la API de Azure Content Safety. Esta herramienta me permite analizar y moderar comentarios en tiempo real, asegurando que el contenido inapropiado o peligroso no se publique. A continuación, te explico cómo lo he integrado y por qué es crucial para la seguridad y la experiencia del usuario.

¿Qué es Azure Content Safety?

Azure Content Safety es un servicio que forma parte de los Azure Cognitive Services y está diseñado para ayudar a las organizaciones a detectar contenido potencialmente peligroso o inapropiado, como discurso de odio, violencia, autolesiones, y contenido sexual explícito. Utiliza modelos avanzados de inteligencia artificial para analizar texto en busca de categorías específicas y evalúa la severidad de cada caso, lo que permite tomar decisiones informadas sobre la moderación del contenido.

¿Cómo lo implementé en mi sitio web?

He desarrollado un sistema de moderación que funciona en dos etapas: primero, los comentarios de los usuarios son enviados a un endpoint en mi servidor que utiliza Azure Content Safety para analizarlos; luego, dependiendo del resultado, el comentario es aprobado o bloqueado. Aquí te detallo cómo funciona.

Código del Endpoint

El siguiente código en Next.js se encarga de recibir el comentario y enviarlo a la API de Azure para su análisis:

import axios from 'axios';
import { methodValidator } from '@/src/utils/methodValidator';
import { enableCors } from '@/src/middleware/enableCors';
import { insertInappropriateCommentCount } from '@/src/core/insertInappropriateCommentCount';
import { sanitizeTitleForFilename } from '@/src/utils/sanitizeTitleForFilename';
import dotenv from 'dotenv';

dotenv.config();

async function moderateCommentHandler(req, res) {
  console.log('Iniciando moderación de comentario...');
  await methodValidator(req, res, 'POST');

  if (req.method === 'POST') {
    const { title, comment } = req.body;
    if (!title || !comment) {
      return res.status(400).json({ error: 'Faltan el título o el comentario para moderar' });
    }

    const sanitizedTitle = sanitizeTitleForFilename(title);

    const endpoint = process.env.CONTENT_SAFETY_ENDPOINT;
    const subscriptionKey = process.env.CONTENT_SAFETY_KEY;

    if (!endpoint || !subscriptionKey) {
      return res.status(500).json({ error: 'Faltan las configuraciones de la API de seguridad de contenido' });
    }

    try {
      const url = `${endpoint}/contentsafety/text:analyze?api-version=2023-10-01`;
      const response = await axios.post(
        url,
        { text: comment, categories: ['Hate', 'SelfHarm', 'Sexual', 'Violence'] },
        { headers: { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': subscriptionKey } }
      );

      const { data } = response;
      const isContentInappropriate = data.categoriesAnalysis.some((c) => c.severity > 0.8);

      if (isContentInappropriate) {
        await insertInappropriateCommentCount(sanitizedTitle, data.categoriesAnalysis);

        return res.status(403).json({
          message: 'El comentario ha sido bloqueado debido a contenido inapropiado o peligroso.',
          classifications: data.categoriesAnalysis,
        });
      } else {
        return res.status(200).json({ originalComment: comment, message: 'El comentario ha sido aprobado.' });
      }
    } catch (error) {
      console.error('Error al moderar el comentario:', error);
      res.status(500).json({ error: `Error al moderar el comentario: ${error.response?.data || error.message}` });
    }
  } else {
    res.status(405).json({ error: 'Método no permitido' });
  }
}

export default enableCors(moderateCommentHandler);

Explicación del código

Validación del método: El endpoint primero valida que la solicitud sea un POST mediante un validador de métodos. Esto asegura que solo se manejen solicitudes de comentarios correctamente formateadas.
Sanitización: El título del comentario se "sanea" para asegurar que esté en un formato adecuado para su almacenamiento.
Configuración de la API: Se configuran los detalles de la API de Azure Content Safety, incluyendo la clave de suscripción y el endpoint.
Análisis del comentario: El comentario es enviado a la API, que lo analiza en busca de contenido inapropiado en categorías específicas (odio, autolesión, contenido sexual, violencia).
Decisión: Si el comentario contiene contenido inapropiado con una severidad significativa, se bloquea y se registra. Si es adecuado, se aprueba.

Interfaz del usuario: Controlador de Feedback

El siguiente código en React permite a los usuarios enviar comentarios sobre el contenido, que luego son moderados usando el sistema antes mencionado:

import { useState, useContext } from 'react';
import { VscFeedback } from 'react-icons/vsc';
import { SiGithub } from 'react-icons/si';
import { AuthContext } from '@components/react/login/LoginContext';
import GoliatShield from '@components/react/shield/GoliatShield';
import toast from 'react-hot-toast';
import './FeedbackRequest.scss';

const FeedbackRequest: React.FC<{ title: string }> = ({ title }) => {
  const { state } = useContext(AuthContext);
  const [isFeedbackVisible, setIsFeedbackVisible] = useState(false);
  const [feedbackText, setFeedbackText] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isFeedbackSent, setIsFeedbackSent] = useState(false);

  const API_BASE_URL = import.meta.env.PUBLIC_API_BASE_URL;

  const handleFeedbackClick = () => {
    setIsFeedbackVisible(!isFeedbackVisible);
  };

  const handleFeedbackChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setFeedbackText(event.target.value);
  };

  const submitFeedback = async () => {
    if (!feedbackText.trim()) {
      return;
    }

    setIsSubmitting(true);

    const moderateData = {
      title,
      comment: feedbackText,
    };

    try {
      const response = await fetch(`${API_BASE_URL}/api/moderatecomment`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(moderateData),
      });

      if (response.ok) {
        // Resto del proceso...
      } else {
        console.error('Error al moderar el comentario:', response.statusText);
      }
    } catch (error) {
      console.error('Error al enviar el feedback:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="feedback-request-container">
      {/* Interfaz del usuario */}
    </div>
  );
};

export default FeedbackRequest;

Beneficios para la seguridad y la experiencia del usuario

Al integrar Azure Content Safety en tu sitio web, no solo proteges a tu comunidad de contenido dañino, sino que también creas un ambiente seguro y acogedor para la interacción. Este sistema de moderación automatizada asegura que los comentarios peligrosos o inapropiados sean identificados y bloqueados antes de que puedan afectar a otros usuarios. Además, al proporcionar un mecanismo de retroalimentación, mejoras la participación de los usuarios, promoviendo un diálogo respetuoso y constructivo.

En resumen, Azure Content Safety es una herramienta invaluable para moderar y mantener la integridad de las conversaciones en tu sitio web, protegiendo a los usuarios y mejorando la calidad del contenido en línea.

Blog