From 4a93886019efad5901c574013581338540e59968 Mon Sep 17 00:00:00 2001
From: Simon Brugman <sfbbrugman@gmail.com>
Date: Thu, 6 Jul 2023 15:23:50 +0200
Subject: [PATCH] fix: jinja safe html

Closes #275
---
 popmon/visualization/templates/card.html    | 8 ++++----
 popmon/visualization/templates/core.html    | 2 +-
 popmon/visualization/templates/section.html | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/popmon/visualization/templates/card.html b/popmon/visualization/templates/card.html
index 0fbb6e00..b86ba207 100644
--- a/popmon/visualization/templates/card.html
+++ b/popmon/visualization/templates/card.html
@@ -12,7 +12,7 @@ <h4 class="card-title">{{metric.name | fmt_metric}}</h4>
         </div>
         <div id="{{ card_id }}"> </div>
         {%- if metric.type in ['traffic_light', 'alert'] -%}
-            {{ metric.plot }}
+            {{ metric.plot | safe }}
         {%- else -%}
             <div class="skeleton-loader" id="{{ card_id }}-loading"></div>
             <script>
@@ -20,12 +20,12 @@ <h4 class="card-title">{{metric.name | fmt_metric}}</h4>
             render_func["{{ card_id }}"] = (function(){
                 var layout = deepCopy(layouts["{{ section_index }}{{ curr }}-{{ metric.type }}"]);
                 {%- if metric.shapes | length -%}
-                    layout["shapes"] = {{ metric.shapes | json_plot}};
+                    layout["shapes"] = {{ metric.shapes | json_plot | safe }};
                 {%- endif -%}
                 {%- if metric.yaxis_range | length -%}
-                    layout["yaxis"]["range"] = {{ metric.yaxis_range | json_plot }};
+                    layout["yaxis"]["range"] = {{ metric.yaxis_range | json_plot | safe }};
                 {%- endif -%}
-                Plotly.newPlot(document.getElementById("{{ card_id }}"), {{ metric.plot | json_plot }}, layout, plotly_config).then(function() { document.getElementById("{{ card_id }}-loading").remove(); rendered["{{ card_id }}"] = true;});
+                Plotly.newPlot(document.getElementById("{{ card_id }}"), {{ metric.plot | json_plot | safe }}, layout, plotly_config).then(function() { document.getElementById("{{ card_id }}-loading").remove(); rendered["{{ card_id }}"] = true;});
             });
 
             var io = new IntersectionObserver(function(entries) {
diff --git a/popmon/visualization/templates/core.html b/popmon/visualization/templates/core.html
index a068abe0..c98a5047 100644
--- a/popmon/visualization/templates/core.html
+++ b/popmon/visualization/templates/core.html
@@ -30,7 +30,7 @@
     var render_func = {};
     </script>
     {%- include 'header.html' -%}
-    {{ sections }}
+    {{ sections | safe }}
     {%- include 'footer.html' -%}
 </body>
 </html>
\ No newline at end of file
diff --git a/popmon/visualization/templates/section.html b/popmon/visualization/templates/section.html
index 6c505b2b..207abd14 100644
--- a/popmon/visualization/templates/section.html
+++ b/popmon/visualization/templates/section.html
@@ -25,7 +25,7 @@ <h2>{{ section_title }}</h2>
         <script> 
           {%- set curr = loop.index  -%}
         {%- for plot_type, layout in feature.plot_type_layouts.items() -%}
-            layouts["{{ section_index }}{{ curr }}-{{ plot_type }}"] = {{ layout | json_plot }};
+            layouts["{{ section_index }}{{ curr }}-{{ plot_type }}"] = {{ layout | json_plot | safe }};
         {%- endfor -%}
         </script>
         <div class="section_feature" data-section-feature="{{ feature.name }}">
@@ -57,7 +57,7 @@ <h3> {{ feature.titles.get(ref, ref) }} </h3>
             {%- for metric in plots -%}
               <script> 
                 {%- set curr = loop.index  -%}
-                layouts["{{ section_index }}{{ curr }}-{{ metric.type }}"] = {{ metric.layout | json_plot }};
+                layouts["{{ section_index }}{{ curr }}-{{ metric.type }}"] = {{ metric.layout | json_plot | safe }};
               </script>
               {%- with metric=metric -%}
                 {%- include 'card.html' -%}