[Technique] Améliorer la CSP #2626

hmeneuvrier · 2024-06-03T13:27:43Z

Ticket

Description

Tentative d'avoir une CSP plus stricte
⚠️ Il reste des erreurs à l'utilisation de tinyMCE

💡 Je viens de penser qu'en ne générant pas de nonces pour les styles, on n'aurait peut-être moins d'erreurs sur tinyMCE... car je viens de réaliser que j'ai fini par externaliser tous les styles et que je n'utilise plus nonce="{{ app.request.attributes.get('csp_style_nonce') }}" ... à tester (et vérifier ensuite la CSP générée sur https://csp-evaluator.withgoogle.com/?csp=https://histologe.beta.gouv.fr pour voir si elle est meilleure... car il a l'air de ne pas trop tiquer sur l'utilisation de unsafe-inline sur les styles
EDIT : effectivement il ne reste que l'erreur dont je ne trouve pas la provenance :

⚠️ j'ai essayé d'ajouter 'strict-dynamic' dans script-src comme conseillé par CPS evaluator, mais ça empêche totalement l'utilisation de tinyMCE et tippy

Changements apportés

Génération d'une CSP via un listener src/EventListener/ContentSecurityPolicyListener.php et ajout de nonces à la volée, les différents paramètres étant définis dans config/app/csp.yaml (et ils sont plus stricts)
Externalisation de tous les scripts inline pouvant l'être
Externalisation de tous les styles inline pouvant l'être
Utilisation de nonces sur tous les styles et les scripts ne pouvant être externalisés (certains pourraient l'être en fait)
Utilisation de <image à la place de <use dans les svg
Passage à la dernière version de tinyMCE en CDN (et suppression de 87 fichiers de tinyMCE)

Pré-requis

Supprimer les variables SECURITY_CSP_HEADER_VALUE des fichiers d'environnement
npm run watch

Tests

⚠️ Les tests sont à faire console ouverte pour voir les erreurs en plus de l'aspect fonctionnel. Il y a toujours une erreur pour matomo en local, car je n'ai pas mis localhost dans la CSP

.env

.env.sample

hmeneuvrier · 2024-06-07T08:51:15Z

config/app/csp.yaml

@@ -0,0 +1,16 @@
+parameters:
+  csp_parameters:
+    default-src: "'none'"


Donc la CSP est maintenant définie dans ce fichier. Par défaut tout est à none, et on accepte que ce dont on a besoin

hmeneuvrier · 2024-06-07T08:53:01Z

config/app/csp.yaml

+parameters:
+  csp_parameters:
+    default-src: "'none'"
+    script-src: "'self' 'unsafe-inline' 'unsafe-eval' https://cdn.matomo.cloud/histologe.matomo.cloud/matomo.js https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/ https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/ https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/ https://cdn.jsdelivr.net/npm/tippy.js@6/dist/ https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/ https://cdn.jsdelivr.net/npm/tinymce@7.1.2/"


on garde 'unsafe-unline' pour la rétrocompatibilité avec les anciens navigateurs, mais elle n'est pas utilisée pour les navigateurs qui acceptent les nonces (qui sont ajoutés dans le service), d'où les soucis avec tinyMCE
on garde 'unsafe-eval' pour le formulaire
On cible chacun des dossiers dont on a besoin plutôt qu'un général https://cdn.jsdelivr.net

Le fait d'utiliser des nonces pour les script et les styles désactivent donc le unsafe-inline sur les navigateurs récents. D'où le besoin d'externaliser au maximum les scripts et les styles dans d'autres fichiers chargés

hmeneuvrier · 2024-06-07T08:53:34Z

assets/styles/histologe.scss

+
+.fr-display-none {
+    display: none;
+}


Ajout de style pour virer des styles inline par ailleurs

hmeneuvrier · 2024-06-07T08:53:43Z

assets/controllers/search_filter_form.js

@@ -0,0 +1,56 @@
+const setBadge = (el) => {


externalisation d'un script

hmeneuvrier · 2024-06-07T08:55:07Z

config/services.yaml

@@ -62,6 +63,11 @@ services:
            - '../src/Kernel.php'
            - '../src/Tests/'

+    App\EventListener\ContentSecurityPolicyListener:


ajout du service

public/img/logo_ANCT_header.svg

hmeneuvrier · 2024-06-07T08:57:06Z

public/js/app.js

@@ -210,11 +210,6 @@ document?.querySelectorAll(".fr-pagination__link").forEach((e => {
        }))))
    }))
 }));


tout le code sur les badges a été déplacé dans assets/controllers/search_filter_form.js

hmeneuvrier · 2024-06-07T08:57:17Z

public/js/const.js

-    }
-    badge.remove();
-}
+


tout le code sur les badges a été déplacé dans assets/controllers/search_filter_form.js

public/js/const.min.js

hmeneuvrier · 2024-06-07T08:57:52Z

src/EventListener/ContentSecurityPolicyListener.php

+        $request = $event->getRequest();
+
+        $scriptNonce = bin2hex(random_bytes(16));
+        $styleNonce = bin2hex(random_bytes(16));


création de nouveaux nonces à chaque requête

seulement pour les scripts

hmeneuvrier · 2024-06-07T08:58:08Z

src/EventListener/ContentSecurityPolicyListener.php

+                'form-action '.$cspParameters['form-action'].'; '.
+                'frame-ancestors '.$cspParameters['frame-ancestors'].'; '.
+                'media-src '.$cspParameters['media-src'].'; '.
+                'require-trusted-types-for '.$cspParameters['require-trusted-types-for'];


formation de la csp avec ce qui est dans le yaml en ajoutant les noncees

hmeneuvrier · 2024-06-07T08:58:26Z

templates/_partials/_modal_edit_nde.html.twig

@@ -137,7 +137,7 @@
                                        <label class="fr-label" for="signalement-edit-nde-conso-energie">
                                            Consommation énergétique
                                        </label>
-                                        <input class="fr-input fr-col-10" style="display: inline;" pattern="[0-9]*" inputmode="numeric" type="number" id="signalement-edit-nde-conso-energie" name="consommationEnergie" value="{{ signalementQualificationNDE.details.consommation_energie }}">
+                                        <input class="fr-input fr-col-10 fr-display-inline" pattern="[0-9]*" inputmode="numeric" type="number" id="signalement-edit-nde-conso-energie" name="consommationEnergie" value="{{ signalementQualificationNDE.details.consommation_energie }}">


on utilise une classe css plutôt que du style inline

hmeneuvrier · 2024-06-07T08:58:36Z

templates/_partials/_modal_upload_files.html.twig

@@ -73,7 +73,7 @@
                        <div class="modal-upload-list-section" id="modal-upload-file-dynamic-content">
                            <div class="modal-upload-list"></div>
                        </div>
-                        <div style="display:none">
+                        <div class="fr-display-none">


hmeneuvrier · 2024-06-07T08:59:24Z

templates/_partials/_search_filter_form.html.twig

@@ -54,7 +54,7 @@
                                {% if is_granted('ROLE_ADMIN') %}
                                    <div class="fr-col-12 fr-col-md-6">
                                        <label class="fr-label" for="bo-filters-territories"><strong>Filtrer par territoire</strong></label>
-                                        <select id="bo-filters-territories" class="fr-select" onchange="setBadge(this)">
+                                        <select id="bo-filters-territories" class="fr-select select-search-filter-form">


on n'utilise plus de script inline, et on ajoute une classe qui permet au code du nouveau controller assets/controllers/search_filter_form.js de fonctionner

templates/_partials/signalement/add_suivi.html.twig

templates/back/cartographie/index.html.twig

hmeneuvrier · 2024-06-07T09:00:39Z

templates/back/signalement/view.html.twig

@@ -61,9 +61,9 @@
 {% endblock %}
 {% block javascripts %}
    {{ encore_entry_script_tags('app') }}
-    <script>
+    <script nonce="{{ app.request.attributes.get('csp_script_nonce') }}">


utilisation d'un nonce pour tippy

hmeneuvrier · 2024-06-07T09:00:54Z

templates/back/signalement/view.html.twig

        tippy('.part-infos-hover', {
-            content: (reference) => '<strong style="white-space: nowrap">' + reference.getAttribute('data-user') + '</strong>' + '<hr class="fr-pb-1v"><span style="white-space: nowrap">' + reference.getAttribute('data-mail') + '</span>',
+            content: (reference) => '<strong class="fr-ws-nowrap">' + reference.getAttribute('data-user') + '</strong>' + '<hr class="fr-pb-1v"><span class="fr-ws-nowrap">' + reference.getAttribute('data-mail') + '</span>',


pas de style inline

templates/back/signalement/view/photos-album.html.twig

templates/base.html.twig

hmeneuvrier · 2024-06-07T09:02:15Z

templates/base.html.twig

@@ -140,13 +144,62 @@
 {% endif %}
 {% if 'back_signalement_view' in app.request.get('_route') %}
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy-bundle.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.umd.min.js"></script>


Changement de source tippy pour être CSP compliant

templates/base.html.twig

hmeneuvrier · 2024-06-07T09:03:22Z

templates/base.html.twig

    tinymce.init({
        selector: 'textarea.editor',
        browser_spellcheck: true,
+        license_key: 'gpl',


ajout d'une licence suite à utilisation d'un cdn

hmeneuvrier · 2024-06-07T09:03:30Z

templates/base.html.twig

+
+</script> #}
+
+<script nonce="{{ app.request.attributes.get('csp_script_nonce') }}">


ajout du nonce pour tinyMCE

hmeneuvrier · 2024-06-07T09:04:43Z

webpack.config.js

@@ -79,7 +79,8 @@ Encore
    })

    .enableVueLoader(() => {}, {
-        version: 3
+        version: 3,
+        runtimeCompilerBuild: false


Passage de toutes les apps VueJS en CSP compliant (c'était vraiment aussi simple que ça)

config/app/csp.yaml

hmeneuvrier · 2024-06-07T15:38:02Z

Le passage de la CSP actuelle dans CSP Evaluator :

src/EventListener/ContentSecurityPolicyListener.php

public/js/const.min.js

templates/back/cartographie/index.html.twig

sfinx13

Lecture et test OK

hmeneuvrier · 2024-06-14T08:31:09Z

Pour garder une trace, @sfinx13 a trouvé la provenance de l'erreur

Il s'agit de l'extension navigateur Vue DevTools... donc pas de souci pour la mise en ligne

sonarcloud · 2024-06-14T14:26:14Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.6% Duplication on New Code

See analysis details on SonarCloud

emilschn

OK lecture et test

hmeneuvrier force-pushed the feature/2609-technique-csp branch 3 times, most recently from cbf20af to a261510 Compare June 6, 2024 12:48