diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index 8595d8a..6514920 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -97,8 +97,9 @@
             <% if (barPings.length > 0) { %>
               <% barPings.forEach(function(c) {
                 const color = c.down === 0 ? 'bg-green-500/70' : (c.up === 0 ? 'bg-red-500/70' : 'bg-orange-400/70');
+                const regionsJson = JSON.stringify(c.regions).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
               %>
-                <div class="flex-1 rounded-sm <%= color %> cursor-pointer" data-run="<%= c.run_id %>" data-up="<%= c.up %>" data-down="<%= c.down %>" data-total="<%= c.total %>" data-time="<%= c.checked_at %>" data-regions="<%- JSON.stringify(c.regions).replace(/"/g, '&quot;') %>"></div>
+                <div class="flex-1 rounded-sm <%= color %> cursor-pointer" data-run="<%= c.run_id %>" data-up="<%= c.up %>" data-down="<%= c.down %>" data-total="<%= c.total %>" data-time="<%= c.checked_at %>" data-regions="<%~ regionsJson %>"></div>
               <% }) %>
             <% } else { %>
               <div class="flex-1 bg-gray-800/50 text-center text-xs text-gray-600 leading-8 rounded-lg">No data</div>