refactor: fix major typos and protect meteorites-map against XSS.

Author: Nde-Code

404.html

@@ -18,9 +18,11 @@
 
 	<meta name="author" content="Nathan Debilloëz">
 
-	<script>
+	<script>	
+  
+  		const currentPath = window.location.pathname.replace(/\/$/, "");
 
-		if (window.location.href != window.location.protocol + "//" + window.location.host + "/404") window.location.href = window.location.protocol + "//" + window.location.host + "/404";
+  		if (currentPath !== "/404") window.location.replace("/404");
 
 	</script>
 
@@ -210,7 +212,7 @@ <h1 class="website-main-panel-title">Oups, erreur 404:</h1>
 
 					<p class="copyright-text"> Le code source est disponible sur <a href="https://github.com/Nde-Code/nde-code.github.io/blob/main/404.html" target="_blank" rel="noopener noreferrer" class="copyright-link">Github</a>.</p>
 
-					<p class="copyright-text"> L'icône d'erreur est fait par Freepik sur <a href="https://www.flaticon.com/free-icon/error_4457164?term=error&page=1&position=12&origin=search&related_id=4457164#" target="_blank" rel="noopener noreferrer" class="copyright-link">Flaticon</a>.</p>
+					<p class="copyright-text"> L'icône d'erreur est faite par Freepik sur <a href="https://www.flaticon.com/free-icon/error_4457164?term=error&page=1&position=12&origin=search&related_id=4457164#" target="_blank" rel="noopener noreferrer" class="copyright-link">Flaticon</a>.</p>
 
 				</div>
 

index.html

@@ -258,7 +258,7 @@ <h1 class="website-main-panel-title">Bienvenue sur mon site:</h1>
 
 					<p class="modalbox-description">
 
-						Sans m'y limiter, j'explore aussi d'autres languages comme Python pour scripts, automatisations, IA, ... et C++ pour des projets plus complexes, notamment ceux liés aux systèmes..
+						Sans m'y limiter, j'explore aussi d'autres langages comme Python pour scripts, automatisations, IA, ... et C++ pour des projets plus complexes, notamment ceux liés aux systèmes.
 
 						Je m'intéresse aussi à Linux: c'est un noyau open-source que j'exploite pour divers usages comme mon NAS, ou pour la remise en service d'anciens ordinateurs.
 

online/foucault.html

@@ -256,13 +256,13 @@ <h2>La latitude:</h2>
 
 				<div class="modalbox-text-container">
 
-                    <h2>Longeur du fil:</h2>
+                    <h2>Longueur du fil:</h2>
 
-					<p class="modalbox-description bold-large">Longeur du fil: <span class="color-light-blue" id="length-id">60m</span> </p>
+					<p class="modalbox-description bold-large">Longueur du fil: <span class="color-light-blue" id="length-id">60m</span> </p>
 
                     <p class="modalbox-description"> Sélectionnez la longueur du fil, en mètres, qui supporte la masse servant de pendule: </p>
 
-					<input title="Longeur du fil:" type="range" id="length-value-id" class="modalbox-range" value="60" min="10" max="100" step="1">
+					<input title="Longueur du fil:" type="range" id="length-value-id" class="modalbox-range" value="60" min="10" max="100" step="1">
 
 				</div>
 
@@ -288,7 +288,7 @@ <h2>Nombre de périodes d'oscillations:</h2>
 
                     <h2>Angle du lancer initial:</h2>
 
-					<p class="modalbox-description bold-large">Position initial en x (x(0)): <span class="color-light-blue" id="initial-position-id">3.140m</span> </p>
+					<p class="modalbox-description bold-large">Position initiale en x (x(0)): <span class="color-light-blue" id="initial-position-id">3.140m</span> </p>
 
 					<p class="modalbox-description bold-large">Angle initial: <span class="color-light-blue" id="initial-angle-id">3°</span> </p>
 
@@ -306,7 +306,7 @@ <h2>Type de graphique:</h2>
 
                     <p class="modalbox-description"> Sélectionnez le type de graphique pour afficher les solutions du système: </p>
 
-					<select title="Intérvalle d'affichage:" id="graph-type-id">
+					<select title="Intervalle d'affichage:" id="graph-type-id">
 
 						<option value="x(t)">Évolution de x(t)</option>
 

online/harmonic-waves.html

@@ -284,7 +284,7 @@ <h2>Phase initiale de la première onde:</h2>
 
 				<div class="modalbox-text-container">
 
-                    <h2>Sens de propagation de propagation de la première onde:</h2>
+                    <h2>Sens de propagation de la première onde:</h2>
 
                     <p class="modalbox-description"> Veuillez sélectionner le sens de propagation de la première onde à simuler: </p>
 
@@ -358,7 +358,7 @@ <h2>Phase initiale de la deuxième onde:</h2>
 
 				<div class="modalbox-text-container">
 
-                    <h2>Sens propagation de propagation de la deuxième onde:</h2>
+                    <h2>Sens propagation de la deuxième onde:</h2>
 
                     <p class="modalbox-description"> Veuillez sélectionner le sens de propagation de la deuxième onde à simuler: </p>
 
@@ -392,7 +392,7 @@ <h2>Code couleurs:</h2>
 
 					<h2>Notes:</h2>
 
-					<p class="modalbox-description"><i class="fa-solid fa-square point"></i> Le simulateur a été entièrement repensée depuis la première version du logiciel. Le code a été optimisé au maximum afin d'offrir les meilleures performances possibles, tout en restant léger et efficace pour tous les utilisateurs. Une option exploitant le GPU est actuellement à l'étude, mais reste pour le moment facultative. </p>
+					<p class="modalbox-description"><i class="fa-solid fa-square point"></i> Le simulateur a été entièrement depuis la première version du logiciel. Le code a été optimisé au maximum afin d'offrir les meilleures performances possibles, tout en restant léger et efficace pour tous les utilisateurs. Une option exploitant le GPU est actuellement à l'étude, mais reste pour le moment facultative. </p>
 
 					<p class="modalbox-description"><i class="fa-solid fa-square point"></i> Le temps ne s'écoule bien entendu pas chaque seconde, ce qui serait beaucoup trop gourmand en ressources et rendrait l'animation peu visible. Un facteur a donc été programmé afin de rendre l'animation aussi optimale que possible. </p>
 

online/interpolation-playground.html

@@ -203,7 +203,7 @@ <h1 class="website-main-panel-title">Logiciel de calcul d'interpolation:</h1>
 
 				<p class="website-main-panel-description"><i class="fa-regular fa-circle-xmark red"></i> Qui limite en grandeur et en nombre les points saisis. </p>
 
-				<p class="website-main-panel-description"><i class="fa-regular fa-circle-dot orange"></i> Qui des algorithmes numériques en O(n<sup>3</sup>) et O(n<sup>2</sup>). </p>
+				<p class="website-main-panel-description"><i class="fa-regular fa-circle-dot orange"></i> Qui utilise des algorithmes numériques en O(n<sup>3</sup>) et O(n<sup>2</sup>). </p>
 
 			</div>
 
@@ -295,7 +295,7 @@ <h2>Tracer le polynôme de Lagrange:</h2>
 
                     <p class="modalbox-description"> Voulez-vous tracer le polynôme de Lagrange, c'est-à-dire la courbe passant par tous les points saisis ?: </p>
 
-					<select title="Polynôme de langrage:" id="langrage-plot-id">
+					<select title="Polynôme de langrage:" id="lagrange-plot-id">
 
 						<option value="true" selected>Oui</option>
 
@@ -483,7 +483,7 @@ <h2>Notes:</h2>
 
 			for (let elem of arr) {
 
-				if (typeof elem !== 'number' || isNaN(elem) || elem >= extendedData.X_LIMIT[1] || elem <= extendedData.X_LIMIT[0]) return false;
+				if (typeof elem !== 'number' || isNaN(elem) || elem > extendedData.X_LIMIT[1] || elem < extendedData.X_LIMIT[0]) return false;
 
 			}
 
@@ -1214,7 +1214,7 @@ <h2>Notes:</h2>
 				plotCurves(
 					$('#x-data').val(), 
 					$('#y-data').val(), 
-					$('#langrage-plot-id').val(), 
+					$('#lagrange-plot-id').val(), 
 					$('#spline-plot-id').val(), 
 					$('#regression-plot-id').val(), 
 					$('#deg-data').val()

online/meteorites-map.html

@@ -405,6 +405,17 @@
 
         };
 
+        function escapeHTML(value) {
+
+            return String(value ?? "")
+                .replace(/&/g, "&")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+
+        }
+
         function getRandomInt(min, max) { return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min); }
 
         async function fetchData(apiUrl, params = {}) {
@@ -555,7 +566,7 @@
 
                         <i class="fa-solid fa-square point"></i>
 
-                        ${item.label}: <span class="color-light-blue alone-bold">${item.value}</span>
+                        ${escapeHTML(item.label)}: <span class="color-light-blue alone-bold">${escapeHTML(item.value)}</span>
 
                     </p>
 
@@ -589,7 +600,7 @@ <h2>Top ${extendedData.ranking} des classes de météorites:</h2>
 
                             <i class="fa-solid fa-square point"></i>
                            
-                            Classe ${recclass}: <span class="color-light-blue alone-bold">${count} (${((count / statsJSON.totalCount) * 100).toFixed(2)} %)</span>
+                            Classe ${escapeHTML(recclass)}: <span class="color-light-blue alone-bold">${count} (${((count / statsJSON.totalCount) * 100).toFixed(2)} %)</span>
                        
                         </p>
 
@@ -612,24 +623,26 @@ <h2>Top ${extendedData.ranking} des classes de météorites:</h2>
             let latitude = isNaN(Number(data.latitude)) ? null : Number(data.latitude);
 
             let longitude = isNaN(Number(data.longitude)) ? null : Number(data.longitude);
+
+            let safeId = encodeURIComponent(data.id);
 
             let popUpContent = `
     
-                <b>Identifiant: </b> <span> ${data.id} </span> <br> 
+                <b>Identifiant: </b> <span> ${safeId} </span> <br> 
     
-                <b>Nom: </b> <span> ${data.name} </span> <br>
+                <b>Nom: </b> <span> ${escapeHTML(data.name)} </span> <br>
     
-                <b>Classe: </b> <span> ${(data.recclass === '' || data.recclass === 'N/A' || data.recclass === "Unknown") ? 'Non renseignée' : data.recclass} </span> <br>
+                <b>Classe: </b> <span> ${(data.recclass === '' || data.recclass === 'N/A' || data.recclass === "Unknown") ? 'Non renseignée' : escapeHTML(data.recclass)} </span> <br>
     
-                <b>Masse: </b> <span> ${(data.mass === '' || data.mass === 'N/A' || data.mass === "Unknown") ? 'Non renseignée' : (data.mass / 1000).toFixed(4) + " kg"} </span> <br>
+                <b>Masse: </b> <span> ${(data.mass === '' || data.mass === 'N/A' || data.mass === "Unknown") ? 'Non renseignée' : (Number(data.mass) / 1000).toFixed(4) + " kg"} </span> <br>
     
                 <b>Status: </b> <span> ${(data.fall === 'Fell' || data.fall === 'N/A' || data.fall === "Unknown") ? 'Tombée' : 'Trouvée'} </span> <br>
     
-                <b>Année: </b> <span> ${(data.year === '' || data.year === 'N/A' || data.year === "Unknown") ? 'Non renseignée' : data.year} </span> <br>
+                <b>Année: </b> <span> ${(data.year === '' || data.year === 'N/A' || data.year === "Unknown") ? 'Non renseignée' : escapeHTML(data.year)} </span> <br>
     
                 <b>Coordonnées: </b> <span> (${(latitude === null) ? "Non renseignée": latitude}°, ${(longitude === null) ? "Non renseignée" : longitude}°) </span> <br>
 
-                <b>Lien permanent: </b> <span> ${'<a href="https://meteorites.nde-code.workers.dev/get?id=' + data.id + '" target="_blank" rel="noopener noreferrer">[Consulter]</a>'} </span> <br>
+                <b>Lien permanent: </b> <span> <a href="https://meteorites.nde-code.workers.dev/get?id=${safeId}" target="_blank" rel="noopener noreferrer">[Consulter]</a> </span>
                     
             `;
 
@@ -644,6 +657,8 @@ <h2>Top ${extendedData.ranking} des classes de météorites:</h2>
                 popupAnchor: [0, -5]
 
             });
+
+            if (latitude === null || longitude === null) return null;
 
             return L.marker([latitude, longitude],  { icon: customIcon }).bindPopup(popUpContent);
 
@@ -697,7 +712,7 @@ <h2>Top ${extendedData.ranking} des classes de météorites:</h2>
 
                         let marker = processMeteorites(meteorite);
 
-                        extendedData.marker_group.addLayer(marker);
+                        if (marker) extendedData.marker_group.addLayer(marker);
 
                     });
 

online/radioactive-decay.html

@@ -397,7 +397,7 @@ <h2>Notes:</h2>
 
 			full_chain_html: '',
 
-			is_in_loading: false,
+			is_data_in_loading: false,
 
 			is_run: false
 
@@ -685,7 +685,7 @@ <h2>Notes:</h2>
 
 				createParagraph(`
 
-					<span class="color-green alone-bold">(${step.A}, ${step.Z})${step.element}</span> à pour masse atomique: 
+					<span class="color-green alone-bold">(${step.A}, ${step.Z})${step.element}</span> a pour masse atomique: 
 					
 					<span class="color-orange alone-bold"> ≈ ${getAtomicMassWithRadioisotopeNumber(step.element, step.A)} uma</span>.
 				
@@ -755,7 +755,7 @@ <h2>Notes:</h2>
 
 						updateRadioisotopes();
 
-						extendedData.is_in_loading = true;
+						extendedData.is_data_in_loading = true;
 
 						setCorrectButtonOnMobile();
 
@@ -979,13 +979,13 @@ <h2>Notes:</h2>
 
 		}
 
-		function setCorrectButtonOnMobile() { if ($(window).width() <= 1024 && extendedData.is_in_loading === true) $("#radioactive-decay-btn-id").html('<i class="fa-solid fa-atom"></i>'); }
+		function setCorrectButtonOnMobile() { if ($(window).width() <= 1024 && extendedData.is_data_in_loading === true) $("#radioactive-decay-btn-id").html('<i class="fa-solid fa-atom"></i>'); }
 
 		$(document).ready(function() {
 
 			$('#radioactive-decay-btn-id').on('click', function() {
 
-				if (extendedData.is_in_loading) $('#modalbox-decay, .overlay').show();
+				if (extendedData.is_data_in_loading) $('#modalbox-decay, .overlay').show();
 
 			});