forked from tykayn/funky-framadate-front
listing char codes
This commit is contained in:
tykayn
parent
d72e7763da
commit
e5411ab425
@ -2,89 +2,102 @@
|
||||
<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>
|
||||
<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
|
||||
texte clair de {{ plainText.length }} caractères à convertir en truc indéchiffrable (à priori)
|
||||
|
||||
<br />
|
||||
simple ciphered. On assigne un numéro à chaque caractère, séparé par un tiret en sortie.
|
||||
<strong class="cipher-result">
|
||||
<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
|
||||
{{ simpleCipheredText }}
|
||||
</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.
|
||||
<strong class="cipher-result">
|
||||
<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).
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png"
|
||||
alt="fonctionnement de MD5"
|
||||
/>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
Voici ce que le hashage du sel donne:
|
||||
<code>
|
||||
{{ md5(salt) }}
|
||||
</code>
|
||||
({{ md5(salt).length }}caractères)
|
||||
<br />
|
||||
Le nouveau texte chiffré avec le sel hashé est donc:
|
||||
<strong class="cipher-result">
|
||||
<app-copy-text
|
||||
[textToCopy]="simpleCipheredTextWithHashedSalt"
|
||||
[displayLabelButton]="false"
|
||||
></app-copy-text>
|
||||
{{ simpleCipheredTextWithHashedSalt }}
|
||||
</strong>
|
||||
</div>
|
||||
</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
|
||||
{{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres.
|
||||
<strong class="cipher-result">
|
||||
<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.
|
||||
<strong class="cipher-result">
|
||||
<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
|
||||
{{ layerOnSpread }}
|
||||
</strong>
|
||||
</section>
|
||||
<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>
|
||||
<div class="column"></div>
|
||||
</div>
|
||||
Voici un texte que l'on voudrait chiffrer: <br />
|
||||
<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
|
||||
<br />
|
||||
Vous pouvez le changer, la page se met à jour automatiquement. Le texte clair fait
|
||||
{{ plainText.length }} caractères.
|
||||
|
||||
<br />
|
||||
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.
|
||||
<strong class="cipher-result">
|
||||
<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).
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png"
|
||||
alt="fonctionnement de MD5"
|
||||
/>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
Voici ce que le hashage du sel donne:
|
||||
<code>
|
||||
{{ md5(salt) }}
|
||||
</code>
|
||||
({{ md5(salt).length }}caractères)
|
||||
<br />
|
||||
Le nouveau texte chiffré avec le sel hashé est donc:
|
||||
<strong class="cipher-result">
|
||||
<app-copy-text
|
||||
[textToCopy]="simpleCipheredTextWithHashedSalt"
|
||||
[displayLabelButton]="false"
|
||||
></app-copy-text>
|
||||
{{ simpleCipheredTextWithHashedSalt }}
|
||||
</strong>
|
||||
</div>
|
||||
</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
|
||||
{{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres.
|
||||
<strong class="cipher-result">
|
||||
<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.
|
||||
<strong class="cipher-result">
|
||||
<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
|
||||
{{ layerOnSpread }}
|
||||
</strong>
|
||||
</section>
|
||||
<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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user