listing char codes

This commit is contained in:
Tykayn 2021-02-10 11:45:05 +01:00 committed by tykayn
parent d72e7763da
commit e5411ab425
2 changed files with 106 additions and 91 deletions

View File

@ -2,39 +2,59 @@
<h2 class="title">
Essais de chiffrement pour un framadate zéro knoledge
</h2>
<div class="columns">
<div class="column">
<section class="boxed-shadow">
<h3 class="title">Chiffrement simple</h3>
<div class="notification is-info">
Les ordinateurs font des opérations très rapidement sur des nombres, pour coder et décoder des textes, il
suffit donc de les convertir en nombre et faire des opérations plus ou moins complexes avec.
</div>
Voici un texte que l'on voudrait chiffrer: <br />
<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
texte clair de {{ plainText.length }} caractères à convertir en truc indéchiffrable (à priori)
<br />
Vous pouvez le changer, la page se met à jour automatiquement. Le texte clair fait
{{ plainText.length }} caractères.
<br />
simple ciphered. On assigne un numéro à chaque caractère, séparé par un tiret en sortie.
Texte chiffré très simplement: on assigne un numéro à chaque caractère, séparé par un tiret en sortie.
Javascript permet de faire ceci avec <code>monTexte.charCodeAt(1)</code> pour obtenir le code du caractère 1 de
notre texte à chiffrer. Exemple:
<ul>
<li>
Le premier caractère <code>{{ plainText[1] }}</code> de notre texte <code>{{ plainText }}</code> a pour
numéro de caractère <i class="fa fa-arrow-right"></i> <code>{{ plainText.charCodeAt(1) }}</code
>. <br />
Voici ce que ça donne pour tout notre texte:
</li>
<li *ngFor="let char of plainText.split(''); index as i">
Le caractère n° <code>{{ i }}</code> de notre texte est <code>{{ char }}</code> a pour numéro de
caractère <i class="fa fa-arrow-right"></i> <code>{{ plainText.charCodeAt(i) }}</code
>.
</li>
</ul>
<br />
<strong class="cipher-result">
<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
<span>
{{ simpleCipheredText }}
</span>
</strong>
<br />
<h3 class="title">Avec un peu de sel?</h3>
<input type="text" [(ngModel)]="salt" />
({{ salt.length }} caractères)
<br />
simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion
comme ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères
convertis en {{ plainText.length + salt.length }} nombres séparés par des tirets.
simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion comme
ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères convertis en
{{ plainText.length + salt.length }} nombres séparés par des tirets.
<strong class="cipher-result">
<app-copy-text
[textToCopy]="simpleCipheredTextWithSalt"
[displayLabelButton]="false"
></app-copy-text>
<app-copy-text [textToCopy]="simpleCipheredTextWithSalt" [displayLabelButton]="false"></app-copy-text>
{{ simpleCipheredTextWithSalt }}
</strong>
<h3 class="title">On hashe le sel</h3>
<div class="columns">
<div class="column is-half">
Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique,
telle que MD5 (Message Digest 5).
Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique, telle que
MD5 (Message Digest 5).
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png"
alt="fonctionnement de MD5"
@ -59,32 +79,25 @@
</div>
<h3 class="title">Légèrement épicé</h3>
simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la
valeur du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin
du sel on reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la valeur
du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin du sel on
reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
{{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres.
<strong class="cipher-result">
<app-copy-text
[textToCopy]="simpleCipheredTextWithSpreadSalt"
[displayLabelButton]="false"
></app-copy-text>
<app-copy-text [textToCopy]="simpleCipheredTextWithSpreadSalt" [displayLabelButton]="false"></app-copy-text>
{{ simpleCipheredTextWithSpreadSalt }}
</strong>
<br />
<h3 class="title">On en remet une couche</h3>
Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On
a donc autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à
déchiffrer. Le nouveau texte fait {{ layerOnSpread.length }} caractères.
Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On a donc
autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à déchiffrer. Le nouveau
texte fait {{ layerOnSpread.length }} caractères.
<strong class="cipher-result">
<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
{{ layerOnSpread }}
</strong>
</section>
</div>
<div class="column"></div>
</div>
<section class="boxed-shadow">
<h3 class="title">Déchiffrement simple</h3>
@ -98,15 +111,18 @@
<strong class="cipher-result">
{{ simpleDeCipheredText }}
</strong>
simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères du sel
<strong class="cipher-result">
{{ simpleDeCipheredTextWithSalt }}
</strong>
<br />
simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères, ceux correspondant au
sel.
<!-- <strong class="cipher-result">-->
<!-- {{ simpleDeCipheredTextWithSalt }}-->
<!-- </strong>-->
<br />
Simple texte déchiffré avec sel saupoudré, en enlevant à chaque caractère la valeur du caractère courant du sel.
Sans connaître le sel il est déjà plus difficile de deviner la phrase, mais des régularités apparaissent encore.
<strong class="cipher-result">
{{ simpleDeCipheredTextWithSpreadSalt }}
</strong>
<!-- <strong class="cipher-result">-->
<!-- {{ simpleDeCipheredTextWithSpreadSalt }}-->
<!-- </strong>-->
</section>
<section class="is-boxed">

View File

@ -11,14 +11,13 @@
color: #7d6c99;
padding: 0.5em;
margin-left: 1em;
display: block;
min-width: 10ch;
min-height: 2em;
max-width: 25%;
max-width: 80%;
overflow-x: scroll;
line-height: 2em;
display: flex;
app-copy-text {
//float: left;
margin-right: 1em;
}
}