0

Hace unos días aquí me dijeron que este código debía estar en el backend puesto que al ser Javascript, fácilmente podría saltarse. Mi sitio web no tiene como tal Backend, solo es HTML dentro de un index.php, CSS y un algunos archivos JS.

Me gustaría saber si hay alguna forma de cargar el código con PHP? O de alguna manera que no pueda saltarlo el usuario simplemente borrando algunas líneas desde las herramientas de desarrollador.

$("#ejemplo").on("input", function(e) {
  var valorInput = e.target.value;
  const globalRegex = new RegExp('^(?![0-2])(?![7-9])[0-9x\r?\n|]*$', 'gi');
  if (!globalRegex.test(valorInput)) {
    e.target.value = ''
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ejemplo"/>
<!--El código permite que se agregue solo la letra X y el signo |. También evita que se introduzcan números que empiecen con 0, 1, 2, 7, 8 y 9-->

6
  • Lo importante en este punto es que el PHP que reciba el formulario vuelva a realizar la comprobación de la expresión regular. Es decir, mantén la comprobación en el lado del cliente, pero recuerda volver a repetirla en el lado del servidor. Las comprobaciones en el lado del cliente son siempre opcionales, pero las del lado del servidor siempre son obligatorias. Commented el 25 mar. 2022 a las 7:12
  • Cómo podría hacer que php lo compruebe? @OscarGarcia Commented el 25 mar. 2022 a las 7:16
  • Por supuesto, pero debes compartir el código del PHP que se ejecuta al recibir el formulario (o la petición XHR). Con el código que has compartido no se puede hacer nada, solo conocer la expresión regular permitida. Commented el 25 mar. 2022 a las 7:24
  • 3
    Mi sitio web no tiene como tal Backend, solo es HTML dentro de un index.php -> Esto es como decir "Yo no tengo coche, solo esta carrocería con cuatro ruedas y un motor"... Siento decirte que php siendo un lenguaje de servidor se considera "como tal backend". Lo que te quieren decir es que las verificaciones, aunque no esté mal hacerlas en front, siempre se deben hacer en back (en tu caso, en php). De esa manera el usuario tiene un feedback visual instantáneo de si está bien, y siempre te aseguras que aunque se lo intente saltar no pueda ;)
    – Benito-B
    Commented el 25 mar. 2022 a las 7:48
  • 1
    Tras leer el comentario de Benito me percato que tienes un error de concepto. El anglicismo backend (motor o lado del servidor en castellano) hace referencia al código que se ejecuta en el lado del servidor, mientras que la interfaz o frontal (frontend en inglés) es el código que se ejecuta en el lado del cliente. Por lo que el hecho de que tu código sea un archivo PHP significa que tu motor/servidor (backend) es PHP. Commented el 25 mar. 2022 a las 8:31

2 respuestas 2

1

Lo que te dijeron es cierto. De hecho, deberían haberte aclarado que es aún más importante hacer las validaciones oportunas en el servidor (o backend) que en la interfaz (o frontend) y que las validaciones en el lado de la interfaz nunca sustituyen a las del lado del servidor porque, tal y como te dijeron, los usuarios podrían manipular el campo del formulario y enviarte lo que ellos deseen, saltándose los filtros de la interfaz.

Para conseguirlo debes realizar exactamente las mismas comprobaciones (al menos) en el lado del servidor, de modo que si la comprobación en el lado de la interfaz es la siguiente:

/*$("#ejemplo").on("input", function(e) {
  const globalRegex = new RegExp('^(?![0-2])(?![7-9])[0-9x\r?\n|]*$', 'gi');
  if (!globalRegex.test(e.target.value)) {
    e.target.value = '';
  }
});*/
input[type="text"], input[type="text"]:valid { border-color: green; }
input[type="text"]:invalid { border-color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" onsubmit="return false">
  <input type="text" id="ejemplo" name="ejemplo"
    required="required"
    pattern="[^0-2][^7-9][0-9x\r?\n|]*"
    title="Cualquier cosa menos un 0-2, luego menos un 7-9 y luego solo dígitos 0-9"
  />
  <input type="submit" />
</form>

NOTA: He comentado tu código para que veas que la comprobación la puede hacer el navegador sin necesidad de JavaScript. Cuando pulses ENTER o envíes el formulario pulsando el botón te aparecerá el mensaje de error.

Al recibir ese cambio en PHP debes comprobar que coincida con el patrón y, si no lo hace, puedes hacer varias cosas:

  • Volver a mostrar el formulario con un mensaje de error en él para que el usuario vuelva a rellenarlo correctamente.
  • En caso de peticiones fetch/XHR (ajax) devolver un estado de error.
  • Devolver un código de error HTTP 400 (Bad Request o Solicitud Incorrecta) o 422 (Unprocessable Entity o Entidad no Procesable) que indique que la petición no pudo ser procesada porque es errónea.

Yo, personalmente, me decanto por la última opción. En la interfaz ya he proporcionado las herramientas para que el usuario no envíe una petición errónea. Si igualmente la ha enviado no debo facilitarle las cosas.

Éste es un ejemplo de cómo hacer el trabajo usando preg_match():

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    /* Si el campo no está definido o no cumple el patrón (1) */
    if (
        true === empty($_POST["ejemplo"])
        || 1 !== preg_match(
            "^(?![0-2])(?![7-9])[0-9x\r?\n|]*$",
            $_POST["ejemplo"],
            $salida
        )
    ) {
        header("HTTP 400 Bad Request", true, 400);
        exit;
    }
    /* A partir de aquí las validaciones han sido satisfactorias */
}
5
  • 1
    amigooo! No sabes cómo me has salvado la vida, me funcionó perfectamente y la explicación es excelente. Me funcionó perfecto adaptándolo a mi código, solo tengo una duda, se puede mantener el código Javascript original y manteniendo el pattern en el input? Sigue siendo lo mismo o la validación cambiaría? Lo digo porque así tal cual tu código aun permite que se puedan escribir números y letras (que ya con la validación del lado del servidor se evita) pero igual me gustaría que desde un inicio los usuarios no puedan escribirlos ni pegarlos cómo originalmente estaba. Commented el 27 mar. 2022 a las 9:31
  • 1
    La opción de dejar solo el atributo pattern implica que el usuario no sabrá si es correcto o no hasta enviar el formulario a no ser que uses pistas visuales como he hecho yo, con CSS, para indicarlo. Tu JavaScript es bastante intrusivo para el usuario porque borra completamente el campo en caso de equivocarte, sin opción a rectificar, obligando al usuario a volver a teclear el código desde el principio otra vez. Una solución alternativa y menos intrusiva podría desarrollarse de modo que si introducir un carácter va a romper el patrón, impedir que se escriba solo ese carácter. Commented el 27 mar. 2022 a las 13:31
  • Entiendo, muchas gracias por los consejos! Tengo un problemita: Agregué el codigo PHP que pusiste a mi código principal de PHP, sin embargo lo estoy implementando mal parecer, porque tu código se aplica a números que sí estaban permitidos :( es decir, no puedo checar ningún número (mi código principal de PHP hace eso, pero falla si le agrego el tuyo) Es decir, el regex se aplica a todo y no puedo hacer nada :( ajunto un codepen con el PHP para que revises cómo implementé tu código y si podrías decirme cómo hacerlo :( Commented el 27 mar. 2022 a las 15:30
  • 1
    Acabo de echarle un vistazo. Es un código muy duro de leer, y usas demasiados "trucos" para hacer cosas de manera diferente a como deberían hacerse (como lo de concatenar | a un campo POST para luego compararlo con 0, o generar datos JSON concatenando texto a una cadena). ¿Podrías decirme en tu código cuál es el campo POST que se recibe en el PHP o cómo se llama en la petición XHR (ajax)? ¿Es agregado? Necesito asegurarme porque, para empezar, el código de ejemplo usa el nombre que usaste en tu pregunta, ejemplo, y no el que pareces usar en tu código real, agregado. Commented el 28 mar. 2022 a las 14:12
  • tienes alguna forma en la que pueda contactarte? No importa dónde sea, realmente te agradecería mucho y es algo sencillo, aparentemente eres la única persona que me podría ayudar y quiero evitar seguir haciendo comentarios que confundan a otros :( Commented el 29 mar. 2022 a las 10:37
0

Tu pregunta esta mal, jquery trabaja sobre JS que es un lenguaje frontend, es decir se ejecuta solo en el cliente, sea celular, navegador etc, si te a herramientas de desarrolador puedes modificar tus reglas. Luego PHP se ejecuta en el servidor cuando estas en desarrollo lo común es que tengas tu propio equipo de servidor esto se hace sencillo con xampp, necesitas un servidor con apache por ejemplo para poder interpretar PHP, si estas abriendo solo tu archivo .html no se va a ejecutar PHP.

Esta bien así como lo hiciste, solo al enviarlo vuelves a validar con php, necesitas los dos archivos.

En tu HTML supongo tienes un input con id ejemplo

<form method='post' action='tu-fichero.php'>
 <input id='ejemplo' type='text' name='ejemplo' placeholder='Solo debes ingresar x | numeros'>
 <input type='submit'>
</form>

Tu codigo js esta bien luego en php revalidas

<?php
 $validar = $_POST['ejemplo'];

 //validas ahora la variable creada, 
?>

Vas a tener que leer php; como declarar varaibles, las funciones equivalentes de JS, todo esto para ver si lo que ingresaron es valido con tus reglas y ya despues lo ocupas tu entrada en algun acceso o algo por el estilo.

Si solo es un ejercicio para aprender a validar todo esto no tiene mucho caso.

Saludos todos seguimos aprendiendo.

2
  • Si bien la respuesta no me ayudó, me ayudó bastante a ubicar y a aprender por donde debería empezar, muchas gracias! Commented el 26 mar. 2022 a las 6:16
  • La respuesta no soluciona tu pregunta, así no deberías marcarla como respuesta. En caso contrario la gente pensará que ya no necesitas más ayuda con esta pregunta y no entrarán a ella para responderla adecuadamente. Commented el 26 mar. 2022 a las 7:55

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.