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>
	<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>
		</div>
		<div class="column"></div>
	</div>

	<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>
		simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères du sel
		<strong class="cipher-result">
			{{ simpleDeCipheredTextWithSalt }}
		</strong>
		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="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>