Feat: Improve TLS certificate display & handling

server/model/monitor.js

@@ -529,6 +529,12 @@ class Monitor extends BeanModel {
                         }
                     }
 
+                    let tlsInfo;
+                    // Store TLS Info when key material is received
+                    options.httpsAgent.on("keylog", async (line, tlsSocket) => {
+                        tlsInfo = checkCertificate(tlsSocket);
+                    });
+
                     log.debug("monitor", `[${this.name}] Axios Options: ${JSON.stringify(options)}`);
                     log.debug("monitor", `[${this.name}] Axios Request`);
 
@@ -538,29 +544,22 @@ class Monitor extends BeanModel {
                     bean.msg = `${res.status} - ${res.statusText}`;
                     bean.ping = dayjs().valueOf() - startTime;
 
-                    // Check certificate if https is used
+                    // Store certificate and check for expiry if https is used
-                    let certInfoStartTime = dayjs().valueOf();
                     if (this.getUrl()?.protocol === "https:") {
-                        log.debug("monitor", `[${this.name}] Check cert`);
+                        // No way to listen for the `secureConnection` event, so we do it here
-                        try {
+                        const tlssocket = res.request.res.socket;
-                            let tlsInfoObject = checkCertificate(res);
+                        if (tlssocket) {
-                            tlsInfo = await this.updateTlsInfo(tlsInfoObject);
+                            tlsInfo.valid = tlssocket.authorized || false;
-
+                            if (!tlssocket.authorized) {
-                            if (!this.getIgnoreTls() && this.isEnabledExpiryNotification()) {
+                                tlsInfo.authorizationError = tlssocket.authorizationError;
-                                log.debug("monitor", `[${this.name}] call checkCertExpiryNotifications`);
-                                await this.checkCertExpiryNotifications(tlsInfoObject);
-                            }
-
-                        } catch (e) {
-                            if (e.message !== "No TLS certificate in response") {
-                                log.error("monitor", "Caught error");
-                                log.error("monitor", e.message);
                             }
                         }
-                    }
 
-                    if (process.env.TIMELOGGER === "1") {
+                        await this.updateTlsInfo(tlsInfo);
-                        log.debug("monitor", "Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms");
+                        if (!this.getIgnoreTls() && this.isEnabledExpiryNotification()) {
+                            log.debug("monitor", `[${this.name}] call checkCertExpiryNotifications`);
+                            await this.checkCertExpiryNotifications(tlsInfo);
+                        }
                     }
 
                     if (process.env.UPTIME_KUMA_LOG_RESPONSE_BODY_MONITOR_ID === this.id) {

server/util-server.js

@@ -653,21 +653,27 @@ const parseCertificateInfo = function (info) {
 
 /**
  * Check if certificate is valid
- * @param {object} res Response object from axios
+ * @param {tls.TLSSocket} socket TLSSocket, which may or may not be connected
  * @returns {object} Object containing certificate information
- * @throws No socket was found to check certificate for
  */
-exports.checkCertificate = function (res) {
+exports.checkCertificate = function (socket) {
-    if (!res.request.res.socket) {
+    let certInfoStartTime = dayjs().valueOf();
-        throw new Error("No socket found");
+
+    // Return null if there is no socket
+    if (socket === undefined || socket == null) {
+        return null;
     }
 
-    const info = res.request.res.socket.getPeerCertificate(true);
+    const info = socket.getPeerCertificate(true);
-    const valid = res.request.res.socket.authorized || false;
+    const valid = socket.authorized || false;
 
     log.debug("cert", "Parsing Certificate Info");
     const parsedInfo = parseCertificateInfo(info);
 
+    if (process.env.TIMELOGGER === "1") {
+        log.debug("monitor", "Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms");
+    }
+
     return {
         valid: valid,
         certInfo: parsedInfo

src/components/CertificateInfo.vue

@@ -1,20 +1,34 @@
 <template>
     <div>
         <h4>{{ $t("Certificate Info") }}</h4>
-        {{ $t("Certificate Chain") }}:
+        <div class="d-flex w-100">
-        <div
+            <div class="d-flex flex-column align-items-end w-50">
-            v-if="valid"
+                <div class="py-1">
-            class="rounded d-inline-flex ms-2 text-white tag-valid"
+                    {{ $t("Certificate Chain") }}:
-        >
+                </div>
-            {{ $t("Valid") }}
+                <div v-if="tlsInfo.authorizationError" class="py-1">
+                    {{ $t("Reason") }}:
+                </div>
+            </div>
+            <div class="d-flex flex-column align-items-start w-50">
+                <div
+                    v-if="tlsInfo.valid"
+                    class="rounded d-inline-flex ms-2 text-white tag-valid"
+                >
+                    {{ $t("Valid") }}
+                </div>
+                <div
+                    v-if="!tlsInfo.valid"
+                    class="rounded d-inline-flex ms-2 text-white tag-invalid"
+                >
+                    {{ $t("Invalid") }}
+                </div>
+                <div v-if="tlsInfo.authorizationError" class="ms-2 pt-2 pb-1">
+                    {{ tlsInfo.authorizationError }}
+                </div>
+            </div>
         </div>
-        <div
+        <certificate-info-row :cert="tlsInfo.certInfo" />
-            v-if="!valid"
-            class="rounded d-inline-flex ms-2 text-white tag-invalid"
-        >
-            {{ $t("Invalid") }}
-        </div>
-        <certificate-info-row :cert="certInfo" />
     </div>
 </template>
 
@@ -25,16 +39,11 @@ export default {
         CertificateInfoRow,
     },
     props: {
-        /** Object representing certificate */
+        /** Object representing TLS information */
-        certInfo: {
+        tlsInfo: {
             type: Object,
             required: true,
         },
-        /** Is the TLS certificate valid? */
-        valid: {
-            type: Boolean,
-            required: true,
-        },
     },
 };
 </script>

src/pages/Details.vue

@@ -166,7 +166,7 @@
                 <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
                     <div class="row">
                         <div class="col">
-                            <certificate-info :certInfo="tlsInfo.certInfo" :valid="tlsInfo.valid" />
+                            <certificate-info :tlsInfo="tlsInfo" />
                         </div>
                     </div>
                 </div>