.. หัวเรื่อง: ตัวถอดรหัสใบรับรอง SSL/TLS
.. slug: ssl-certificate-decoder
.. วันที่: 27-03-2026 12:00:00 UTC
.. แท็ก: ระบบเครือข่าย, SSL, TLS, ใบรับรอง, x509, ความปลอดภัย, เครื่องมือ, ผู้ดูแลระบบ
..หมวดหมู่ : เครื่องมือ
.. ลิงค์:
.. คำอธิบาย: ถอดรหัสใบรับรอง SSL/TLS X.509 จากรูปแบบ PEM แยก SAN, หน้าต่างความถูกต้อง, ห่วงโซ่ผู้ออก, ประเภทและขนาดของคีย์, ความสามารถในการเข้ารหัส และจุดสิ้นสุด OCSP การประมวลผลทั้งหมดเป็นแบบท้องถิ่น ไม่มีข้อมูลออกจากเบราว์เซอร์ของคุณ
.. ประเภท: ข้อความ
<script src="/assets/js/forge.min.js"></script>
<style>
/* ── CANONICAL DESIGN SYSTEM ──────────────────────────────────────────────── */
.calc-container { max-width: 900px; margin: 20px auto; padding: 20px; }
.calc-header { margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); color: white; }
.calc-header h2 { margin-top: 0; color: white; font-size: 28px; margin-bottom: 10px; }
.calc-header p  { margin: 10px 0; opacity: 0.95; font-size: 15px; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 20px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { margin-bottom: 8px; font-weight: 600; color: rgba(255,255,255,0.95); font-size: 14px; }
.input-group input, .input-group select, .input-group textarea { padding: 14px; font-size: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; background: rgba(255,255,255,0.95); transition: all 0.3s ease; box-sizing: border-box; font-family: inherit; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: #4CAF50; background: white; box-shadow: 0 0 0 3px rgba(76,175,80,0.1); }
.input-group textarea { resize: vertical; min-height: 80px; font-family: 'Courier New', monospace; font-size: 13px; }
.button-container { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.calc-button { padding: 14px 35px; font-size: 16px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.calc-button:hover  { background: #45a049; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.calc-button:active { background: #3d8b40; transform: translateY(0); }
.calc-button.secondary { background: rgba(255,255,255,0.2); }
.calc-button.secondary:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.result-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.result-section:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.section-header { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; }
.section-content { padding: 20px; background: #fafafa; }
@media (max-width: 768px) { .input-grid { grid-template-columns: 1fr; } .calc-header h2 { font-size: 22px; } .calc-container { padding: 10px; } }
/* Page-specific */
.cert-card { background: white; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.cert-card-header { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 12px 16px; font-weight: bold; font-size: 15px; }
.cert-card-body { padding: 16px; }
.cert-field { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.cert-field:last-child { border-bottom: none; }
.cert-key { font-weight: bold; color: #555; width: 180px; flex-shrink: 0; }
.cert-val { color: #222; font-family: 'Courier New', monospace; word-break: break-all; }
.sans-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.san-chip { background: #e8f5e9; color: #2e7d32; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-family: 'Courier New', monospace; }
.validity-bar { background: #e0e0e0; border-radius: 4px; height: 8px; overflow: hidden; margin-top: 6px; }
.validity-fill { background: #4CAF50; height: 100%; }
.validity-fill.expired { background: #e53935; }
.validity-fill.expiring { background: #fb8c00; }
.how-to-section { background: #f0f8ff; border: 1px solid #b8d8ee; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; }
.how-to-section summary { font-weight: 600; color: #1a3a5c; cursor: pointer; font-size: 14px; }
.how-to-section summary:hover { color: #2d6a8f; }
.how-to-body { margin-top: 12px; }
.how-to-body pre { background: #1e1e2e; color: #cdd6f4; padding: 10px 14px; border-radius: 6px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; margin: 6px 0 12px; }
.how-to-body ol, .how-to-body ul { margin: 4px 0 12px 20px; }
.how-to-body p { margin: 6px 0; }

/* Page-specific styling for certificate display */
.cert-display { margin-top: 16px; }
.cert-subject { font-size: 1.1rem; font-weight: 700; color: #1a3a5c; word-break: break-all; margin-bottom: 8px; }
.badge-ca { background: #4CAF50; color: white; padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; display: inline-block; margin-right: 6px; }
.badge-end-entity { background: #2196F3; color: white; padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; display: inline-block; margin-right: 6px; }
.chain-index { color: #666; font-size: 0.85rem; font-weight: 400; display: inline-block; }
.validity-section { margin-bottom: 16px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.validity-label { font-size: 0.85rem; font-weight: 600; color: #555; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.validity-dates { display: flex; justify-content: space-between; font-size: 0.82rem; color: #666; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.validity-status { font-size: 0.9rem; font-weight: 600; margin-top: 4px; }
.validity-status.ok { color: #4CAF50; }
.validity-status.warn { color: #fb8c00; }
.validity-status.expired { color: #e53935; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 16px; }
@media (max-width: 600px) { .fields-grid { grid-template-columns: 1fr; } }
.field-row { display: flex; flex-direction: column; gap: 2px; }
.field-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: #888; font-weight: 600; }
.field-value { font-size: 0.92rem; color: #222; word-break: break-all; }
.field-value.mono { font-family: 'Courier New', monospace; font-size: 0.82rem; color: #333; }
.field-value.weak { color: #e53935; font-weight: 600; }
.sans-section { margin-bottom: 16px; }
.sans-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: #888; font-weight: 600; margin-bottom: 8px; }
.ocsp-section { border-top: 1px solid #f0f0f0; padding-top: 14px; margin-top: 4px; }
.ocsp-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: #888; font-weight: 600; margin-bottom: 8px; }
.ocsp-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.ocsp-type { font-size: 0.8rem; font-weight: 600; color: #555; min-width: 90px; flex-shrink: 0; }
.ocsp-url { font-family: 'Courier New', monospace; font-size: 0.82rem; color: #1976D2; word-break: break-all; }
.ocsp-note { background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; padding: 10px 14px; font-size: 0.82rem; color: #5d4037; margin-top: 10px; font-family: 'Courier New', monospace; }
.no-sans { font-size: 0.88rem; color: #999; font-style: italic; }
.error-box { background: #ffebee; border: 1px solid #ef5350; border-radius: 8px; padding: 16px 20px; color: #c62828; margin-bottom: 20px; font-weight: 500; }
.results-header { font-size: 1.1rem; font-weight: 600; color: #1a3a5c; margin-bottom: 16px; }
</style>
<div class="calc-container">
<details class="how-to-section">
<summary>วิธีรับใบรับรอง PEM เพื่อทดสอบ</summary>
<div class="how-to-body">
<p><strong>จากบรรทัดคำสั่ง (Linux/macOS):</strong></p>
<pre>openssl s_client -connect example.com:443 &lt;/dev/null 2&gt;/dev/null \
  | openssl x509 -outform PEM</pre>
<p>ซึ่งจะพิมพ์ใบรับรอง leaf สำหรับโฮสต์ HTTPS ใดๆ วางให้เต็ม<code>-----BEGIN CERTIFICATE-----</code> … <code>-----END CERTIFICATE-----</code>บล็อกด้านบน</p>
<p><strong>รับโซ่เต็ม (ลีฟ + ตัวกลาง):</strong></p>
<pre>openssl s_client -showcerts -connect example.com:443 &lt;/dev/null 2&gt;/dev/null \
  | sed -n '/-----BEGIN CERTIFICATE-----/,/-----END CERTIFICATE-----/p'</pre>
<p><strong>จาก Chrome / Edge:</strong></p>
<ol>
<li>นำทางไปยังไซต์ HTTPS ใดก็ได้ คลิกไอคอนแม่กุญแจ →<em>การเชื่อมต่อมีความปลอดภัย</em> → <em>ใบรับรองถูกต้อง</em>.</li>
<li>ในโปรแกรมดูใบรับรอง คลิก<em>รายละเอียด</em>แท็บ →<em>ส่งออก…</em></li>
<li>บันทึกเป็น<em>พีอีเอ็ม (โซ่)</em>รูปแบบ เปิดในโปรแกรมแก้ไขข้อความแล้ววางที่นี่</li>
</ol>
<p><strong>จากไฟร์ฟอกซ์:</strong></p>
<ol>
<li>คลิกที่แม่กุญแจ →<em>การเชื่อมต่อที่ปลอดภัย</em> → <em>ข้อมูลเพิ่มเติม</em> → <em>ดูใบรับรอง</em>.</li>
<li>ในแท็บใหม่ ให้คลิก<em>PEM (ใบรับรอง)</em>เพื่อดาวน์โหลด จากนั้นวางเนื้อหาที่นี่</li>
</ol>
<p><strong>ใบรับรอง CA สาธารณะที่รู้จักกันดี (สำหรับการทดสอบอย่างรวดเร็ว):</strong></p>
<ul>
<li>มาเข้ารหัสรูทกัน:<code>curl https://letsencrypt.org/certs/isrgrootx1.pem</code></li>
<li>หรือคลิก<strong>โหลดตัวอย่าง</strong>ด้านล่างเพื่อใช้ใบรับรอง ISRG Root X1</li>
</ul>
</div>
</details>
<div class="calc-header">
<h2>ตัวถอดรหัสใบรับรอง SSL / TLS</h2>
<p>วางใบรับรอง PEM หรือห่วงโซ่เพื่อถอดรหัสช่อง X.509, ความถูกต้อง, SAN และข้อมูลสำคัญ</p>
<div class="input-grid">
<div class="input-group" style="grid-column:1/-1">
<label>ใบรับรอง PEM (ใบรับรองเดี่ยวหรือห่วงโซ่เต็ม)</label>
<textarea autocomplete="off" id="pem-input" placeholder="-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----" rows="7" spellcheck="false"></textarea>
</div>
</div>
<div class="button-container">
<button class="calc-button" onclick="runDecode()">ถอดรหัส</button>
<button class="calc-button secondary" onclick="loadSample()">โหลดตัวอย่าง</button>
<button class="calc-button secondary" onclick="clearAll()">ชัดเจน</button>
</div>
</div>
<div class="result-section" id="results-area-wrapper" style="display:none">
<div class="section-header">ใบรับรองที่ถอดรหัส</div>
<div class="section-content" id="results-area"></div>
</div>
</div>
<script>
'use strict';

// -------------------------------------------------------
// OID friendly names
// -------------------------------------------------------
const OID_NAMES = {
    '1.2.840.113549.1.1.11': 'SHA-256 with RSA',
    '1.2.840.113549.1.1.12': 'SHA-384 with RSA',
    '1.2.840.113549.1.1.13': 'SHA-512 with RSA',
    '1.2.840.10045.4.3.2':   'ECDSA with SHA-256',
    '1.2.840.10045.4.3.3':   'ECDSA with SHA-384',
    '1.2.840.10045.4.3.4':   'ECDSA with SHA-512',
    '1.2.840.113549.1.1.5':  'SHA-1 with RSA (weak)',
};

// -------------------------------------------------------
// HTML escape helper — used on ALL user-derived values
// -------------------------------------------------------
function esc(str) {
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

// -------------------------------------------------------
// Core decode functions
// -------------------------------------------------------
function decodePEM(pemText) {
    // Handle certificate chains — split on -----END CERTIFICATE-----
    const certs = [];
    const regex = /-----BEGIN CERTIFICATE-----[\s\S]+?-----END CERTIFICATE-----/g;
    let match;
    while ((match = regex.exec(pemText)) !== null) {
        try {
            const cert = forge.pki.certificateFromPem(match[0]);
            certs.push(cert);
        } catch (e) {
            // skip malformed
        }
    }
    return certs;
}

function extractCertInfo(cert) {
    const now = new Date();
    const notBefore = cert.validity.notBefore;
    const notAfter = cert.validity.notAfter;
    const daysLeft = Math.floor((notAfter - now) / (1000 * 60 * 60 * 24));

    // Subject Alternative Names
    const sanExt = cert.extensions?.find(e => e.name === 'subjectAltName');
    const sans = sanExt ? (sanExt.altNames || []).map(a => {
        if (a.type === 2) return `DNS: ${a.value}`;
        if (a.type === 7) return `IP: ${a.ip}`;
        if (a.type === 1) return `Email: ${a.value}`;
        return `Other(${a.type}): ${a.value}`;
    }) : [];

    // Key info
    const pub = cert.publicKey;
    let keyInfo = 'Unknown';
    if (pub && pub.n) keyInfo = `RSA ${pub.n.bitLength()} bit`;
    else if (pub && pub.curve) keyInfo = `EC ${pub.curve}`;

    // Authority Info Access (OCSP)
    const aiaExt = cert.extensions?.find(e => e.name === 'authorityInfoAccess');
    let ocspUrl = null, caIssuerUrl = null;
    if (aiaExt && typeof aiaExt.value === 'string') {
        aiaExt.value.split('\n').forEach(line => {
            if (line.includes('OCSP')) ocspUrl = line.split('URI:').pop().trim();
            if (line.includes('CA Issuers')) caIssuerUrl = line.split('URI:').pop().trim();
        });
    }

    // Basic constraints
    const bcExt = cert.extensions?.find(e => e.name === 'basicConstraints');
    const isCA = bcExt && bcExt.cA;

    return {
        subject: cert.subject.getField('CN')?.value || (cert.subject.attributes || []).map(a => `${a.shortName}=${a.value}`).join(', '),
        issuer: cert.issuer.getField('CN')?.value || (cert.issuer.attributes || []).map(a => `${a.shortName}=${a.value}`).join(', '),
        notBefore: notBefore.toISOString(),
        notAfter: notAfter.toISOString(),
        daysLeft,
        expired: daysLeft < 0,
        expiringSoon: daysLeft >= 0 && daysLeft < 30,
        sans,
        keyInfo,
        serialNumber: cert.serialNumber,
        signatureAlgorithm: cert.siginfo?.algorithmOid || '',
        isCA,
        ocspUrl,
        caIssuerUrl,
        fingerprint: forge.md.sha256.create().update(forge.asn1.toDer(forge.pki.certificateToAsn1(cert)).getBytes()).digest().toHex().match(/.{2}/g).join(':').toUpperCase(),
    };
}

// -------------------------------------------------------
// Validity bar helpers
// -------------------------------------------------------
function validityBarColor(info) {
    if (info.expired) return 'red';
    if (info.expiringSoon) return 'yellow';
    return 'green';
}

function validityBarWidth(info) {
    if (info.expired) return 0;
    // Show progress as fraction of cert lifetime
    const notBefore = new Date(info.notBefore);
    const notAfter = new Date(info.notAfter);
    const total = notAfter - notBefore;
    const now = new Date();
    const remaining = notAfter - now;
    if (total <= 0) return 0;
    return Math.min(100, Math.max(0, Math.round((remaining / total) * 100)));
}

function validityStatusText(info) {
    if (info.expired) {
        const daysAgo = Math.abs(info.daysLeft);
        return { cls: 'expired', text: `EXPIRED ${daysAgo} day${daysAgo !== 1 ? 's' : ''} ago` };
    }
    if (info.expiringSoon) {
        return { cls: 'warn', text: `Expiring soon — ${info.daysLeft} day${info.daysLeft !== 1 ? 's' : ''} remaining` };
    }
    return { cls: 'ok', text: `${info.daysLeft} days remaining` };
}

// -------------------------------------------------------
// Signature algorithm display
// -------------------------------------------------------
function sigAlgDisplay(oid) {
    const name = OID_NAMES[oid];
    if (name) {
        const isWeak = name.includes('weak') || name.includes('SHA-1');
        return { text: name, weak: isWeak };
    }
    return { text: oid, weak: false };
}

// -------------------------------------------------------
// SAN chip rendering
// -------------------------------------------------------
function renderSANChip(san) {
    let cls = 'san-chip';
    if (san.startsWith('IP:')) cls += ' ip';
    else if (san.startsWith('Email:')) cls += ' email';
    return `<span class="${cls}">${esc(san)}</span>`;
}

// -------------------------------------------------------
// Render a single certificate card
// -------------------------------------------------------
function renderCertCard(info, idx, total) {
    const barColor = validityBarColor(info);
    const barWidth = validityBarWidth(info);
    const status = validityStatusText(info);
    const sigAlg = sigAlgDisplay(info.signatureAlgorithm);

    const chainLabel = total > 1
        ? `<span class="chain-index">(${idx + 1} of ${total} in chain)</span>`
        : '';

    const badge = info.isCA
        ? `<span class="badge-ca">CA Certificate</span>`
        : `<span class="badge-end-entity">End-Entity</span>`;

    const sanHtml = info.sans.length > 0
        ? `<div class="sans-section">
               <div class="sans-title">Subject Alternative Names (${info.sans.length})</div>
               <div class="sans-chips">${info.sans.map(renderSANChip).join('')}</div>
           </div>`
        : `<div class="sans-section"><div class="sans-title">Subject Alternative Names</div><div class="no-sans">None found in certificate</div></div>`;

    const ocspHtml = (info.ocspUrl || info.caIssuerUrl)
        ? `<div class="ocsp-section">
               <div class="ocsp-title">Authority Info Access</div>
               ${info.ocspUrl ? `<div class="ocsp-row"><span class="ocsp-type">OCSP:</span><span class="ocsp-url">${esc(info.ocspUrl)}</span></div>` : ''}
               ${info.caIssuerUrl ? `<div class="ocsp-row"><span class="ocsp-type">CA Issuers:</span><span class="ocsp-url">${esc(info.caIssuerUrl)}</span></div>` : ''}
               <div class="ocsp-note">Live OCSP checking not performed — CORS restriction.<br>Use: openssl ocsp -issuer chain.pem -cert cert.pem -url ${esc(info.ocspUrl || 'OCSP_URL')}</div>
           </div>`
        : '';

    const sigAlgValueClass = sigAlg.weak ? 'field-value weak' : 'field-value';

    return `
    <div class="cert-card">
        <div class="cert-card-header">
            <div class="cert-subject">${esc(info.subject)}</div>
            ${badge}
            ${chainLabel}
        </div>

        <div class="validity-section">
            <div class="validity-label">Validity Window</div>
            <div class="validity-bar-bg">
                <div class="validity-bar-fill ${barColor}" style="width:${barWidth}%"></div>
            </div>
            <div class="validity-dates">
                <span>Not Before: ${esc(info.notBefore)}</span>
                <span>Not After: ${esc(info.notAfter)}</span>
            </div>
            <div class="validity-status ${status.cls}">${esc(status.text)}</div>
        </div>

        <div class="fields-grid">
            <div class="field-row">
                <span class="field-label">Issuer</span>
                <span class="field-value">${esc(info.issuer)}</span>
            </div>
            <div class="field-row">
                <span class="field-label">Public Key</span>
                <span class="field-value">${esc(info.keyInfo)}</span>
            </div>
            <div class="field-row">
                <span class="field-label">Signature Algorithm</span>
                <span class="${sigAlgValueClass}">${esc(sigAlg.text)}</span>
            </div>
            <div class="field-row">
                <span class="field-label">Serial Number</span>
                <span class="field-value mono">${esc(info.serialNumber)}</span>
            </div>
            <div class="field-row" style="grid-column: 1 / -1;">
                <span class="field-label">SHA-256 Fingerprint</span>
                <span class="field-value mono">${esc(info.fingerprint)}</span>
            </div>
        </div>

        ${sanHtml}
        ${ocspHtml}
    </div>`;
}

// -------------------------------------------------------
// Main decode action
// -------------------------------------------------------
function runDecode() {
    const area = document.getElementById('results-area');
    const wrapper = document.getElementById('results-area-wrapper');
    const pemText = document.getElementById('pem-input').value;

    if (!pemText.trim()) {
        area.innerHTML = '<div class="error-box">Please paste a PEM-encoded certificate above.</div>';
        wrapper.style.display = '';
        return;
    }

    let certs;
    try {
        certs = decodePEM(pemText);
    } catch (e) {
        area.innerHTML = `<div class="error-box">Parse error: ${esc(String(e))}</div>`;
        wrapper.style.display = '';
        return;
    }

    if (!certs || certs.length === 0) {
        area.innerHTML = '<div class="error-box">No valid PEM certificates found. Make sure your input contains a complete -----BEGIN CERTIFICATE----- ... -----END CERTIFICATE----- block.</div>';
        wrapper.style.display = '';
        return;
    }

    const infos = certs.map(c => {
        try {
            return extractCertInfo(c);
        } catch (e) {
            return null;
        }
    }).filter(Boolean);

    if (infos.length === 0) {
        area.innerHTML = '<div class="error-box">Certificates were found but could not be decoded. They may be malformed.</div>';
        wrapper.style.display = '';
        return;
    }

    const header = `<div class="results-header">Decoded ${infos.length} certificate${infos.length !== 1 ? 's' : ''}</div>`;
    const cards = infos.map((info, i) => renderCertCard(info, i, infos.length)).join('');
    area.innerHTML = header + cards;
    wrapper.style.display = '';
}

// -------------------------------------------------------
// Clear
// -------------------------------------------------------
function clearAll() {
    document.getElementById('pem-input').value = '';
    document.getElementById('results-area').innerHTML = '';
    document.getElementById('results-area-wrapper').style.display = 'none';
}

// -------------------------------------------------------
// Sample certificate (Let's Encrypt-issued example, expired — safe for demo)
// -------------------------------------------------------
function loadSample() {
    // ISRG Root X1 — Let's Encrypt root CA certificate.
    // Source: https://letsencrypt.org/certs/isrgrootx1.pem
    // Public CA certificate — no private keys. Safe for browser-side demo use.
    // Valid 2015-06-04 to 2035-06-04. CA cert (basicConstraints: cA=true).
    const sample = `-----BEGIN CERTIFICATE-----
MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
-----END CERTIFICATE-----`;
    document.getElementById('pem-input').value = sample.trim();
    document.getElementById('results-area').innerHTML = '';
    document.getElementById('results-area-wrapper').style.display = 'none';
}

// -------------------------------------------------------
// Allow Enter key in textarea shortcut (Ctrl+Enter = Decode)
// -------------------------------------------------------
document.getElementById('pem-input').addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 'Enter') {
        runDecode();
    }
});
</script>