JavaScript: validation côté client vs côté serveur

Quel est le meilleur moyen d'effectuer une validation côté client ou côté serveur?

Dans notre situation, nous utilisons

• jQuery et MVC.
• Données JSON à passer entre notre vue et notre contrôleur.

Une grande partie de la validation que je fais consiste à valider les données au fur et à mesure que les utilisateurs les saisissent. Par exemple, j'utilise l' keypressévénement pour empêcher les lettres dans une zone de texte, définir un nombre maximal de caractères et qu'un nombre se trouve dans une plage.

Je suppose que la meilleure question serait: y a-t-il des avantages à faire une validation côté serveur par rapport au client?

Génial répond à tout le monde. Le site Web que nous avons est protégé par mot de passe et est destiné à une petite base d'utilisateurs (<50). S'ils n'utilisent pas JavaScript, nous enverrons des ninjas. Mais si nous concevions un site pour tout le monde, j'accepterais de faire une validation des deux côtés.

Comme d'autres l'ont dit, vous devriez faire les deux. Voici pourquoi:

Côté client

Vous souhaitez d'abord valider les entrées côté client, car vous pouvez donner de meilleurs commentaires à l'utilisateur moyen . Par exemple, s'ils entrent une adresse e-mail non valide et passent au champ suivant, vous pouvez afficher un message d'erreur immédiatement. De cette façon, l'utilisateur peut corriger chaque champ avant d' envoyer le formulaire.

Si vous validez uniquement sur le serveur, ils doivent soumettre le formulaire, obtenir un message d'erreur et essayer de rechercher le problème.

(Cette douleur peut être atténuée en demandant au serveur de restituer le formulaire avec l'entrée d'origine de l'utilisateur remplie, mais la validation côté client est encore plus rapide.)

Du côté serveur

Vous souhaitez valider côté serveur car vous pouvez vous protéger contre l'utilisateur malveillant , qui peut facilement contourner votre JavaScript et soumettre des entrées dangereuses au serveur.

Il est très dangereux de faire confiance à votre interface utilisateur. Non seulement ils peuvent abuser de votre interface utilisateur, mais ils peuvent ne pas utiliser du tout votre interface utilisateur, ni même un navigateur . Que faire si l'utilisateur modifie manuellement l'URL, ou exécute son propre Javascript, ou modifie ses requêtes HTTP avec un autre outil? Et s'ils envoient des requêtes HTTP personnalisées à partir curlou à partir d'un script, par exemple?

( Ce n'est pas théorique; par exemple, j'ai travaillé sur un moteur de recherche de voyages qui a renvoyé la recherche de l'utilisateur à de nombreuses compagnies aériennes partenaires, compagnies de bus, etc., en envoyant des POSTdemandes comme si l'utilisateur avait rempli le formulaire de recherche de chaque entreprise, puis rassemblé et trié tous les résultats. Le formulaire JS de ces entreprises n'a jamais été exécuté, et il était crucial pour nous qu'ils fournissent des messages d'erreur dans le code HTML renvoyé. Bien sûr, une API aurait été bien, mais c'était ce que nous devions faire. )

Ne pas autoriser cela est non seulement naïf du point de vue de la sécurité, mais aussi non standard: un client doit être autorisé à envoyer HTTP par tous les moyens qu'il souhaite, et vous devez répondre correctement. Cela inclut la validation.

La validation côté serveur est également importante pour la compatibilité - tous les utilisateurs, même s'ils utilisent un navigateur, n'auront pas activé JavaScript.

Addendum - décembre 2016

Certaines validations ne peuvent même pas être correctement effectuées dans le code d'application côté serveur et sont totalement impossibles dans le code côté client , car elles dépendent de l'état actuel de la base de données. Par exemple, "personne d'autre n'a enregistré ce nom d'utilisateur", ou "le billet de blog sur lequel vous commentez existe toujours", ou "aucune réservation existante ne chevauche les dates que vous avez demandées", ou "le solde de votre compte est encore suffisant pour couvrir cet achat . " Seule la base de données peut valider de manière fiable les données qui dépendent des données associées. Les développeurs gâchent régulièrement cela , mais PostgreSQL fournit de bonnes solutions .

Oui, la validation côté client peut être totalement contournée, toujours. Vous devez faire les deux, côté client pour offrir une meilleure expérience utilisateur, et côté serveur pour être sûr que l'entrée que vous obtenez est réellement validée et pas seulement supposément validée par le client.

Je vais juste le répéter, car c'est assez important:

Validez toujours sur le serveur

et ajoutez JavaScript pour la réactivité de l'utilisateur.

L'avantage de la validation côté serveur par rapport à la validation côté client est que la validation côté client peut être contournée / manipulée:

• L'utilisateur final peut avoir désactivé javascript
• Les données peuvent être envoyées directement à votre serveur par quelqu'un qui n'utilise même pas votre site, avec une application personnalisée conçue pour le faire
• Une erreur Javascript sur votre page (causée par un certain nombre de choses) peut entraîner l'exécution d'une partie, mais pas de la totalité, de votre validation

En bref - toujours, toujours valider côté serveur, puis considérer la validation côté client comme un «extra» supplémentaire pour améliorer l'expérience de l'utilisateur final.

Vous devez toujours valider sur le serveur.

Avoir également une validation sur le client est bien pour les utilisateurs, mais n'est absolument pas sûr.

Eh bien, je trouve encore de la place pour répondre.

En plus des réponses de Rob et Nathan, j'ajouterais que les validations côté client sont importantes. Lorsque vous appliquez des validations sur vos formulaires Web, vous devez suivre ces instructions:

Côté client

1. Vous devez utiliser des validations côté client afin de filtrer les demandes authentiques provenant d'utilisateurs authentiques de votre site Web.
2. La validation côté client doit être utilisée pour réduire les erreurs pouvant survenir lors du traitement côté serveur.
3. La validation côté client doit être utilisée pour minimiser les allers-retours côté serveur afin d'économiser la bande passante et les demandes par utilisateur.

Du côté serveur

1. Vous NE DEVRIEZ PAS supposer que la validation effectuée avec succès côté client est parfaite à 100%. Peu importe même s'il dessert moins de 50 utilisateurs. Vous ne savez jamais lequel de votre utilisateur / employé se transforme en "mal" et fait une activité nuisible en sachant que vous n'avez pas les validations appropriées en place.
2. Même si c'est parfait en termes de validation d'adresse e-mail, de numéros de téléphone ou de vérification de certaines entrées valides, il peut contenir des données très dangereuses. Qui doit être filtré côté serveur, que ce soit correct ou incorrect.
3. Si la validation côté client est contournée, vos validations côté serveur viennent vous sauver de tout dommage potentiel à votre traitement côté serveur. Ces derniers temps, nous avons déjà entendu beaucoup d'histoires d'injections SQL et d'autres types de techniques qui pourraient être appliquées afin d'obtenir de mauvais avantages.

Les deux types de validations jouent un rôle important dans leur portée respective, mais le plus fort est le côté serveur. Si vous recevez 10 000 utilisateurs à un moment donné, vous finirez certainement par filtrer le nombre de demandes arrivant sur votre serveur Web. Si vous constatez qu'il y avait une seule erreur comme une adresse e-mail invalide, ils envoient à nouveau le formulaire et demandent à votre utilisateur de le corriger, ce qui consommera certainement les ressources et la bande passante de votre serveur. Mieux vaut donc appliquer la validation javascript. Si javascript est désactivé, la validation côté serveur viendra à la rescousse et je parie que seuls quelques utilisateurs l'auront peut-être accidentellement désactivée puisque 99,99% des sites Web utilisent javascript et il est déjà activé par défaut dans tous les navigateurs modernes.

Vous pouvez faire une validation côté serveur et renvoyer un objet JSON avec les résultats de validation pour chaque champ, en gardant le Javascript du client au minimum (juste en affichant les résultats) et en ayant toujours une expérience conviviale sans avoir à vous répéter à la fois sur le client et le serveur.

Le côté client doit utiliser une validation de base via les types d'entrée HTML5 et les attributs de modèle et comme ceux-ci ne sont utilisés que pour des améliorations progressives pour une meilleure expérience utilisateur (même s'ils ne sont pas pris en charge sur <IE9 et safari, mais nous ne comptons pas sur eux). Mais la validation principale devrait avoir lieu côté serveur.

Je suggérerai de mettre en œuvre à la fois la validation client et serveur, cela rend le projet plus sécurisé ...... si je dois en choisir un, j'irai avec la validation côté serveur.

Vous pouvez trouver des informations pertinentes ici https://web.archive.org/web/20131210085944/http://www.webexpertlabs.com/server-side-form-validation-using-regular-expression/

JavaScript peut être modifié lors de l'exécution.

Je suggère un modèle de création d'une structure de validation sur le serveur et de partage avec le client.

Vous aurez besoin d'une logique de validation distincte aux deux extrémités, par exemple:

"required"attributs côté inputsclient

field.length > 0 du côté serveur.

Mais l'utilisation de la même spécification de validation éliminera une certaine redondance (et des erreurs) de la validation en miroir aux deux extrémités.

La validation des données côté client peut être utile pour une meilleure expérience utilisateur: par exemple, un utilisateur qui tape mal son adresse e-mail, ne doit pas attendre que sa demande soit traitée par un serveur distant pour connaître la faute de frappe qu'il a faite.

Néanmoins, comme un attaquant peut contourner la validation côté client (et peut même ne pas utiliser le navigateur du tout), la validation côté serveur est requise et doit être la véritable porte pour protéger votre backend des utilisateurs malveillants.

Je suis tombé sur un lien intéressant qui distingue les erreurs grossières, systématiques et aléatoires.

Client-Side validationconvient parfaitement pour éviter les erreurs grossières et aléatoires. Généralement une longueur maximale pour la texture et l'entrée. N'imitez pas la règle de validation côté serveur; fournissez votre propre règle de validation grossière (ex. 200 caractères côté client; côté nserveur dicté par une règle métier forte).

Server-side validationconvient parfaitement pour éviter les erreurs systématiques; il appliquera les règles commerciales.

Dans un projet dans lequel je suis impliqué, la validation se fait sur le serveur via des requêtes ajax. Sur le client, j'affiche les messages d'erreur en conséquence.

Lectures complémentaires: erreurs grossières, systématiques et aléatoires:

https://answers.yahoo.com/question/index?qid=20080918203131AAEt6GO

Si vous effectuez une validation légère, il est préférable de le faire sur le client. Cela économisera le trafic réseau, ce qui aidera votre serveur à mieux fonctionner. Si cela complique la validation qui implique d'extraire des données d'une base de données ou quelque chose, comme des mots de passe, il est préférable de le faire sur le serveur où les données peuvent être vérifiées en toute sécurité.