5

Tengo un asistente de formularios múltiples, con varios pasos que deben completarse, el script evita que los datos llenados por el usuario se pierdan y evita perder el paso del usuario.

Los pasos del script se guardan en una sesión que evita volver al principio, manteniéndolos siempre en el paso actual del usuario.

Pero tengo un problema de vulnerabilidad en el proceso de los pasos que deben seguirse.

Si un usuario malintencionado cambia los valores de la URL, de la siguiente manera:

localhost/wizard/saveTemp.php?step=6

Ese usuario malintencionado puede omitir los pasos a su gusto, burlando en sí, el sistema.

Ejemplo:

El usuario está en el paso 1, pero modifico la URL y automáticamente salto al paso 6.

Nota: La segunda manera de burlar el sistema, es modificando el código HTML los enlaces de atrás & continuar del multi form wizard por medio de la consola añadiendo atributos o código javascript. Ejemplo: <a href="#" class="next" onclick="show_step('6')>Continuar</a> al igual que la modificación de la URLs PHP automáticamente salto al paso 6.

Entonces,

  • ¿Cómo puedo evitar que se burlen del sistema al agregar un control reforzado usando PHP, donde un usuario no puede pasar del paso 1 al paso 3 o al paso 6, sino que debe continuar el orden de los pasos 1, 2, 3, 4, 5, 6 y así sucesivamente.

  • ¿Cómo puedo validar los campos del formulario wizard con PHP en conjunto de las validaciones ya existentes con Javascript?

Mí código

Scrip Wizard

<?php
session_start();
if (isset($_GET['p'])) {
  session_destroy();
  session_start();
}
?>

<script>
var currentStep =  <?php echo $step ?>; // Variable indicating the current step, data selected with PHP sessions
var radio = <?php echo $radio ?>; //Value of the radius selected

function show_step(step) {
    var data = $("#form").serialize();
    var url = 'saveTemp.php?step=' + step;
    var valid = true;

    // [OPTIONAL] Validate only if you are going forward
    if (currentStep < step) {

      // We search all the fields within the current step.
      $('#step' + currentStep).find('input,textarea,select').each((idx, el) => {
        let $field = $(el);
        let $fieldCont = $field.closest('.form-group');

        // If the field is a checkbox or a radio and an option was not selected
        if (($field.prop('type') == 'checkbox' || $field.prop('type') == 'radio') &&
            !$fieldCont.find('input[name="'+$field.prop('name')+'"]:checked').length) {
          $fieldCont.addClass('error');
          valid = false;
        }
        // If the field is NOT a checkbox or a radio and is empty
        else if ($field.prop('type') != 'checkbox' && $field.prop('type') != 'radio' &&
          !$field.val()) {
          $fieldCont.addClass('error');
          valid = false;
        } else {
          $fieldCont.removeClass('error');
        }
      });
    }

    // If at least one field was not completed
    if (!valid) {
      return;
    }

    //
    $.ajax({
      type: "POST",
      url: url,
      data: data
    }).done(function(resp){
      $('#radio').val(resp.radio);

      if (step === 2) {
        var radio = parseInt(resp.radio);
        switch(radio) {
          case 1:
            urlform = './app/themes/pay_paypal.php'
            break;
          case 2:
            urlform = './app/themes/pay_paypal2.php'
            break;
          case 3:
            urlform = './app/themes/pay_paypal3.php'
            break;
          default:
            urlform = './app/themes/pay_paypal4.php'
            break;

        }

 $('#divPay').load(urlform,function(responseTxt, statusTxt, xhr){
          if(statusTxt === "success") {

            $('#step' + currentStep).css("display", "none");
            $('#step' + step).fadeIn("slow");
            currentStep = step;
          }
          if(statusTxt === "error") {
            //
          }
        });
      } else {

        $('#step' + currentStep).css("display", "none");
        $('#step' + step).fadeIn("slow");
        currentStep = step;
      }
    });
  };

  $(function() {
    show_step(currentStep);
    $('a.next').click(e => {
      e.preventDefault();
      show_step(currentStep + 1);
    });

    $('a.back').click(e => {
      e.preventDefault();
      show_step(currentStep - 1);
    });
  });
</script>

Estructura HTML

<form id="form">
  <div id="step1" class="step">
    <h1>Step 1</h1>
    <a href="#next" class="next">next</a>
  </div>
  <div id="step2" class="step">
    <h1>Step 2</h1>
    <a href="#back" class="back">back</a>
    <a href="#next" class="next">next</a>
  </div>
  <div id="step3" class="step">
    <h1>Step 3</h1>
    <a href="#back" class="back">back</a>
    <a href="#next" class="next">next</a>
  </div>
  <div id="step4" class="step">
    <h1>Step 3</h1>
    <a href="#back" class="back">back</a>
    <a href="#next" class="next">next</a>
  </div>
  <div id="step5" class="step">
    <h1>Step 3</h1>
    <a href="#back" class="back">back</a>
    <a href="#next" class="next">next</a>
  </div>
  <div id="step6" class="step">
    <h1>Step 4</h1>
    <a href="#back" class="back">back</a>
  </div>
</form>

saveTemp.php

Nota: Se han recibido comentarios diciendo que el procedimiento está mal, que no se puede pasar datos por POST y tomarlos GET realmente ahora sería para mí una incógnita ? antes aquellos comentarios, este procedimiento fue tomado por una respuesta de Xerif

<?php
session_start();

$step =  isset($_GET['step']) ?  $_GET['step'] : 1;

// We save the form data in a session variable
$_SESSION['datos_form'] = $_POST;
// we also add the step to the array, you can not use this name (__step__) as name in the form

$datosForm = (isset($_SESSION['datos_form']) && is_array($_SESSION['datos_form'])) ? $_SESSION['datos_form'] :array();

$sStep = isset($datosForm['__step__']) ? $datosForm['__step__'] : 1;
$step = isset($step) ? $step : $sStep;

$radio   = isset($datosForm['radio']) ? $datosForm['radio'] : 1;

$_SESSION['datos_form']['__step__'] = $step;

header('Content-Type: application/json');

$json =  array(
  'radio'     => $radio,
  'step'      => $step
);

echo json_encode($json);
10
  • ¿Podrías crear un ejemplo mínimo verificable para que veamos el problema completo?
    – Alvaro Montoro
    Commented el 15 ene. 2018 a las 22:30
  • 4
    Si ejecutamos juntos los códigos HTML y JS compartidos en la pregunta, no funciona nada. Tendríamos que corregir varios problemas antes de llegar al problema que explicas en la pregunta. Si crearas un ejemplo mínimo verificable, sería más sencillo visualizar el problema que explicas y ayudarte a solucionarlo.
    – Alvaro Montoro
    Commented el 15 ene. 2018 a las 22:45
  • 1
    esto pasa por que tienes 2 errores usas: localhost/wizard/saveTemp.php?step=6 y http GET cuando haces software web en donde la seguridad prima, se supone que el index.php es tu controlador principal, a donde puedes enviarles todo tipo de variables y peticiones y luego según el tipo de petición utilizas una arquitectura MVC para llevarla hasta saveTemp.php mediante controles de accesos. una vez en este lugar ya el usuario no tendra acceso teniendo en cuenta que lo deberia de hacer con http POST y no GET
    – user46896
    Commented el 22 ene. 2018 a las 16:44
  • otro error es la comprobación de datos, por ejemplo si X datos son obligatorios llenar puedes agregar una condición de existencia de datos, en tal caso que no existan, puedes enviarle un mensaje de error indicándole que no puede continuar con el paso siguiente del wizzard si no a llenado los pasos previos(control de errores y hackers).
    – user46896
    Commented el 22 ene. 2018 a las 16:47
  • 1
    Como te decía el apartado de seguridad es muy amplio y encontraras respuestas basadas en opiniones.. Nada con una referencia canónica que se igual a tu codigo. Si quieres una opinión basada en tu código esclusivamebte no creo que ni ofreciendo 300 puntos la tendrás y menos te van a resolver el error de arquitectura que tienes... Elimine mi respuesta ya que en vista que no llenas tus espectativas tampoco estoy dispuesto a recibir puntos negativos dándote mi opinión. Solución inmediata pasate a un framwork que implemente la capa de seguridad y no reinventa la rueda.
    – user46896
    Commented el 25 ene. 2018 a las 3:57

5 respuestas 5

7
+150

¿Cómo puedo evitar que se burlen del sistema al agregar un control reforzado usando PHP, donde un usuario no puede pasar del paso 1 al paso 3 o al paso 6, sino que debe continuar el orden de los pasos 1, 2, 3, 4, 5, 6 y así sucesivamente.

Procedimiento:

Entonces como ya tenemos definido los pasos, en la variable $step en una sesión, cuando se esté enviando/procesando el siguiente paso/envío, compruebe que $step es el próximo paso.

$step =  isset($_GET['step']) ?  $_GET['step'] : 1;
$last_step = isset($_SESSION['datos_form']['__step__']) ? $_SESSION['datos_form']['__step__'] : 0;
//$step > $last_step + 1
if ($step != $last_step + 1) {
    die(json_encode(array('error' => 'Paso inválido')));
}

O quizas le interese realizar un cifrado a los valores enviados por método GET, en las siguientes fuentes puede usted analizar.

Otros temas de interés

¿Cómo puedo validar los campos del formulario wizard con PHP en conjunto de las validaciones ya existentes con Javascript?

Crear un wizard usando PHP que funcione de la misma manera que el script jQuery es realmente imposible realizar el mismo mecanismo, y al realizarlo se tendría que enviar a la misma página los datos, no creo que ese procedimiento sea el deseado.

Imaginando que un usuario tenga deshabilitado el uso de javascript en el navegador, se mostraría todos los pasos a la vez, como si fuera un solo form aunque en realidad lo es, solo que en el uso del script jQuery se dividen en partes.

Entonces la validación del formulario usando PHP sería de manera normal, que al ejecutar el envio con datos vacíos, ejecutar los errores por cada campo input vacío.

2

¿Cómo puedo evitar que se burlen del sistema al agregar un control reforzado usando PHP, donde un usuario no puede pasar del paso 1 al paso 3 o al paso 6, sino que debe continuar el orden de los pasos 1, 2, 3, 4, 5, 6 y así sucesivamente.

No importan los pasos, ni el orden de los pasos, ni nada de lo que sucede del lado cliente. No se puede confiar en lo que sucede en el browser/navegador. Si vas a trabajar de web developer debes entender que no se puede confiar en lo que sucede en el cliente web. Por lo tanto, la unica forma de solucionar este problema de "desconfianza" es: Validar nuevamente todos los datos cuando se reciben en el servidor. Osea, validar todos los datos al mismo tiempo (los recuperados en los 6 pasos) luego de terminado el wizard y antes de aceptar la operacion y de guardar los datos en la base.

Escencialmente esto es una caracteristica de la arquitectura Cliente-Servidor.

No importa si estas trabajando en PHP, en C# o en Node.js.

Las validaciones del lado del cliente son para hacer que la interface se "amigable" con el usuario y deben estar enfocadas en el usuario. Son escenciales para la llamada "experiencia de usuario" y no hay mucho para hacer con los usuarios maliciosos, en ultima instancia ellos pueden atacar tu sistema sin usar la interface web, usando una herramienta tipo PostMan invocando los scripts PHP directamente.

Por el contrario, las validaciones del lado del servidor son para controlar que los datos esten completos y sean validos. Esto incluye todas las validaciones que vos como arquitecto decidas que son necesarias. Ej, validar el formato del campo "email" o no.

¿Cómo puedo validar los campos del formulario wizard con PHP en conjunto de las validaciones ya existentes con Javascript?

Repito, son validaciones diferentes con propositos diferentes, ademas son aplicaciones diferentes. No hay bases para reutilizar codigo aqui.

4
  • 1
    Su respuesta parece más opinión que una solución al problema, en primer segmento mencionaste algo de cómo solucionar... Pero no muestras un ejemplo de cómo hacerlo, mucha teoría en las respuestas, exepto la respuesta de IniDesing.com
    – J. Mick
    Commented el 27 ene. 2018 a las 10:07
  • 1
    @J.Mick leyendo la pregunta, me parece que el autor está algo perdido en el rumbo que está tomando/en los conceptos de validación. Explicarle que tiene que ir por otro camino me parece la mejor respuesta.
    – Mariano
    Commented el 27 ene. 2018 a las 11:09
  • 3
    @Mariano En qué sentido, al menos yo veo clara la pregunta, y me imagino que Emanuel Ve tambien porque si no fuera ese el caso, no hubiera respondido, y explicarlo en teoría de cómo hacerlo sin ejemplo más me parece opinion, y si las opiniones son aceptadas existen muchos comentarios que entonces pueden darse como respuestas, yo estoy aquí discutiendo porque me interesa una cierta parte de esta pregunta, que es útil tomarlo como ejemplo evitar la manipulación de la url en valores numéricos ¡Saludos!
    – J. Mick
    Commented el 27 ene. 2018 a las 12:46
  • 1
    Evitar la manipulacion de la url, solo tiene sentido con respecto al transporte de la solicitud HTTP, rta: usa HTTPS. El cliente puede y siempre podra enviar una solicitud modificada, eso no puede evitarse. Como dije, olvida el browser, el puede usar PostMan y el servidor aceptaria la solicitud como si viniese del browser. asi, ¿que sentido tiene poner codigo javascript o lo que sea para evitar tal manipulacion?, lo unico que se puede hacer es en serverside, y no es una opinion son hechos verificables. El OP pregunta por que no entiende, y lo que hize fue explicarle la parte que no entiende. Commented el 27 ene. 2018 a las 15:03
0

Puedes pasar los valores del step por POST o utiliza el router de tu framework para forzar las peticiones a esa url que solo sean por POST, de lo contrario redirigirte al paso 1.

-1

Guarda en una session el paso que lleva. y al dar el siguiente paso verifica que sea la correcta. Ese valor pídelo y actualizarlo por medio de ajax.

Aunque si crees que seria mucho trabajo para el servidor. Puedes crear un arreglo con un solo elemento constante. Ese elemento guardara el paso donde estas. al cambiar de "paso" sacas la anterior variable constante y la remplazas con el paso actual.

1
  • Gracias por tu contribución, pero te sugiero agregar información más detallada para que tu respuesta sea bien recibida. Revisar Cómo responder
    – Jorgesys
    Commented el 26 ene. 2018 a las 16:13
-1

En pseudocódigo sería:

(PHP) Definir variable session de pasos completados = 0
(PHP) Verificar que la URL del "paso" al que quiere acceder es igual a variable_pasos_completados +1
Si ok: Mostar página 
    Cuando clique next:
       Verificar por javascript
       Si OK:
          Verificar por PHP
          Si ok: Almacenar, y almacenar variable session del paso completado
          Si no Ok: Mostrar la página indicando el error en el form
       Si no OK: Mostrar error en 
 Si no OK: Enviar a la página correspondiente del paso que le toque

Espero que se entienda. De esta manera no necesitas ajax, y puedes seguir usando GET o POST.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.