Detect URLs in monitor descriptions

src/pages/Details.vue

@@ -9,7 +9,7 @@
                     <div>{{ monitor.id }}</div>
                 </div>
             </h1>
-            <p v-if="monitor.description">{{ monitor.description }}</p>
+            <p v-if="monitor.description" v-html="processedDescription"></p>
             <div class="d-flex">
                 <div class="tags">
                     <Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
@@ -399,6 +399,19 @@ 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;
         }
     },
 
@@ -656,6 +669,20 @@ 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;");
         }
     },
 };