funky-framadate-front/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html

<div class="ciphering padded">
	<h2 class="title">
		Essais de chiffrement pour un framadate zéro knoledge
	</h2>
	<section class="boxed-shadow">
		<h3 class="title">1) 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)" />
		<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 />
		On peut donc convertir notre texte en cette suite de nombres:
		<strong class="cipher-result">
			<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
			<span>
				{{ simpleCipheredText }}
			</span>
		</strong>
		<br />
		<h3 class="title">2) 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">3) 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">4) 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">5) 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>

		Collez ici le texte chiffré à convertir en truc lisible par l'opération
		<strike>du saint esprit</strike> réalisée dans l'autre sens.
		<br />
		<input type="text" [(ngModel)]="cipheredText" />
		<br />
		Simple texte déchiffré. Il suffit de séparer les numéros en caractère et trouver à quel caractère correspond une
		autre pour trouver n'importe quel caractère ayant le même chiffre.
		<strong class="cipher-result">
			{{ simpleDeCipheredText }}
		</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>-->
	</section>
	<section class="boxed-shadow entropy">
		<h2>Calcul d'entropie de Shannon</h2>
		Un nombre élevé est signe de difficulté à deviner par calcul.
		<table>
			<thead>
				<tr>
					<td>score d'entropie</td>
					<td>texte à évaluer</td>
				</tr>
			</thead>
			<tbody></tbody>
			<tr>
				<td>{{ getEntropy(plainText).toFixed(3) }}</td>
				<td>{{ plainText }}</td>
			</tr>
			<tr>
				<td>{{ getEntropy(simpleCipheredText).toFixed(3) }}</td>
				<td>
					<p class="limited-text">{{ simpleCipheredText }}</p>
				</td>
			</tr>
			<tr>
				<td>{{ getEntropy(simpleCipheredTextWithSalt).toFixed(3) }}</td>
				<td>
					<p class="limited-text">{{ simpleCipheredTextWithSalt }}</p>
				</td>
			</tr>
			<tr>
				<td>{{ getEntropy(simpleCipheredTextWithHashedSalt).toFixed(3) }}</td>
				<td>
					<p class="limited-text">{{ simpleCipheredTextWithHashedSalt }}</p>
				</td>
			</tr>
			<tr>
				<td>{{ getEntropy(convertIntToText(simpleCipheredTextWithHashedSalt)).toFixed(3) }}</td>
				<td>
					<p class="limited-text">{{ convertIntToText(simpleCipheredTextWithHashedSalt) }}</p>
				</td>
			</tr>
			<tr>
				<td>{{ getEntropy(simpleCipheredTextWithHashedSpreadSalt).toFixed(3) }}</td>
				<td>
					<p class="limited-text">{{ simpleCipheredTextWithHashedSpreadSalt }}</p>
				</td>
			</tr>
			<tr>
				<td>{{ getEntropy(layerOnSpread).toFixed(3) }}</td>
				<td>
					<p class="limited-text">{{ layerOnSpread }}</p>
				</td>
			</tr>
		</table>
	</section>

	<section class="is-boxed">
		<h3>Chiffrement AES</h3>

		<app-wip-todo></app-wip-todo>
		<!--		<input type="text" [(ngModel)]="cipheredText" />-->
		<!--		texte avancé à déchiffrer-->
		<!--		<br />-->
		<!--		<input type="text" [(ngModel)]="salt" />-->
		<!--		salt-->
		<!--		<input type="text" [(ngModel)]="initial_vector" />-->
		<!--		initial_vector-->
		<!--		<br />-->
		<!--		<input type="text" [(ngModel)]="key" />-->
		<!--		key-->
	</section>
</div>