From 2a556e714fde375d71d78ae0771e7986e96897f7 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Tue, 4 Jun 2024 00:38:32 +0200
Subject: [PATCH] implemented additional changes

---
 package-lock.json                                 |  2 +-
 .../socket-handlers/status-page-socket-handler.js |  9 ++++++---
 src/lang/en.json                                  |  4 ++--
 src/pages/StatusPage.vue                          | 15 +++++++++++----
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2a6b04169..1e0adec21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
                 "socket.io": "~4.6.1",
                 "socket.io-client": "~4.6.1",
                 "socks-proxy-agent": "6.1.1",
-                "sqlite3": "^5.1.7",
+                "sqlite3": "~5.1.7",
                 "tar": "~6.2.1",
                 "tcp-ping": "~0.1.1",
                 "thirty-two": "~1.0.2",
diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js
index e3e603a12..a3061e981 100644
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/server/socket-handlers/status-page-socket-handler.js
@@ -101,10 +101,11 @@ module.exports.statusPageSocketHandler = (socket) => {
             if (!statusPage) {
                 throw new Error("No slug?");
             }
-
+            const config = await statusPage.toJSON();
+            config.allowEditingCustomHtml = import.meta.env.UPTIME_KUMA_ALLOW_CUSTOM_HTML === '1';
             callback({
                 ok: true,
-                config: await statusPage.toJSON(),
+                config,
             });
         } catch (error) {
             callback({
@@ -167,7 +168,9 @@ module.exports.statusPageSocketHandler = (socket) => {
             statusPage.show_certificate_expiry = config.showCertificateExpiry;
             statusPage.modified_date = R.isoDateTime();
             statusPage.google_analytics_tag_id = config.googleAnalyticsId;
-            statusPage.custom_html = config.customHtml;
+            if (process.env.UPTIME_KUMA_ALLOW_CUSTOM_HTML === "1"){
+                statusPage.custom_html = config.customHtml;
+            }
 
             await R.store(statusPage);
 
diff --git a/src/lang/en.json b/src/lang/en.json
index f2d672c0c..c677066de 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -777,8 +777,8 @@
     "Custom Monitor Type": "Custom Monitor Type",
     "Google Analytics ID": "Google Analytics ID",
     "Custom HTML": "Custom HTML",
-    "customHtmlEnvVar1": "The environment variable",
-    "customHtmlEnvVar2": "must be set to",
+    "customHtmlEnvVarDisabled": "environment variable {allow_custom_html} must be set to inject html to the head",
+    "customHtmlEnvVarEnabled": "Because the environment variable {allow_custom_html} is set, arbitrary html can be injected into the head. Make sure to remove the environment variable after use",
     "Edit Tag": "Edit Tag",
     "Server Address": "Server Address",
     "Learn More": "Learn More",
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 006dddb96..0d8d7c781 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -107,10 +107,17 @@
                 <!-- Custom HTML -->
                 <div class="my-3">
                     <div class="mb-1">{{ $t("Custom HTML") }}</div>
-                    <prism-editor v-model="config.customHtml" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>
-                    <div class="form-text">
-                        {{ $t("customHtmlEnvVar1") }} <code>UPTIME_KUMA_ALLOW_CUSTOM_HTML</code> {{ $t("customHtmlEnvVar2") }} <code>1</code>.
-                    </div>
+                    <prism-editor v-model="config.customHtml" class="css-editor" :highlight="highlighter" line-numbers :readonly="!config.allowEditingCustomHtml"></prism-editor>
+                    <i18n-t v-if="config.allowEditingCustomHtml" tag="div" class="form-text" keypath="customHtmlEnvVarEnabled">
+                        <template #allow_custom_html>
+                            <code>UPTIME_KUMA_ALLOW_CUSTOM_HTML</code>
+                        </template>
+                    </i18n-t>
+                    <i18n-t v-else tag="div" class="form-text" keypath="customHtmlEnvVarDisabled">
+                        <template #allow_custom_html>
+                            <code>UPTIME_KUMA_ALLOW_CUSTOM_HTML=1</code>
+                        </template>
+                    </i18n-t>
                 </div>
 
                 <div class="danger-zone">