From 199db8e616ab6069d40579a44b211b9a0e6b69be Mon Sep 17 00:00:00 2001
From: vincent porte <vincent@neuralia.co>
Date: Mon, 18 Sep 2023 16:15:17 +0200
Subject: [PATCH] Content Security and Permission Policies - use csp_nonce in
 templates

---
 .../partials/topic_likes.html                 | 14 +++++-----
 lacommunaute/templates/layouts/base.html      | 12 ++++----
 lacommunaute/templates/pages/home.html        | 28 +++++++++----------
 .../templates/pages/statistiques.html         |  2 +-
 4 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/lacommunaute/templates/forum_conversation/partials/topic_likes.html b/lacommunaute/templates/forum_conversation/partials/topic_likes.html
index 539693e33..1be8729c3 100644
--- a/lacommunaute/templates/forum_conversation/partials/topic_likes.html
+++ b/lacommunaute/templates/forum_conversation/partials/topic_likes.html
@@ -5,12 +5,12 @@
     {% with topic.likes as counter %}
         {% if user.is_authenticated %}
             <button hx-post="{% url 'forum_conversation_extension:like_topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}" id="like-button{{topic.pk}}"
-                hx-target="#likesarea{{topic.pk}}"
-                hx-swap="outerHTML"
-                class="btn btn-ico btn-link btn-like px-0 text-nowrap matomo-event"
-                data-matomo-category="engagement"
-                data-matomo-action="like"
-                data-matomo-option="topic"
+                    hx-target="#likesarea{{topic.pk}}"
+                    hx-swap="outerHTML"
+                    class="btn btn-ico btn-link btn-like px-0 text-nowrap matomo-event"
+                    data-matomo-category="engagement"
+                    data-matomo-action="like"
+                    data-matomo-option="topic"
             >
                 <i class="{% if topic.has_liked %}ri-heart-3-fill{% else %}ri-heart-3-line{% endif %} me-1" aria-hidden="true"></i><span>{{counter}}</span>
             </button>
@@ -22,6 +22,6 @@
     {% endwith %}
 </div>
 
-<script>
+<script nonce="{{ request.csp_nonce }}">
     document.activeElement?.blur();
 </script>
diff --git a/lacommunaute/templates/layouts/base.html b/lacommunaute/templates/layouts/base.html
index 8555c7b74..1496cb0d7 100644
--- a/lacommunaute/templates/layouts/base.html
+++ b/lacommunaute/templates/layouts/base.html
@@ -13,6 +13,8 @@
             <meta name="keywords" content="{% block meta_keywords %}{% endblock meta_keywords %}">
             <meta name="viewport" content="width=device-width, initial-scale=1">
 
+            <meta name="htmx-config" content='{"inlineScriptNonce":"{{ request.csp_nonce }}"}'>
+
             <!-- https://metatags.io Open Graph -->
             <meta property="og:locale" content="fr_FR">
             <meta property="og:type" content="website">
@@ -102,8 +104,8 @@
 
         {% block js %}
             {% import_static_JS_theme_inclusion %}
-            <script src="{% static 'machina/build/js/machina.min.js' %}" type="text/javascript" charset="utf-8"></script>
-            <script type="text/javascript">
+            <script src="{% static 'machina/build/js/machina.min.js' %}" type="text/javascript" charset="utf-8" nonce="{{ request.csp_nonce }}"></script>
+            <script type="text/javascript" nonce="{{ request.csp_nonce }}">
                 $(function() {
                     machina.init();
                     {% block onbodyload %}{% endblock onbodyload %}
@@ -112,8 +114,8 @@
         {% endblock %}
 
         {% block extra_js %}
-            <script src="{% static "vendor/tarteaucitron.js-1.11.0/tarteaucitron.js" %}"></script>
-            <script>
+            <script src="{% static "vendor/tarteaucitron.js-1.11.0/tarteaucitron.js" %}" nonce="{{ request.csp_nonce }}"></script>
+            <script nonce="{{ request.csp_nonce }}">
                 // Tarteaucitron's language is set according to the browser configuration
                 // but a lot of users don't know how to change it.
                 // This can be forced only by using a global `var` statement.
@@ -154,7 +156,7 @@
                 {% endif %}
             </script>
             {% if COMMU_ENVIRONMENT == 'PROD' %}
-                <script type="text/javascript" src="{% static 'javascripts/matomo.js' %}" defer></script>
+                <script type="text/javascript" src="{% static 'javascripts/matomo.js' %}" defer nonce="{{ request.csp_nonce }}"></script>
             {% endif %}
             <script type="text/javascript" src="{% static 'vendor/htmx-1.9.5/htmx.min.js' %}" defer></script>
         {% endblock %}
diff --git a/lacommunaute/templates/pages/home.html b/lacommunaute/templates/pages/home.html
index aa2bb8ffe..a64f265b1 100644
--- a/lacommunaute/templates/pages/home.html
+++ b/lacommunaute/templates/pages/home.html
@@ -64,10 +64,10 @@ <h3 class="m-0">
                                 {% for topic in topics_public %}
                                     <li class="mb-3 position-relative">
                                         <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}"
-                                            class="matomo-event btn-link stretched-link"
-                                            data-matomo-category="engagement"
-                                            data-matomo-action="view"
-                                            data-matomo-option="topic">
+                                           class="matomo-event btn-link stretched-link"
+                                           data-matomo-category="engagement"
+                                           data-matomo-action="view"
+                                           data-matomo-option="topic">
                                             {{ topic.subject }}
                                         </a>
                                     </li>
@@ -89,10 +89,10 @@ <h3 class="m-0">
                                 {% for forum in forums_category %}
                                     <li class="mb-3 position-relative">
                                         <a href="{% url 'forum_extension:forum' forum.slug forum.pk %}"
-                                            class="matomo-event btn-link stretched-link"
-                                            data-matomo-category="engagement"
-                                            data-matomo-action="view"
-                                            data-matomo-option="forum">
+                                           class="matomo-event btn-link stretched-link"
+                                           data-matomo-category="engagement"
+                                           data-matomo-action="view"
+                                           data-matomo-option="forum">
                                             [{{ forum.parent.name }}] {{ forum.name }}
                                         </a>
                                     </li>
@@ -114,10 +114,10 @@ <h3 class="m-0">
                                 {% for topic in topics_newsfeed %}
                                     <li class="mb-3 position-relative">
                                         <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}"
-                                            class="matomo-event btn-link stretched-link"
-                                            data-matomo-category="engagement"
-                                            data-matomo-action="view"
-                                            data-matomo-option="news">
+                                           class="matomo-event btn-link stretched-link"
+                                           data-matomo-category="engagement"
+                                           data-matomo-action="view"
+                                           data-matomo-option="news">
                                             {{ topic.subject }}
                                         </a>
                                     </li>
@@ -134,8 +134,8 @@ <h3 class="m-0">
 
 {% block extra_js %}
     {{ block.super }}
-    <script async src="https://tally.so/widgets/embed.js"></script>
-    <script defer>
+    <script async src="https://tally.so/widgets/embed.js" nonce="{{ request.csp_nonce }}"></script>
+    <script defer nonce="{{ request.csp_nonce }}">
         // Any given Tally popup will not be shown more than once every `minDaysBetweenDisplays` days.
         const minDaysBetweenDisplays = 14;
         const delayBeforeShowingPopupInSeconds = 45;
diff --git a/lacommunaute/templates/pages/statistiques.html b/lacommunaute/templates/pages/statistiques.html
index 5cbbd7b6f..3158a82c6 100644
--- a/lacommunaute/templates/pages/statistiques.html
+++ b/lacommunaute/templates/pages/statistiques.html
@@ -88,7 +88,7 @@ <h2>Vue quotidienne</h2>
 {% block extra_js %}
     {{ block.super }}
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1"></script>
-    <script>
+    <script nonce="{{ request.csp_nonce }}">
         const ctx_stats = document.getElementById('statChart');
         new Chart(ctx_stats, {
             type: 'line',