Avoid rendering HTML, detect links explicitly

src/components/SafeLinks.vue

@@ -0,0 +1,65 @@
+<template>
+    <span>
+        <template v-for="(part, index) in parts" :key="index">
+            <a
+                v-if="part.type === 'link'"
+                :href="part.content"
+                target="_blank"
+                rel="noopener noreferrer"
+            >{{ part.content }}</a>
+            <span v-else>{{ part.content }}</span>
+        </template>
+    </span>
+</template>
+
+<script>
+export default {
+    name: "SafeLinks",
+    props: {
+        text: {
+            type: String,
+            required: true
+        }
+    },
+
+    computed: {
+        parts() {
+            if (!this.text) {
+                return [];
+            }
+
+            const urlPattern = /(\b(?:https?|ftp|file|smb|ssh|telnet|ldap|git):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+            const parts = [];
+            let lastIndex = 0;
+
+            this.text.replace(urlPattern, (match, url, offset) => {
+                // Add text before the link
+                if (offset > lastIndex) {
+                    parts.push({
+                        type: "text",
+                        content: this.text.slice(lastIndex, offset)
+                    });
+                }
+
+                // Add the link
+                parts.push({
+                    type: "link",
+                    content: url
+                });
+
+                lastIndex = offset + match.length;
+            });
+
+            // Add remaining text after last link
+            if (lastIndex < this.text.length) {
+                parts.push({
+                    type: "text",
+                    content: this.text.slice(lastIndex)
+                });
+            }
+
+            return parts;
+        }
+    }
+};
+</script>

src/pages/Details.vue

@@ -9,9 +9,9 @@
                     <div>{{ monitor.id }}</div>
                 </div>
             </h1>
-            <!-- eslint-disable vue/no-v-html -->
-            <p v-if="monitor.description" v-html="processedDescription"></p>
-            <!--eslint-enable-->
+            <p v-if="monitor.description">
+                <SafeLinks :text="monitor.description" />
+            </p>
             <div class="d-flex">
                 <div class="tags">
                     <Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
@@ -281,6 +281,7 @@ import Status from "../components/Status.vue";
 import Datetime from "../components/Datetime.vue";
 import CountUp from "../components/CountUp.vue";
 import Uptime from "../components/Uptime.vue";
+import SafeLinks from "../components/SafeLinks.vue";
 import Pagination from "v-pagination-3";
 const PingChart = defineAsyncComponent(() => import("../components/PingChart.vue"));
 import Tag from "../components/Tag.vue";
@@ -309,7 +310,8 @@ export default {
         Tag,
         CertificateInfo,
         PrismEditor,
-        ScreenshotDialog
+        ScreenshotDialog,
+        SafeLinks,
     },
     data() {
         return {
@@ -401,19 +403,6 @@ export default {
 
         screenshotURL() {
             return getResBaseURL() + this.monitor.screenshot + "?time=" + this.cacheTime;
-        },
-
-        processedDescription() {
-            if (!this.monitor.description) {
-                return "";
-            }
-
-            const urlPattern = /(\b(?:https?|ftp|file|smb|ssh|telnet|ldap|git):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
-            const processed = this.monitor.description.replace(
-                urlPattern,
-                url => `<a href="${this.escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${this.escapeHtml(url)}</a>`
-            );
-            return processed;
         }
     },
 
@@ -671,20 +660,6 @@ export default {
                     .replace("https://example.com/api/push/key?status=up&msg=OK&ping=", this.pushURL);
                 this.pushMonitor.code = code;
             });
-        },
-
-        /**
-         * Escape HTML
-         * @param {string} unsafe Unsafe string
-         * @returns {string} Safe string
-         */
-        escapeHtml(unsafe) {
-            return unsafe
-                .replace(/&/g, "&amp;")
-                .replace(/</g, "&lt;")
-                .replace(/>/g, "&gt;")
-                .replace(/"/g, "&quot;")
-                .replace(/'/g, "&#039;");
         }
     },
 };