Merge pull request #81 from InseeFr/sanitization

Sanitization
InseeFr · Aug 9, 2024 · 76480b1 · 76480b1
2 parents f3767b8 + 98b61f0
commit 76480b1
Show file tree

Hide file tree

Showing 31 changed files with 5,238 additions and 3,115 deletions.
diff --git a/pages/common/client-naf.html b/pages/common/client-naf.html
@@ -1,38 +1,106 @@
 <!doctype html>
-<html>
-    <head>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-        <script>
-            $(document).ready(function () {
-                $("#chercher").bind("click", function () {
-                    $("#resultat").html("<p>Code non trouv�</p>");
-                    var code = document.getElementById("code").value.trim().toUpperCase();
-                    if (code.length == 0) $("#resultat").html("<p><b>Veuillez entrer un code</b></p>");
-                    else {
-                        var query =
-                            "prefix skos: <http://www.w3.org/2004/02/skos/core#> select ?libelle from <http://rdf.insee.fr/graphes/codes/nafr2> ";
-                        query +=
-                            'where {?s skos:notation "' +
-                            code +
-                            "\" . ?s skos:prefLabel ?libelle filter(lang(?libelle) = 'fr')}";
-                        var url = "https://rdf.insee.fr/sparql?query=" + encodeURIComponent(query);
-                        $.getJSON(url).success(function (data) {
-                            $("#resultat").html(
-                                "<p>" + code + " - " + data.results.bindings[0].libelle.value + "</p>"
-                            );
-                        });
+<html lang="fr">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Recherche dans la NAF">
+    <title>Recherche dans la NAF</title>
+    <link href="../commun.css" rel="stylesheet" type="text/css"/>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.6/purify.min.js" integrity="sha384-+VfUPEb0PdtChMwmBcBmykRMDd+v6D/oFmB3rZM/puCMDYcIvF968OimRh4KQY9a" crossorigin="anonymous"></script>
+</head>
+<body>
+    <h1>Recherche dans la NAF</h1>
+    <div>
+        <label for="code">Code : </label>
+        <input id="code" type="text" autofocus="autofocus" />
+        <button id="chercher" required>Chercher</button><br />
+    </div>
+    <div id="resultat"></div>
+
+    <!-- Template for displaying the result -->
+    <script id="result-template" type="text/x-handlebars-template">
+        <p>{{{sanitize code}}} - {{{sanitize libelle}}}</p>
+    </script>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const searchButton = document.getElementById("chercher");
+
+            searchButton.addEventListener("click", async function () {
+                const resultElement = document.getElementById("resultat");
+                resultElement.innerHTML = "<p>Code non trouvé</p>";
+
+                // Step 1: Get the input code and check if it contains the dot
+                let code = document.getElementById("code").value.trim().toUpperCase();
+                // console.log("Code entered by user:", code);  // Log the initial code
+
+                if (code.length === 0) {
+                    resultElement.innerHTML = "<p><b>Veuillez entrer un code</b></p>";
+                    return;
+                }
+
+                // Step 2: Sanitize input and check if the dot is still present
+                const sanitizedCode = sanitizeInput(code);
+                // console.log("Sanitized code:", sanitizedCode);  // Log the sanitized code
+
+                const query = `
+                    PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+                    SELECT ?libelle WHERE {
+                        ?s skos:notation "${sanitizedCode}" .
+                        ?s skos:prefLabel ?libelle .
+                        FILTER (lang(?libelle) = 'fr')
                     }
-                });
+                `;
+
+                // console.log("SPARQL Query:", query);  // Log the SPARQL query
+
+                const url = `https://rdf.insee.fr/sparql?query=${encodeURIComponent(query)}`;
+
+                try {
+                    const response = await fetch(url, {
+                        headers: {
+                            'Accept': 'application/sparql-results+json'
+                        }
+                    });
+
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+
+                    const data = await response.json();
+
+                    if (data.results.bindings.length > 0) {
+                        const templateSource = document.getElementById('result-template').innerHTML;
+                        const template = Handlebars.compile(templateSource);
+
+                        const context = {
+                            code: Handlebars.escapeExpression(sanitizedCode),
+                            libelle: Handlebars.escapeExpression(data.results.bindings[0].libelle.value)
+                        };
+
+                        const sanitizedHTML = DOMPurify.sanitize(template(context));
+                        resultElement.innerHTML = sanitizedHTML;
+                    } else {
+                        resultElement.innerHTML = "<p>Code non trouvé</p>";
+                    }
+                } catch (error) {
+                    resultElement.innerHTML = "<p>Erreur lors de la récupération des données</p>";
+                    // console.error('Error fetching data:', error);
+                }
             });
-        </script>
-    </head>
-    <body>
-        <h1>Recherche dans la NAF</h1>
-        <div>
-            <label>Code : </label>
-            <input id="code" type="text" autofocus="autofocus" />
-            <button id="chercher" required>Chercher</button><br />
-        </div>
-        <div id="resultat" />
-    </body>
+
+            function sanitizeInput(input) {
+                // Step 3: Ensure the dot is not removed
+                return input.replace(/[^a-zA-Z0-9.\-_]/g, '');
+            }
+        });
+
+        // Handlebars helper for sanitizing output
+        Handlebars.registerHelper('sanitize', function(context) {
+            return Handlebars.escapeExpression(context);
+        });
+    </script>
+</body>
 </html>