<!doctype html>

<html lang="en" data-theme="dark">

<head>

<script>

// Dark is the only theme. Pin it before first paint, and overwrite any

// 'light' a visitor stored back when the header carried a theme toggle.

(function () {

try {

localStorage.setItem('theme', 'dark');

} catch (e) {}

document.documentElement.setAttribute('data-theme', 'dark');

})();

</script>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta

name="description"

content="Parses the real X.509 certificate a site presents, walks the chain to a root trusted before you arrived, and separates the four things the TLS 1.3 padlock proves from the four it does not."

/>

<!-- Social meta -->

<meta property="og:type" content="website" />

<meta property="og:title" content="HTTPS Padlock — crypto-lab" />

<meta

property="og:description"

content="Real X.509 parsing and chain walking in the browser: what the padlock proves about a connection and a name, and what it never proved about the people behind the name."

/>

<meta property="og:url" content="https://systemslibrarian.github.io/crypto-lab-https-padlock/" />

<meta name="twitter:card" content="summary" />

<meta name="twitter:title" content="HTTPS Padlock — crypto-lab" />

<meta

name="twitter:description"

content="Real X.509 parsing and chain walking in the browser: what the padlock proves about a connection and a name, and what it never proved about the people behind the name."

/>

<!-- Assigned centrally from the catalog on 2026-10-04: a globe, which no

other lab in the fleet uses. The padlock glyphs this lab is named for

were already taken several times over, which is the collision this

comment used to warn about. Master template 3.4. -->

<link rel="icon" type="image/svg+xml"

href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>%F0%9F%8C%90</text></svg>" />

<title>HTTPS Padlock — crypto-lab</title>

</head>

<body>

<style>

.cl-topbar{

/* The bar is always dark (#0b1512) regardless of page theme, so header

text must always be light. Mix each lab's --accent toward near-white so

the hue still tints the brand but contrast stays >=4.5:1 on the bar even

when a lab's accent is dark (e.g. a light-theme #1a56db). */

--cl-ink: color-mix(in srgb, var(--accent, #35d6bb) 60%, #eafff8);

display:flex;align-items:center;justify-content:space-between;gap:1rem;

padding:.7rem clamp(.9rem,3vw,2rem);

background:#0b1512;

border-bottom:1px solid color-mix(in srgb, var(--accent, #35d6bb) 22%, transparent);

font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

position:sticky;top:0;z-index:1000;

}

.cl-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}

.cl-badge{

flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;

border:1.5px solid var(--accent, #35d6bb);border-radius:10px;

color:var(--cl-ink);font-weight:700;font-size:.95rem;letter-spacing:.05em;

}

.cl-brand-text{display:flex;flex-direction:column;line-height:1.15}

.cl-title{color:#eafff8;font-weight:700;font-size:1.05rem;letter-spacing:.12em}

.cl-sub{color:#5e8b80;font-size:.72rem;letter-spacing:.04em}

.cl-actions{display:flex;align-items:center;gap:.5rem}

.cl-btn{

display:inline-flex;align-items:center;gap:.4rem;

padding:.5rem .85rem;border-radius:10px;

/* WCAG 1.4.11. No fill, so this border is the whole control boundary, and

mixing the PAGE's --accent ties the ratio to each lab's palette: all 156

labs using this form fail, and for dark accents 3:1 is unreachable at any

mix percentage. --cl-ink already mixes toward the bar's near-white ink,

so mixing it is accent-independent. */

border:1px solid color-mix(in srgb, var(--cl-ink) 70%, transparent);

background:transparent;color:var(--cl-ink);cursor:pointer;

font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.1em;

text-transform:uppercase;text-decoration:none;transition:background .15s,border-color .15s,color .15s;

}

.cl-btn:hover{

background:color-mix(in srgb, var(--accent, #35d6bb) 14%, transparent);

border-color:var(--accent, #35d6bb);color:#eafff8;

}

.cl-btn svg{width:15px;height:15px}

.cl-icon{padding:.5rem .6rem;font-size:.95rem}

/* Skip-to-content link: first focusable element so keyboard users can bypass

this sticky header (WCAG 2.4.1). Hidden until focused. Fixed light-on-dark

pair (not --accent, which can be a dark hue on some labs) keeps contrast AA. */

.cl-skip-link{

position:absolute;left:.5rem;top:-3rem;z-index:1001;

padding:.55rem 1rem;border-radius:0 0 10px 10px;

background:#eafff8;color:#0b1512;

font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

font-weight:700;font-size:.8rem;letter-spacing:.04em;text-decoration:none;

transition:top .15s ease;

}

.cl-skip-link:focus{top:0;outline:2px solid var(--accent,#35d6bb);outline-offset:2px;}

/* Dark is the only theme, so hide any in-page theme toggle a lab still

ships. The element stays in the DOM so the lab's theme JS keeps working. */

body :is(#theme-toggle,#themeToggle,.theme-toggle,.theme-toggle-btn,[data-theme-toggle]){display:none!important}

@media(max-width:560px){

.cl-sub{display:none}

.cl-btn span{display:none}

.cl-btn svg{margin:0}

}

/* cl-a11y-touch: WCAG 2.5.5 target size on touch pointers only, so the

bar keeps its density on desktop where a mouse is precise. */

@media (pointer: coarse){

/* Height is free -- it costs no horizontal room, so every touch target

gets the full 44px vertically. */

.cl-btn,.cl-icon{min-height:44px}

}

/* Width only where the bar can afford it. Below ~380px, three 44px-wide

buttons plus the brand overflow the viewport, and forcing horizontal

scroll would trade a 2.5.5 (AAA) gain for a 1.4.10 reflow failure.

The buttons stay ~31px wide there, comfortably over the 24px 2.5.8 (AA) floor. */

@media (pointer: coarse) and (min-width: 380px){

.cl-btn,.cl-icon{min-width:44px}

}

</style>

<a class="cl-skip-link" href="#app">Skip to content</a>

<header class="cl-topbar" role="banner" aria-label="Crypto Lab">

<a class="cl-brand" href="https://crypto-lab.systemslibrarian.dev/" aria-label="Crypto Lab home">

<span class="cl-badge">CL</span>

<span class="cl-brand-text">

<span class="cl-title">CRYPTO LAB</span>

<span class="cl-sub">systemslibrarian.dev</span>

</span>

</a>

<nav class="cl-actions" aria-label="Crypto Lab navigation">

<a class="cl-btn" href="https://crypto-lab.systemslibrarian.dev/" aria-label="Crypto Lab menu">

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>

<span>Menu</span>

</a>

<a class="cl-btn" href="https://github.com/systemslibrarian/crypto-lab-https-padlock" target="_blank" rel="noopener" aria-label="View this project on GitHub">

<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.6v-2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7 0-.7 0-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 0 1 6 0C17.3 5 18.3 5.3 18.3 5.3c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .4.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"/></svg>

<span>GitHub</span>

</a>

</nav>

</header>

<script>

(function () {

// A page may have only one banner landmark. This shared site header is it;

// demote any banner a lab also declared on its own page header (explicit

// role="banner", or an implicit <header> child of <body>) so landmarks stay unique.

function dedupeBanner() {

var bar = document.querySelector('.cl-topbar');

if (!bar) return;

document.querySelectorAll('[role="banner"]').forEach(function (el) {

if (el !== bar) el.setAttribute('role', 'group');

});

Array.prototype.forEach.call(document.querySelectorAll('header'), function (el) {

if (el === bar || el.hasAttribute('role')) return;

// <header> only implies banner when it is NOT scoped inside sectioning content.

// Checking closest() catches heroes nested in #app, which body.children missed.

if (el.closest('main, article, aside, nav, section')) return;

el.setAttribute('role', 'group');

});

}

if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', dedupeBanner);

else dedupeBanner();

})();

</script>

<div id="app" tabindex="-1">

<div class="cl-hero">

<div class="cl-hero-main">

<h1 class="cl-hero-title">HTTPS Padlock</h1>

<p class="cl-hero-sub">X.509 · TLS 1.3 · what the padlock means</p>

<p class="cl-hero-desc">

Parses the certificate a real site presented, walks the chain to a root that was

trusted before you arrived, and lets you break each check in turn — then shows you

a flawless certificate for a name that is not your bank.

</p>

</div>

<aside class="cl-hero-why" aria-label="Why it matters">

<span class="cl-hero-why-label">WHY IT MATTERS</span>

<p class="cl-hero-why-text">

Almost everyone has been told the padlock means a site is safe. It does not say that,

and it never did. Knowing exactly where its promises stop is the difference between

reading a certificate and trusting a logo.

</p>

</aside>

</div>

<main>

<!-- CORE: everything a newcomer needs, in the order they need it.

Two sentences, then the action, then the consequence. The depth

sections below are one click each and nothing above depends on

them. -->

<section id="intro" class="card intro" aria-labelledby="intro-h"></section>

<section id="stage" class="card" aria-labelledby="stage-h"></section>

<section id="controls" class="card" aria-labelledby="controls-h"></section>

<section id="padlock" class="card" aria-labelledby="padlock-h"></section>

<section id="promises" class="card" aria-labelledby="promises-h"></section>

<!-- The four non-promises and the negative claim stay in the CORE, not

behind a disclosure: master template 4.1d requires the limitation

to be visible in the fixture state, and it is half the lesson. -->

<section id="nonpromises" class="card" aria-labelledby="nonpromises-h"></section>

<section id="quiz" class="card" aria-labelledby="quiz-h"></section>

<!-- DEPTH: the real mechanism, for anyone who wants it. -->

<section id="depth" class="card" aria-labelledby="depth-h">

<h2 id="depth-h">Look closer</h2>

<p class="lede">Everything above is computed from these. Open whichever you want; none of it is needed to follow the lesson.</p>

<div id="chain"></div>

<div id="wire"></div>

<div id="scope"></div>

</section>

<section id="next" class="card" aria-labelledby="next-h"></section>

</main>

<footer class="scripture-footer">

<p class="footer-links">

Related demos:

<a href="https://systemslibrarian.github.io/crypto-lab-chain-of-trust/" target="_blank" rel="noopener noreferrer">crypto-lab-chain-of-trust</a> ·

<a href="https://systemslibrarian.github.io/crypto-lab-tls-handshake/" target="_blank" rel="noopener noreferrer">crypto-lab-tls-handshake</a> ·

<a href="https://systemslibrarian.github.io/crypto-lab-blind-hello/" target="_blank" rel="noopener noreferrer">crypto-lab-blind-hello</a> ·

<a href="https://systemslibrarian.github.io/crypto-lab-downgrade-wire/" target="_blank" rel="noopener noreferrer">crypto-lab-downgrade-wire</a> ·

<a href="https://systemslibrarian.github.io/crypto-lab-dnssec-chain/" target="_blank" rel="noopener noreferrer">crypto-lab-dnssec-chain</a>

</p>

<p>So whether you eat or drink or whatever you do, do it all for the glory of God. — 1 Corinthians 10:31</p>

</footer>

</div>

<script type="module" src="/src/main.ts"></script>

</body>

</html>