Bloquear BOTON guardar PHP [SOLUCIONADO]

Control de acceso a la funcionalidad de guardado mediante PHP

En el desarrollo de aplicaciones web, el manejo de formularios es una funcionalidad común y muy importante. Frecuentemente, una de las preocupaciones que surgen en torno a los formularios es cómo se puede prevenir el uso inadecuado o malintencionado del botón de envío, en particular, cómo se puede bloquear la función de guardado para evitar envíos duplicados o acciones no deseadas. Este comportamiento suele ser obra de los bots, pero también puede ocurrir accidentalmente por parte de los usuarios. A continuación, vamos a explorar una solución efectiva en PHP para abordar esta problemática.

Implementación de seguridad en el servidor con PHP

PHP, relevante por su amplio uso en la programación de back-end, proporciona herramientas útiles para manejar el estado de los botones y las solicitudes de los usuarios. Antes de presentar cualquier fragmento de código, es esencial destacar que, independientemente de las medidas que tomemos en el lado del cliente, como la desactivación de botones mediante JavaScript, las validaciones en el lado del servidor son cruciales para garantizar la seguridad y el funcionamiento adecuado.

Para esa seguridad server-side, podemos utilizar tokens de sesiones, que nos permitirán rastrear si un formulario fue enviado anteriormente, y así, evitar el reenvío del mismo. Veamos cómo se podría implementar esto en código PHP.

<?php
session_start();

// Generamos un token único que se coloca en el formulario como campo oculto
if (!isset($_SESSION['form_token'])) {
    $_SESSION['form_token'] = bin2hex(random_bytes(32));
}

// Verificamos el token al recibir el formulario
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!isset($_POST['form_token']) || !hash_equals($_SESSION['form_token'], $_POST['form_token'])) {
        die('Validación de token fallida, posible reenvío de formulario bloqueado.');
    }

    // Procesamos el formulario
    // ...
    
    // Una vez procesado el formulario, invalidamos el token para evitar reenvíos
    unset($_SESSION['form_token']);
}
?>

Este fragmento de código incluye una sesión que ayuda a llevar el rastro del token de seguridad de un formulario. Primero, se genera un token único si no existe uno ya, que añadiremos como un campo oculto en el formulario. Cuando se recibe una solicitud de tipo POST, se comprueba que el token enviado mediante el formulario corresponda con el almacenado en la sesión. Si no coincide, se bloquea el procesamiento, previniendo así el envío duplicado o una solicitud no legítima.

Para que el formulario incluya el token, sería necesario agregar un campo oculto en el HTML del formulario:

<form method="post" action="guardar.php">
    <input type="hidden" name="form_token" value="<?php echo $_SESSION['form_token']; ?>" />
    <!-- Otros campos del formulario -->
    <input type="submit" value="Guardar" />
</form>

Aquí, el campo oculto form_token se integra en el formulario, llevando el valor del token de la sesión actual. Este tipo de medida no solo mejora la seguridad ante bots y automatizaciones, sino también mitiga posibles errores de usuarios que podrían pulsar varias veces el botón de envío.

Optimización de la experiencia del usuario en el lado del cliente

Complementando la seguridad del lado del servidor, una buena experiencia de usuario también considerará mecanismos de bloqueo en el front-end. Una técnica comúnmente utilizada para esto es el uso de JavaScript que deshabilite temporalmente el botón una vez haya sido pulsado por primera vez. Veamos cómo se podría lograr:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById('submit-btn').addEventListener('click', function() {
        this.disabled = true;
        this.form.submit();
    });
});
</script>

Este fragmento de código JavaScript escucha por el evento ‘DOMContentLoaded’, que indica que el DOM está completamente cargado. Luego, añade un evento ‘click’ al botón de enviar, identificado con ‘submit-btn’, que deshabilita el botón inmediatamente se clica para evitar múltiples envíos.

<form method="post" action="guardar.php">
    <input type="hidden" name="form_token" value="<?php echo $_SESSION['form_token']; ?>" />
    <!-- Otros campos del formulario -->
    <input type="submit" id="submit-btn" value="Guardar" />
</form>

Es importante recordar que mientras el incremento en la experiencia del usuario es beneficiosa, estos controles del lado del cliente nunca deben sustituir las comprobaciones del lado del servidor, sino que deben trabajar en conjunto para contribuir a la robustez y seguridad de la aplicación web.

Consideraciones adicionales en el bloqueo de botones de guardado

Al bloquear la funcionalidad de los botones para prevenir reenvíos de formulario, debemos tener presentes ciertos aspectos para no perjudicar la accesibilidad y la usabilidad. Por ejemplo, el usuario debería recibir un mensaje adecuado que explique por qué el botón está deshabilitado si su acción es intencional. Además, si un usuario actualiza la página después de enviar el formulario, es habitual que el navegador intente reenviar la solicitud, así que la invalidación del token previene cualquier efecto secundario negativo por este comportamiento.

En situaciones complejas donde se requiere una interacción más dinámica con el usuario, técnicas como AJAX pueden ser implementadas para enviar los datos del formulario sin necesidad de recargar la página, lo cual puede combinarse con la estrategia del token de sesión para mantener la seguridad.

Finalmente, aunque este artículo se centró en PHP, conviene mencionar que la estrategia general de usar tokens para identificar formularios únicos es aplicable en otros lenguajes de programación con la capacidad de manejo de sesiones y seguridad en la web. Adicionalmente, en el escenario de aplicaciones PHP más grandes y complejas, frameworks como Laravel traen mecanismos de protección contra reenvíos integrados llamados CSRF (Cross-Site Request Forgery) que harían más simple la implementación de estas defensas.

El manejo cuidadoso y deliberado de la funcionalidad relacionada con el guardado y envío de datos mediante botones de formularios es una muestra de un desarrollo competente y consciente de la seguridad. La ejecución de métodos combinados de control en el lado del servidor y del cliente, equilibrando las características de seguridad con una interfaz intuitiva y responsable, es la piedra angular para crear aplicaciones web confiables y agradables de usar.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad