Version 1.2.3 🚀

Release Note: Protección CSRF en useTargetHandler 1.2.3

Descripción

La versión 1.2.3 del hook useTargetHandler introduce una mejora significativa en la seguridad de las aplicaciones React al implementar la protección contra CSRF (Cross-Site Request Forgery) en las solicitudes a la API. Esta nueva funcionalidad ayuda a prevenir ataques CSRF maliciosos, asegurando que las interacciones del usuario sean legítimas y autorizadas.

Características Principales

• Protección CSRF: Se ha añadido la opción enableCSRF que permite activar o desactivar la protección CSRF en las solicitudes a la API. Cuando se establece en true, el hook incluirá automáticamente el token CSRF en las solicitudes que modifican datos (POST, PUT, DELETE), ayudando a prevenir ataques CSRF.

• Integración con useHttpRequest: La protección CSRF se implementa a través del hook useHttpRequest, que se encarga de manejar las llamadas HTTP a la API. Cuando enableCSRF está activado, useHttpRequest incluirá el token CSRF en las solicitudes relevantes.

• Configuración Flexible: El parámetro enableCSRF permite a los desarrolladores controlar si desean activar o desactivar la protección CSRF según las necesidades de su aplicación. Esto brinda flexibilidad y control sobre la seguridad de las interacciones del usuario con la API.

Ejemplo de Uso

import React from "react";
import useTargetHandler from "./useTargetHandler"; // Asegúrate de que la ruta sea correcta

const MyForm = () => {
  const initialValues = {
    nombre: "",
    apellido: "",
    email: "",
    password: "",
    confirmPassword: "",
    age: "",
    terms: false,
    ciudad: "",
    gender: "",
  };

  const validationRules = {
    nombre: {
      required: true,
      requiredMessage: "El nombre es obligatorio !!!",
      pattern: /^[a-zA-Z]+$/,
      patternMessage: "No puede tener o llevar números",
    },
    // ... Otras reglas de validación
  };

  const [
    target,
    handleTarget,
    handleSubmit,
    errors,
  ] = useTargetHandler(initialValues, validationRules, "local", "formData", true); // Activar CSRF

  const onSubmit = () => {
    console.log("Datos enviados:", target);
    // Aquí puedes realizar la llamada a la API o cualquier otra acción
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="nombre"
        value={target.nombre}
        placeholder="Nombre"
        onChange={handleTarget}
      />
      {errors.nombre && <span>{errors.nombre.message}</span>}

      {/* Resto de los campos del formulario */}

      <button type="submit">Enviar</button>
    </form>
  );
};

export default MyForm;

Conclusión

La versión 1.2.3 de useTargetHandler introduce una mejora crucial en la seguridad de las aplicaciones React al implementar la protección CSRF. Al activar esta funcionalidad, los desarrolladores pueden estar seguros de que las interacciones del usuario con la API son legítimas y están protegidas contra ataques CSRF. Esta actualización refuerza la solidez y confiabilidad del hook useTargetHandler para la gestión de formularios en aplicaciones React.