Articles

Garder votre Code AU SEC

Garder Votre Code AU SEC Dans un Composant

La première fois que j’ai réalisé que je ne gardais pas mon code AU SEC, c’était lorsque j’ai dû créer un formulaire de connexion. L’essentiel ci-dessous montre le code de mon formulaire de connexion.

Formulaire de connexion Non SEC

Il s’agit d’un formulaire générique où vous devez entrer votre email et votre mot de passe. handleChange est la fonction de rappel qui fait du formulaire un composant contrôlé.

Si vous n’êtes pas familier avec un composant contrôlé, c’est essentiellement là que les valeurs du composant React sont les mêmes que celles affichées sur le DOM, en respectant le principe de la source unique de vérité.

Pouvez-vous trouver où le code peut ne pas être SEC?

Astuce: Jetez un œil aux attributs input.

Si vous regardez les attributs input et les instructions switch/case, les chaînes « email” et « password” sont répétées.

Si vous avez accidentellement supprimé une lettre de ces chaînes, le code sera toujours compilé, mais maintenant cela ferait du débogage un cauchemar lorsque vous devez envoyer les valeurs d’e-mail et de mot de passe au back-end.

De plus, que se passe-t-il si je décide de modifier mon formulaire de connexion de telle sorte qu’au lieu d’utiliser l’e-mail comme identifiant, je souhaite utiliser un nom d’utilisateur à la place?

Maintenant, je dois trouver tous les endroits où ”email » apparaît et le changer en ”nom d’utilisateur ». Vous pensez peut-être: « Attendez, mon éditeur de texte peut trouver toutes les instances de « nom” et je peux tout remplacer par « nom d’utilisateur” et l’appeler un jour. »

Et je dirais que vous avez raison, mais cela ne résout pas le problème des erreurs accidentelles mentionnées dans le paragraphe précédent.

Alors, comment ce formulaire de connexion peut-il être sec? Vous pouvez enregistrer les chaînes répétées sur une constante.

const EMAIL = "email"
const PASSWORD = "password"

Cela entonne toutes les instances de ces chaînes en une seule source de vérité, une constante. Veuillez noter que les constantes sont capitalisées en fonction de la convention.

Alors maintenant, si vous remplacez toutes les chaînes ”email » et ”password » par leurs constantes respectives, le code ressemblera à l’essentiel ci-dessous.

Formulaire de connexion SEC

Comment cela règle-t-il le problème des erreurs accidentelles? Si vous faites une erreur avec le nom de la constante (par exemple, EMAILEMAL), JavaScript aura une erreur de compilation car la constante nommée incorrecte n’est pas définie.

Si vous faites une erreur sur la chaîne, ou la valeur de la constante, vous pouvez exactement localiser l’erreur car il n’y a qu’une seule ligne où cette valeur est déclarée. Cela permet d’économiser du temps et des efforts en examinant attentivement votre code pour détecter d’éventuelles erreurs mineures.