Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

listing char codes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
View File

@ -2,39 +2,59 @@
<h2 class="title"> <h2 class="title">
Essais de chiffrement pour un framadate zéro knoledge Essais de chiffrement pour un framadate zéro knoledge
</h2> </h2>
<div class="columns">
<div class="column">
<section class="boxed-shadow"> <section class="boxed-shadow">
<h3 class="title">Chiffrement simple</h3> <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)" /> <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 /> <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"> <strong class="cipher-result">
<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text> <app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
<span>
{{ simpleCipheredText }} {{ simpleCipheredText }}
</span>
</strong> </strong>
<br /> <br />
<h3 class="title">Avec un peu de sel?</h3> <h3 class="title">Avec un peu de sel?</h3>
<input type="text" [(ngModel)]="salt" /> <input type="text" [(ngModel)]="salt" />
({{ salt.length }} caractères) ({{ salt.length }} caractères)
<br /> <br />
simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion comme
comme ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères convertis en
convertis en {{ plainText.length + salt.length }} nombres séparés par des tirets. {{ plainText.length + salt.length }} nombres séparés par des tirets.
<strong class="cipher-result"> <strong class="cipher-result">
<app-copy-text <app-copy-text [textToCopy]="simpleCipheredTextWithSalt" [displayLabelButton]="false"></app-copy-text>
[textToCopy]="simpleCipheredTextWithSalt"
[displayLabelButton]="false"
></app-copy-text>
{{ simpleCipheredTextWithSalt }} {{ simpleCipheredTextWithSalt }}
</strong> </strong>
<h3 class="title">On hashe le sel</h3> <h3 class="title">On hashe le sel</h3>
<div class="columns"> <div class="columns">
<div class="column is-half"> <div class="column is-half">
Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique, Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique, telle que
telle que MD5 (Message Digest 5). MD5 (Message Digest 5).
<img <img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png"
alt="fonctionnement de MD5" alt="fonctionnement de MD5"
@ -59,32 +79,25 @@
</div> </div>
<h3 class="title">Légèrement épicé</h3> <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 simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la valeur
valeur du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin du sel on
du sel on reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
{{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres. {{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres.
<strong class="cipher-result"> <strong class="cipher-result">
<app-copy-text <app-copy-text [textToCopy]="simpleCipheredTextWithSpreadSalt" [displayLabelButton]="false"></app-copy-text>
[textToCopy]="simpleCipheredTextWithSpreadSalt"
[displayLabelButton]="false"
></app-copy-text>
{{ simpleCipheredTextWithSpreadSalt }} {{ simpleCipheredTextWithSpreadSalt }}
</strong> </strong>
<br /> <br />
<h3 class="title">On en remet une couche</h3> <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 Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On a donc
a donc autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à déchiffrer. Le nouveau
déchiffrer. Le nouveau texte fait {{ layerOnSpread.length }} caractères. texte fait {{ layerOnSpread.length }} caractères.
<strong class="cipher-result"> <strong class="cipher-result">
<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text> <app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
{{ layerOnSpread }} {{ layerOnSpread }}
</strong> </strong>
</section> </section>
</div>
<div class="column"></div>
</div>
<section class="boxed-shadow"> <section class="boxed-shadow">
<h3 class="title">Déchiffrement simple</h3> <h3 class="title">Déchiffrement simple</h3>
@ -98,15 +111,18 @@
<strong class="cipher-result"> <strong class="cipher-result">
{{ simpleDeCipheredText }} {{ simpleDeCipheredText }}
</strong> </strong>
simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères du sel <br />
<strong class="cipher-result"> simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères, ceux correspondant au
{{ simpleDeCipheredTextWithSalt }} sel.
</strong> <!-- <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. 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. 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"> <!-- <strong class="cipher-result">-->
{{ simpleDeCipheredTextWithSpreadSalt }} <!-- {{ simpleDeCipheredTextWithSpreadSalt }}-->
</strong> <!-- </strong>-->
</section> </section>
<section class="is-boxed"> <section class="is-boxed">

5
src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
View File

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