Content Security and Permission Policies - use csp_nonce in templates

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>

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 %}

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;

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/[email protected]"></script>
-    <script>
+    <script nonce="{{ request.csp_nonce }}">
         const ctx_stats = document.getElementById('statChart');
         new Chart(ctx_stats, {
             type: 'line',