When Wildcard Certificates Break Your SSL Dashboard: A Debugging Journey

I had been running my SSL certificate monitoring dashboard for years without any issues, you can read that article here

The script collected certificate data, generated a clean HTML dashboard, and everything seemed perfect. Until I noticed something odd – certain certificates weren't appearing in my dashboard at all.

After some investigation, I discovered the culprit: wildcard certificates with names like *.pokebearwithsticks.com were completely invisible in the generated HTML. What should have been a simple display issue turned into a frustrating debugging session that taught me valuable lessons about HTML escaping and the dangers of special characters.

The Original Broken Code

My original script was generating HTML like this:

def generate_html(self):
    html = f'''<!DOCTYPE html>
    <html>
    ...
    for cert in sorted_certificates:
        html += f'''
            <tr class="cert-row" data-status="{cert['status']}">
                <td>{cert['hostname']}</td>
                <td>{cert['common_name']}</td>  <!-- This was the problem! -->
                <td>{cert['issuer']}</td>
                <td>{cert['expiry_date']}</td>
                <td>{cert['days_until_expiry']}</td>
                <td>
                    <span class="status-badge {cert['status']}">
                        {cert['status']}
                    </span>
                </td>
            </tr>'''

The issue was subtle but critical. When the script encountered a certificate with a common name like *.pokebearwithsticks.com, it was injecting that raw asterisk character directly into the HTML. The browser was interpreting the * as part of an incomplete HTML tag or comment, causing the entire table row to be rendered incorrectly or not at all.

The First Failed Attempt: Column Width Obsession

Initially, I misdiagnosed the problem entirely. I could see that some certificates were missing, and when they did appear, the status badges were being cut off, showing "vali d" instead of "valid". I became obsessed with fixing the column widths:

/* My frustrated attempts at fixing column widths */
th:nth-child(6), td:nth-child(6) { width: 15%; }
/* Then trying... */
th:nth-child(6), td:nth-child(6) { width: 22%; min-width: 120px; }
/* Then desperately trying... */
th:nth-child(6), td:nth-child(6) { width: 34%; } /* Even wider! */

I spent way too much time adjusting CSS, adding !important declarations, and even making the entire container wider. None of this addressed the real issue – the wildcard certificates still weren't appearing because the HTML was fundamentally broken.

HTML Escaping

The breakthrough came when I realized I needed to properly escape all HTML content. The asterisk in *.pokebearwithsticks.com was being treated as a special character by the browser. The solution was embarrassingly simple:

import html

def html_escape(self, text):
    """Properly escape HTML characters including wildcards"""
    if text is None:
        return ''
    return html.escape(str(text))

Then updating the HTML generation:

<td>{self.html_escape(cert['hostname'])}</td>
<td>{self.html_escape(cert['common_name'])}{wildcard_indicator}</td>
<td>{self.html_escape(cert['issuer'])}</td>

Adding Visual Indicators for Wildcard Certificates

Once the basic display was working, I wanted to make wildcard certificates easily identifiable:

# Check if it's a wildcard certificate
is_wildcard = cert['common_name'].startswith('*.')
wildcard_indicator = '<span class="wildcard-indicator">WILDCARD</span>' 
if is_wildcard else ''

With accompanying CSS:

.wildcard-indicator {
    background-color: #ddd6fe;
    color: #7c3aed;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

This adds a small purple "wildcard" badge next to any certificate with a wildcard common name.

Issues : Status Badges

Even after fixing the wildcard display issue, I was still battling with status badges being cut off. The text "valid" kept wrapping to show "vali d" on two lines. After multiple failed attempts with CSS, I realized the fundamental problem: text badges are inherently fragile.

The solution was to ditch text badges entirely and use colored icons:

# Determine status icon using HTML entities
if cert['status'] == 'valid':
    status_icon = '&#10003;'  # checkmark
elif cert['status'] == 'expiring':
    status_icon = '&#9888;'   # warning sign
else:  # expired
    status_icon = '&#10060;'  # cross mark

With clean CSS:

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.75rem;
    color: white;
}

.status-icon.valid {
    background-color: #22c55e;  /* Green */
}

.status-icon.expiring {
    background-color: #f59e0b;  /* Amber */
}

.status-icon.expired {
    background-color: #ef4444;  /* Red */
}

This will be display wildcard certificates with the relevant tag to tell you where the certificates have been detected:

Wildcard Certificates Are a Security Problem

You should not really be using wildcard certificates, but for some/many organizations having legacy requirements override security test practices.

While debugging this issue, it reminded me why I'm increasingly uncomfortable with wildcard certificates in production environments. The *.pokebearwithsticks.com certificate that broke my dashboard is actually representative of a much larger security problem.

When Wildcard Certificates Break Your SSL Dashboard: A Debugging Journey

نموذج الاتصال