Fermer

août 15, 2019

Comment construire une machine de chiffrement avec JavaScript –


J'ai récemment été ravi d'apprendre que le mathématicien britannique Alan Turing figurera sur le nouveau billet de 50 £ de la Banque d'Angleterre . Turing occupe une place particulière dans le cœur des nerds de l'informatique pour écrire efficacement les plans de l'ordinateur. Il a également contribué à briser le code notoirement difficile de la marine Enigma utilisé par les sous-marins nazis au cours de la Seconde Guerre mondiale. En l'honneur de cela, j'ai décidé de lancer un didacticiel rapide pour construire une machine de chiffrement en utilisant les compétences de JavaScript décrites dans mon livre JavaScript Novice To Ninja .

Le chiffrement que nous allons utiliser est le chiffrement César, nommé d'après l'empereur romain, Jules César. C'est l'un des chiffres les plus simples qui soient. Il suffit de déplacer chaque lettre d'un nombre de points défini. Par exemple, la phrase "Hello World" deviendrait "KHOOR ZRUOG" en utilisant un décalage de 3 (que c'est le décalage que Julius Caesar aurait utilisé).

 Notre machine à chiffrer [19659004] Vous pouvez voir un exemple du code terminé ici . Essayez de rédiger des messages secrets pour comprendre comment cela fonctionne.

Pour commencer, lancez votre éditeur de texte préféré et enregistrez ce qui suit sous le nom caesar.html :




  
   César Cipher 


  

Caesar Cipher

Sortie

Il s'agit d'une page HTML standard contenant un formulaire avec une zone de texte pour la saisie de notre message. Il existe également un champ de saisie avec un attribut de type de numéro que la plupart des navigateurs affichent avec des flèches pas à pas, ce qui permet aux utilisateurs d’augmenter ou de diminuer la valeur. Nous pouvons également limiter les valeurs de 1 à 26 et définir la valeur par défaut sur 3 (en l'honneur de César). Il y a aussi un élément div vide en bas avec un id de sortie que nous utiliserons pour afficher le message crypté.

sont abordés dans le chapitre 8.

Écrivons maintenant le code JavaScript pour effectuer le chiffrement!

Créez un fichier nommé main.js et enregistrez-le dans le Même dossier que le fichier caesar.html .

Nous allons commencer par créer une variable globale appelée alphabet . Ce sera un tableau qui stockera chaque lettre de l'alphabet:

 const alphabet = [
  'A','B','C','D','E','F',
  'G','H','I','J','K','L',
  'M','N','O','P','Q','R',
  'S','T','U','V','W','X',
  'Y','Z'
];

Ce tableau sera utile pour localiser les lettres dans l'alphabet et les déplacer d'un nombre défini de positions. Cela signifie également que nous pouvons utiliser des alphabets alternatifs en mettant simplement à jour cette variable.

Les variables sont traitées dans le chapitre 1 du livre et les tableaux dans le chapitre 3.

Nous avons maintenant besoin d'un moyen d'accéder aux différentes parties de la page. Pour cela, nous allons utiliser le modèle objet de document, ou DOM:

 const form = document.forms [0];
const output = document.getElementById ('output');

Ce code utilise des variables globales pour référencer l'élément de formulaire et l'élément div qui affichera le message crypté. Cela nous facilitera la tâche pour nous référer ultérieurement à ces éléments dans le code.

Le DOM est traité dans le chapitre 6 du livre.

Quand une personne saisit le message qu'elle veut chiffrer, ils appuient sur le bouton d'envoi et le message crypté s'affichera. Nous devons utiliser un gestionnaire d'événements qui se déclenche lorsque le bouton de soumission est enfoncé et nous donne accès à ce qui a été écrit dans la zone de texte .

 form.addEventListener ('submit', event => {
  event.preventDefault ();
  output.innerHTML = [... form.plaintext.value ] .map (char => encrypt (char)). join ('');
}
)

Les événements sont traités dans le chapitre 7.

Il y a beaucoup de choses qui se passent dans ce gestionnaire d'événements, donc examinons plus en détail chaque ligne:

 event.preventDefault ();

Ceci est utilisé pour empêcher le comportement par défaut de la soumission du formulaire, car nous ne voulons pas qu’il soit soumis à un serveur.

 output.innerHTML = [... form.plaintext.value ] .map (char => encrypt (char)). join ('');

Cette ligne met à jour la propriété innerHTML de la sortie div avec le message crypté. Vous pouvez accéder au message contenu dans la textarea à l’aide de form.plaintext.value . C'est une chaîne contenant divers caractères qui ont été entrés par l'utilisateur. Nous convertissons cette chaîne en message crypté en enchaînant plusieurs méthodes.

Premièrement, nous utilisons l'opérateur de propagation ... transformer la chaîne en tableau. Nous utilisons ensuite la méthode de la carte pour itérer sur chaque caractère et appliquons la fonction encrypt pour le transformer en un autre caractère.

Enfin, nous utilisons la méthode join ('') pour reconvertit le tableau en une chaîne pouvant être affichée dans la sortie divisée

Il ne nous reste plus qu'à écrire la fonction encrypt () utilisée par la méthode map dans l'événement gestionnaire ci-dessus. C'est le code qui appliquera le chiffre Caesar:

 function encrypt (char) {
  const shift = Number (form.shift.value);
  if (alphabet.includes (char.toUpperCase ()))
 {
    position const = alphabet.indexOf (char.toUpperCase ());
    const newPosition = (position + shift)% 26;
    retour alphabet [newPosition]
  }
  else {return char}
  }

Cette fonction accepte un caractère en tant qu'argument, puis renvoie le caractère chiffré.

Les fonctions sont décrites au chapitre 4 du livre.

Elle commence par attribuer la valeur de l'entrée de décalage. champ de la forme à la variable shift . Vous pouvez y accéder en utilisant le code form.shift.value . Toutes les valeurs entrées dans un formulaire sont soumises sous forme de chaînes. Nous devons donc remplacer le type de cette variable par un nombre utilisant la fonction Number () . Cela nous permettra ensuite d’exécuter des méthodes arithmétiques et autres méthodes de calcul avec celles-ci.

Nous avons ensuite une instruction conditionnelle qui vérifie si l’argument fait partie de l’alphabet. Ceci utilise la méthode de tableau includes () qui renvoie true si l'argument est dans le tableau. Notez que nous utilisons également la méthode toUpperCase () pour vérifier que le caractère est une lettre majuscule, car toutes les lettres du tableau alphabet sont en majuscules.

Si le caractère est dans le alphabet tableau, nous pouvons alors procéder et le chiffrer. Si ce n'est pas le cas, nous retournons simplement le caractère tel qu'il est (cela nous permet de traiter les espaces et les signes de ponctuation).

Le code de cryptage renvoie un élément du tableau de l'alphabet : [19659019] {
    position const = alphabet.indexOf (char.toUpperCase ());
    const newPosition = (position + shift)% 26;
    retour alphabet [newPosition]
  }

Tout d'abord, nous utilisons la méthode du tableau indexOf () pour rechercher l'index du caractère dans le tableau de l'alphabet . Ceci est stocké dans la position variable. Nous trouvons ensuite la position du caractère chiffré, en ajoutant la valeur de shift à l'index. Nous utilisons également l’opérateur modulaire, % pour utiliser l’arithmétique «mod 26». Cela signifie que toute valeur supérieure à 25 "retournera" au début du tableau, 26 ira à 0, 27 à 1, 28 à 2, etc. Cela signifie que la lettre "X" avec un décalage de 3 reviendra au début de l'alphabet et cartographiera à 'A'. Cette valeur est stockée dans la variable newPosition .

Nous renvoyons simplement le caractère du tableau alphabet correspondant à cette nouvelle position en fournissant la variable newPosition alphabet array.

Et c'est tout le code dont nous avons besoin! Essayez de taper un message dans la zone de texte, cliquez sur 'Soumettre' et votre message secret apparaîtra ci-dessous.

L'intérêt d'utiliser une fonction distincte encrypt () est que nous pouvons mettre à jour ceci pour utiliser une méthode de chiffrement différente à tout moment sans avoir à changer aucune autre partie du code

Le chiffrement César est probablement l'un des chiffrements les plus élémentaires, bien qu'il fût à la base du code Enigma. Peut-être pourriez-vous essayer d'utiliser différents chiffrements dans la fonction encrypt () et peut-être même le mettre à jour pour imiter une machine Enigma?




Source link