mixed salt for ciphering

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

@@ -1,13 +1,13 @@
 <div class="ciphering padded">
-	<h2>
+	<h2 class="title">
 		Essais de chiffrement pour un framadate zéro knoledge
 	</h2>
 	<div class="columns">
 		<div class="column">
 			<section class="boxed-shadow">
-				<h3>Chiffrement simple</h3>
+				<h3 class="title">Chiffrement simple</h3>
 				<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
-				texte clair à convertir en truc indéchiffrable (à priori)
+				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.
@@ -16,12 +16,13 @@
 					{{ simpleCipheredText }}
 				</strong>
 				<br />
-				<h3>Avec un peu de sel?</h3>
+				<h3 class="title">Avec un peu de sel?</h3>
 				<input type="text" [(ngModel)]="salt" />
-				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.
+				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"
@@ -29,26 +30,54 @@
 					></app-copy-text>
 					{{ simpleCipheredTextWithSalt }}
 				</strong>
+				<h3 class="title">Légèrement épicé</h3>
+				simple cipher 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.
+				<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.
+				<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>Déchiffrement simple</h3>
+		<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
+		<strike>du saint esprit</strike> réalisée dans l'autre sens.
+		<br />
 		<input type="text" [(ngModel)]="cipheredText" />
 		<br />
-		simple texte déchiffré
+		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
+		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">

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

@@ -1,6 +1,7 @@
 .boxed-shadow {
 	padding: 1em;
 	margin-bottom: 1em;
+	width: 85%;
 }
 
 .cipher-result {
@@ -12,7 +13,14 @@
 	display: block;
 	min-width: 10ch;
 	min-height: 2em;
-	max-width: 100%;
+	max-width: 50%;
-	overflow: hidden;
+	overflow-x: scroll;
 	line-height: 2em;
+	app-copy-text {
+		float: left;
+	}
+}
+
+.title {
+	margin-top: 1em;
 }

src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts

@@ -1,22 +1,22 @@
 import { Component, OnInit } from '@angular/core';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 
-import * as Crypto from 'crypto';
 // documentation:
 // https://medium.com/@spatocode/symmetric-encryption-in-javascript-bcb5fd14c273
 // https://nodejs.org/api/crypto.html
+// https://preview.npmjs.com/package/ecma-nacl
 @Component({
 	selector: 'app-ciphering',
 	templateUrl: './ciphering.component.html',
 	styleUrls: ['./ciphering.component.scss'],
 })
 export class CipheringComponent implements OnInit {
-	// public plainText = 'le texte à chiffrer, coucou !';
+	public plainText = 'le texte à chiffrer, coucou !';
-	public plainText = 'salut les pipole';
+	// public plainText = '1234';
 	public cipheredText =
 		'121-127-42-110-127-42-122-121-115-128-124-111-125-107-118-127-126-42-118-111-125-42-122-115-122-121-118-111';
 	algorithm = 'aes-192-cbc';
-	public salt = 'ou du poivre';
+	public salt = 'ou du poivre heh';
 	public initial_vector = '';
 	public key;
 	public otherCipheredText = 'le texte à chiffrer, coucou !';
@@ -31,16 +31,29 @@ export class CipheringComponent implements OnInit {
 	get simpleCipheredText() {
 		return this.convertTextToInt(this.plainText);
 	}
+
 	get simpleCipheredTextWithSalt() {
 		return this.convertTextToInt(this.salt + this.plainText);
 	}
+	get simpleCipheredTextWithSpreadSalt() {
+		return this.convertTextToIntMixedSalt(this.salt + this.plainText);
+	}
+	get layerOnSpread() {
+		return this.convertIntToText(this.simpleCipheredTextWithSpreadSalt, false);
+	}
+
 	//  ---------------------- make readable ----------------------
 	get simpleDeCipheredText() {
 		return this.convertIntToText(this.cipheredText);
 	}
+
 	get simpleDeCipheredTextWithSalt() {
 		return this.convertIntToText(this.salt + this.cipheredText);
 	}
+	get simpleDeCipheredTextWithSpreadSalt() {
+		return this.convertIntToTextMixedSalt(this.salt + this.cipheredText);
+	}
+
 	//  ---------------------- conversions ----------------------
 	encrypt(someText) {
 		// this.key = Crypto.scryptSync(someText, 'salt', 24);
@@ -86,13 +99,62 @@ export class CipheringComponent implements OnInit {
 		}
 		return result;
 	}
-	convertIntToText(value) {
+
+	convertIntToText(value, removeBeginning = true) {
 		let result = '';
 		const array = value.split('-');
 
 		for (let i = 0; i < array.length; i++) {
 			result += String.fromCharCode(array[i] - 10);
 		}
+		console.info('value, result', value, result);
+		// remove salt characters
+		if (removeBeginning) {
+			result = result.slice(this.salt.length, -1);
+		}
+		return result;
+	}
+
+	convertTextToIntMixedSalt(value) {
+		let result = '';
+		let saltIndex = 0;
+		for (let i = 0; i < value.length; i++) {
+			if (i < value.length - 1) {
+				result += value.charCodeAt(i) + 10 + this.salt.charCodeAt(saltIndex);
+				result += '-';
+			} else {
+				result += value.charCodeAt(i) + 10 + this.salt.charCodeAt(saltIndex);
+			}
+			saltIndex++;
+			if (saltIndex >= this.salt.length) {
+				saltIndex = 0;
+			}
+		}
+		return result;
+	}
+
+	convertIntToTextMixedSalt(value) {
+		let result = '';
+		const array = value.split('-');
+		let saltIndex = -1;
+
+		for (let i = 0; i < array.length; i++) {
+			// console.log(
+			// 	'encodage',
+			// 	i,
+			// 	value.charCodeAt(i),
+			// 	saltIndex,
+			// 	this.salt.charCodeAt(saltIndex),
+			// 	value.charCodeAt(i) + 10 + this.salt.charCodeAt(saltIndex)
+			// );
+
+			result += String.fromCharCode(array[i] - 10 - this.salt.charCodeAt(saltIndex));
+			if (saltIndex > this.salt.length) {
+				saltIndex = 0;
+			} else {
+				saltIndex++;
+			}
+		}
 		// remove salt characters
 		return result.slice(this.salt.length);
 	}