¿La validación del patrón de entrada HTML5 es suficiente (o incluso relevante) para la validación del lado del cliente?

23

Una característica interesante de HTML5 es el atributo <input pattern="" /> , que permite que el navegador valide el valor del campo de entrada contra una expresión regular proporcionada por el desarrollador.

Posteriormente, esto se enlaza con el campo ValidityState que luego puede consultarse para comentarios de UX, para evitar envíos no válidos, etc.

El servidor implementa la misma validación de condición previa (así como XSRF).

Teniendo en cuenta esto, ¿este patrón de validación del lado del cliente es maduro y adecuado , o por algún motivo todavía es deseable interceptar todo el formulario y someterlo a la validación tradicional por campo antes de enviarlo?

    
pregunta msanford 19.09.2017 - 15:43
fuente

5 respuestas

108

Desde una perspectiva de seguridad, debe volver a validar todo en el servidor. Este siempre será el caso, sin importar cuán bonitas y avanzadas sean las características de HTML5. Simplemente no puedes confiar en el cliente. No tienes idea si seguirá las reglas HTML5 o no. Ni siquiera sabes si es un navegador.

Entonces, ¿debería validar todo el formulario con su propio lado de cliente JS antes de enviarlo, incluso si usa las características HTML5? Desde una perspectiva de seguridad no importa. De todos modos, la validación del lado del cliente tiene un valor de seguridad cero (vea más arriba), por lo que, desde una perspectiva de seguridad, no debería molestarse en hacerlo en absoluto.

La validación del lado del cliente es puramente sobre la experiencia del usuario. Si su propia validación de JS o HTML5 incorporado hace que la mejor UX sea una pregunta interesante, pero no es un tema aquí.

    
respondido por el Anders 19.09.2017 - 15:50
fuente
14

Una explicación con código y capturas de pantalla

Las respuestas dadas son geniales. Pero quería ilustrar esto con algunos códigos / capturas de pantalla.

La conclusión es que cualquier cosa del lado del cliente puede ser manipulada (deshabilitada / eliminada por completo / anulada o modificada) por el usuario final. Por lo tanto, cualquier tipo de "validación del lado del cliente" es totalmente inútil desde una perspectiva de seguridad. Siempre debes validar las cosas del lado del servidor.

Supongamos que tiene un formulario HTML como este:

<form method="post" action="index.php">
    <input type="email" name="emailAddress" required>
    <button type="submit">Submit form</button>
</form>

Esto solicita una dirección de correo electrónico ( type="email" ) y dice que es un campo obligatorio (atributo required ).

Si intento enviar algo que está vacío o no es una dirección de correo electrónico, se producirá un error, por ejemplo.

¿Porquéestoesinútildesdeunaperspectivadeseguridad?TodoloqueelusuariotienequehaceresmanipularelHTML.Puedenhacerloguardandounacopiadelapáginaweb,editándolayluegovolviéndolaaabrir.Opuedenusarlasherramientasdeldesarrolladorensunavegadorparaeditarelmarcado.Puedenhacerloporqueeselcódigodelladodelclienteyestábajosucontrol.

Digamosquecambioelformatodelformularioaesto:

<formmethod="post" action="index.php">
    <input type="text" name="emailAddress">
    <button type="submit">Submit form</button>
</form>

Ahora estoy diciendo que el campo emailAddress es de tipo text (es decir, no es email ) y no es un campo obligatorio (se eliminó el atributo required ).

Así que puedo enviar esto al servidor. La cadena de texto "andy" obviamente no es una dirección de correo electrónico válida. Pero dado que no tenemos una validación del lado del servidor (todavía), se publicará en el servidor y luego, si el código PHP utiliza $_POST['emailAddress'] , tendría "andy" como datos.

Tambiénpodríaenviarelformulariosindatos,encuyocasolaaplicación,sinningunavalidacióndelladodelservidor,tendríaunacadenavacíaenlavariable$_POST['emailAddress'].

Estosolofueposibleporqueyo,comousuariofinal,podíamanipularelcódigodelladodelcliente.

¿Porquéesseguralavalidacióndelladodelservidor?Elusuariofinalnopuedemanipularelcódigodelladodelservidor(amenosqueelservidorhayasidocomprometido,peroeseesunproblemaaparteynoesalgotanfácilcomomanipularHTMLparalapersonapromedio).

Entonces,enPHP,podríahacerunacomprobacióncomoesta:

if(!filter_var($_POST['emailAddress'],FILTER_VALIDATE_EMAIL)){die('Invalidemailaddress');}

Aunqueesteesunmétododemanejodeerroresnoamigable,detendrálaejecucióndelscriptsielusuarioenvía"andy" en lugar de una dirección de correo electrónico válida. Por lo tanto, la aplicación nunca utilizará "andy" como una variable en la que se esperaba una dirección de correo electrónico. Dado que el usuario final no puede manipular el código PHP anterior, hay menos posibilidades de que puedan omitir la validación. Esta es la validación del lado del servidor, no puede ser (fácilmente) cambiada por un usuario final porque no está bajo su control cambiarla.

¿Por qué molestarse en la validación del lado del cliente entonces? La validación del lado del cliente es útil para las mejoras de la interfaz de usuario de "buen aspecto", o por ejemplo, mensajes de error / deshabilitación de campos de formulario. Por ejemplo, podría decirse que es una buena función de IU para tener ese mensaje en la primera captura de pantalla en caso de que el usuario escriba incorrectamente una dirección de correo electrónico. El formulario ni siquiera se enviará en el primer conjunto de condiciones, lo que reducirá los datos innecesarios que se envían al servidor. Pero en última instancia, cualquier cosa hecha por el cliente puede ser cambiada por el usuario final. Por lo tanto, no es seguro de ninguna manera y nunca se debe pensar en la "validación del lado del cliente" cuando se trata de prácticas de seguridad. Cualquier validación del lado del cliente es en gran parte solo para mejoras de la interfaz de usuario.

La validación del lado del cliente también es útil para las aplicaciones del lado del cliente (cuando no está solicitando / publicando en un servidor). Por ejemplo, si tenía el formulario indicado anteriormente y luego mostró los contenidos de emailAddress en un <div> en la página, leyéndolo con JavaScript / jquery. Si el usuario ingresó algo como <script>alert('hello!');</script> y no hubo validación, produciría una alerta cuando el JavaScript intentara escribir el valor en el campo en el <div> . No se está publicando nada en el servidor en este caso, todo sucede en el lado del cliente, por lo que, de nuevo, la validación del lado del cliente es útil en este tipo de escenario. Sin embargo, el mismo razonamiento se aplica en que un usuario todavía puede deshabilitar la validación. El impacto aquí es menor porque si ejecutaran el código anterior, solo ocurriría en su máquina local, no en otros usuarios de la aplicación. Por ejemplo:

Utilizandoelsiguientecódigo(sinningunavalidación):

<formmethod="post" action="#">
    <input type="text" name="emailAddress" id="emailAddress" size="100">
    <button type="submit">Submit form</button>
</form>

<div id="test"></div>

Y jquery para escribir el contenido del formulario en un <div> con el ID test :

$(document).ready(function() {
    $("button").click(function(e) {
        e.preventDefault();

        $("#test").html($("#emailAddress").val());
    });
});
    
respondido por el Andy 20.09.2017 - 17:27
fuente
5

Como declaró Anders, la validación del lado del cliente es irrelevante para la seguridad de la aplicación, pero es muy importante desde el punto de vista de UX.

La validación del lado del cliente está enfocada o le brinda al usuario un tiempo más suave y fácil al llenar sus formularios, el mejor ejemplo que conozco es el complemento de jQuery Masks, que se puede usar para limitar el tamaño y el patrón de entrada al tiempo que proporciona una retroalimentación visual para el usuario. Esto puede ayudarlo en fallas no relacionadas con la seguridad, como recibir datos de los usuarios en un patrón diferente al esperado en el lado del servidor, pero cualquier atacante puede ignorarlo fácilmente.

tl; dr: no hay suficiente validación del lado del cliente, simplemente no confíes en el cliente, simplemente trata todo lo recibido en el servidor antes de procesarlo.

    
respondido por el Bristran 19.09.2017 - 17:36
fuente
1

Ninguna de las respuestas hasta ahora lo menciona realmente, así que permítame agregar esto:

La razón por la que cualquier cosa en su HTML es completamente irrelevante para la seguridad es que cualquier atacante puede, de forma trivial, crear solicitudes sin siquiera cargar ningún HTML en el navegador (escribiendo una solicitud en la consola, o utilizando algún plugin). En realidad, sin siquiera iniciar su navegador (c / f curl , wget o cualquier lenguaje de programación).

La parte relevante para estas cosas son las solicitudes HTTP . No es la carga HTML. Y, a excepción de la capa TLS / SSL, no hay nada que proteja el contenido de la solicitud HTTP de la persona que realmente está creando la solicitud.

Por lo tanto, toda la seguridad debe tener lugar en el lado del servidor. Todas las verificaciones del lado del cliente están ahí para una mejor experiencia de usuario (omitir un viaje de ida y vuelta).

    
respondido por el AnoE 21.09.2017 - 14:49
fuente
1

Las validaciones de HTML se aplicarán solo a aquellos que no saben cómo cambiar el código html desde el lado del cliente. Estas validaciones html se pueden quitar y manipular fácilmente desde el lado del cliente Siempre tenga la validación adecuada en su db.

    
respondido por el Harshit Singhal 21.09.2017 - 18:29
fuente

Lea otras preguntas en las etiquetas