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 deatrás
&continuar
delmulti form wizard
por medio de laconsola
añadiendoatributos
o códigojavascript
. Ejemplo:<a href="#" class="next" onclick="show_step('6')>Continuar</a>
al igual que la modificación de la URLsPHP
automáticamente salto al paso6
.
Entonces,
¿Cómo puedo evitar que se burlen del sistema al agregar un control reforzado usando
PHP
, donde un usuario no puede pasar del paso1
al paso3
o al paso6
, sino que debe continuar el orden de los pasos1, 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 tomarlosGET
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);
localhost/wizard/saveTemp.php?step=6
yhttp GET
cuando haces software web en donde la seguridad prima, se supone que elindex.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 hastasaveTemp.php
mediante controles de accesos. una vez en este lugar ya el usuario no tendra acceso teniendo en cuenta que lo deberia de hacer conhttp POST
y noGET