Content Security and Permission Policies - use csp_nonce in templates

gip-inclusion · Sep 19, 2023 · 9b682ee · 9b682ee
1 parent 349e76e
commit 9b682ee
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 44 deletions.
diff --git a/lacommunaute/templates/forum_conversation/partials/posts_list.html b/lacommunaute/templates/forum_conversation/partials/posts_list.html
@@ -9,7 +9,7 @@
 <div id="showmorepostsarea{{topic.pk}}">
     {% for post in posts %}
         <div class="card post mb-3 {% if post.is_certified %}bg-communaute-lighter border-communaute {% else %}bg-light {% endif %} has-links-inside ms-3"
-            id="certifiedpostsarea{{post.pk}}">
+             id="certifiedpostsarea{{post.pk}}">
             <div class="card-body">
                 <div class="row">
                     <div class="col-12 post-content-wrapper">
@@ -38,7 +38,7 @@
     </div>
 </div>
 
-<script>
+<script nonce="{{ request.csp_nonce }}">
     document.getElementById(`collapseButtonPost{{topic.pk}}`).setAttribute('aria-expanded', 'false');
     document.getElementById(`showmoreposts-button{{topic.pk}}`).className = 'd-none';
 </script>
diff --git a/lacommunaute/templates/forum_conversation/partials/topic_detail_actions.html b/lacommunaute/templates/forum_conversation/partials/topic_detail_actions.html
@@ -19,16 +19,16 @@
 
 {% if posts_count > 1 %}
     <a hx-get="{% url 'forum_conversation_extension:showmore_posts' topic.forum.slug topic.forum.pk topic.slug topic.pk %}"
-        id="showmoreposts-button{{topic.pk}}"
-        hx-target="#showmorepostsarea{{topic.pk}}"
-        hx-swap="outerHTML"
-        class="btn btn-secondary btn-sm btn-ico matomo-event justify-content-center w-100 w-sm-auto me-sm-1 mb-2 mb-sm-0"
-        data-matomo-category="engagement"
-        data-matomo-action="showmore"
-        data-matomo-option="post"
-        onclick=DisabledMe("showmoreposts-button{{topic.pk}}")
-        aria-label="{% trans "Show me the comment" %}"
-        role="button"
+       id="showmoreposts-button{{topic.pk}}"
+       hx-target="#showmorepostsarea{{topic.pk}}"
+       hx-swap="outerHTML"
+       class="btn btn-secondary btn-sm btn-ico matomo-event justify-content-center w-100 w-sm-auto me-sm-1 mb-2 mb-sm-0"
+       data-matomo-category="engagement"
+       data-matomo-action="showmore"
+       data-matomo-option="post"
+       onclick=DisabledMe("showmoreposts-button{{topic.pk}}")
+       aria-label="{% trans "Show me the comment" %}"
+       role="button"
     >
         <i class="ri-eye-line font-weight-normal" aria-hidden="true"></i>
         <span>
@@ -66,8 +66,9 @@
 {% endif %}
 
 
-<script>
-    function DisabledMe(id) {
-        document.getElementById(id).classList.add('disabled');
-    }
+<script nonce="{{ request.csp_nonce }}">
+    var showmorepostsButtons = document.querySelectorAll('.showmoreposts-button')
+    showmorepostsButtons.forEach((button) => button.addEventListener('click', function () {
+        button.classList.add('disabled');
+    }));
 </script>
diff --git 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
@@ -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,9 +156,9 @@
                 {% 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.8.4/htmx.min.js' %}" defer></script>
+            <script type="text/javascript" src="{% static 'vendor/htmx-1.9.2/htmx.min.js' %}" nonce="{{ request.csp_nonce }}"></script>
         {% endblock %}
     </body>
 </html>
diff --git 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
@@ -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',