From 8da3f54e9104cb3facd9c69794e04d4b0330d28d Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Mon, 26 Mar 2018 02:16:12 +0300
Subject: [PATCH] Escape html for weblog in the client

---
 code/espurna/debug.ino | 10 +++-------
 code/html/custom.css   |  5 ++++-
 code/html/custom.js    |  2 +-
 code/html/index.html   |  4 ++--
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/code/espurna/debug.ino b/code/espurna/debug.ino
index 554e3fdc..6de5b098 100644
--- a/code/espurna/debug.ino
+++ b/code/espurna/debug.ino
@@ -62,15 +62,11 @@ void _debugSend(char * message) {
 
     #if DEBUG_WEB_SUPPORT
         if (wsConnected() && (getFreeHeap() > 10000)) {
-            String m = String(message);
-            m.replace("\"", "&quot;");
-            m.replace("{", "&#123");
-            m.replace("}", "&#125");
-            char buffer[m.length() + 24];
+            char buffer[strlen(message) + 24]; // 8 char timestamp [234567] + space + 14 char json wrap
             #if DEBUG_ADD_TIMESTAMP
-                snprintf_P(buffer, sizeof(buffer), PSTR("{\"weblog\": \"%s%s\"}"), timestamp, m.c_str());
+                snprintf_P(buffer, sizeof(buffer), PSTR("{\"weblog\": \"%s%s\"}"), timestamp, message);
             #else
-                snprintf_P(buffer, sizeof(buffer), PSTR("{\"weblog\": \"%s\"}"), m.c_str());
+                snprintf_P(buffer, sizeof(buffer), PSTR("{\"weblog\": \"%s\"}"), message);
             #endif
             wsSend(buffer);
         }
diff --git a/code/html/custom.css b/code/html/custom.css
index 770f0f0d..f169719f 100644
--- a/code/html/custom.css
+++ b/code/html/custom.css
@@ -122,7 +122,7 @@ div.state {
 }
 
 .pure-g span.terminal,
-.pure-g textarea.terminal {
+.pure-g ul.terminal {
     font-family: 'Courier New', monospace;
     font-size: 80%;
     line-height: 100%;
@@ -309,5 +309,8 @@ span.slider {
 
 #weblog {
     height: 400px;
+    padding: 0.5em 0.6em;
     margin-bottom: 10px;
+    list-style: none;
+    overflow-y: scroll;
 }
diff --git a/code/html/custom.js b/code/html/custom.js
index 2da0b102..fe5abc86 100644
--- a/code/html/custom.js
+++ b/code/html/custom.js
@@ -1161,7 +1161,7 @@ function processData(data) {
 
         // Web log
         if ("weblog" === key) {
-            $("#weblog").append(value);
+            $("<li></li>").addClass("weblog-event").text(value).appendTo("#weblog");
             $("#weblog").scrollTop($("#weblog")[0].scrollHeight - $("#weblog").height());
             return;
         }
diff --git a/code/html/index.html b/code/html/index.html
index ba7db67a..85beb1b8 100644
--- a/code/html/index.html
+++ b/code/html/index.html
@@ -983,8 +983,8 @@
                                 </div>
 
                                 <div class="pure-g">
-                                    <textarea class="pure-u-1 terminal" id="weblog" name="weblog" wrap="off" readonly></textarea>
-                                    <div class=" pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-dbg-clear pure-u-23-24">Clear</button></div>
+                                    <ul class="pure-u-1 terminal" id="weblog" name="weblog"></ul>
+                                    <div class="pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-dbg-clear pure-u-23-24">Clear</button></div>
                                 </div>
 
                             </fieldset>