security.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GoblinPass - Security Overview</title>
    <link rel="stylesheet" href="assets/css/style.css?v=20260615-home-refresh" />
    <meta name="author" content="Carl Hatton">
    <meta name="copyright" content="Carl Hatton">
    <meta name="application-name" content="GoblinPass">
  </head>
  <body>
    <header class="site-header">
      <nav class="nav" aria-label="Main navigation">
        <a class="brand" href="index.html" aria-label="GoblinPass home">
          <span class="brand-mark" aria-hidden="true">GP</span>
          <span>GoblinPass</span>
        </a>
        <button id="navToggle" class="nav-toggle" type="button" aria-label="Open navigation menu" aria-controls="navLinks" aria-expanded="false">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <div id="navLinks" class="nav-links">
          <a class="nav-link" href="index.html">Home</a>
          <details class="nav-dropdown">
            <summary>Web Tools</summary>
            <div class="dropdown-menu">
              <a href="app.html">Stateless Gen 1.0</a>
              <a href="stateless-gen2.html">Stateless Gen 2.0 (Beta)</a>
              <a href="stateless-gen3.html">Stateless Gen 3.0 (Beta)</a>
              <a href="gen4/index.html">Stateless Gen 4.0</a>
              <a href="qr-pocket/index.html">QR Pocket</a>
              <a href="checker.html">Password Checker</a>
              <a href="backup-codes.html">Secure Notes</a>
              <a href="goblinpass/offline-id-logbook/">Offline ID Logbook</a>
              <a href="app.html#build-fork">Build Fork</a>
            </div>
          </details>
          <details class="nav-dropdown">
            <summary>Security</summary>
            <div class="dropdown-menu">
              <a href="security.html">Security Overview</a>
              <a href="security-model.html">Security Model</a>
              <a href="security.html#trusted-device-protection">Trusted Device Protection</a>
              <a href="security.html#security-key">Additional Secret</a>
              <a href="security.html#google-security-factor">Google Security Factor</a>
              <a href="security.html#yubikey-prf">YubiKey PRF</a>
              <a href="security.html#copy-password-only">Copy Password Only</a>
            </div>
          </details>
          <details class="nav-dropdown">
            <summary>Guide</summary>
            <div class="dropdown-menu">
              <a href="guide.html">Guide 1.0</a>
              <a href="guide2.html">Guide 2.0</a>
            </div>
          </details>
          <a class="nav-link" href="faq.html">FAQ</a>
          <details class="nav-dropdown">
            <summary>About Us</summary>
            <div class="dropdown-menu">
              <a href="about-me.html">About Me</a><a href="about.html">About GoblinPass</a>
              <a href="github.html">Why We Use GitHub</a>
              <a href="lesspass.html">GoblinPass vs LessPass</a>
            </div>
          </details>
          <a class="nav-link build-link" href="app.html">Stateless Gen 1.0</a>
        </div>
      </nav>
    </header>

    <main>
      <section class="section content-section how-section" aria-labelledby="security-title">
        <div class="section-intro">
          <p class="eyebrow">Security Overview</p>
          <h1 id="security-title">Unique passwords from repeatable private inputs</h1>
          <p>
            GoblinPass is stateless: the generated password is recreated from the
            same inputs instead of being stored in an online vault.
          </p>
        </div>
        <div class="formula-card security-formula-card" aria-label="Password generation formula">
          <span class="formula-ingredient">
            <i class="security-feature-icon small icon-trusted-device-vector" aria-hidden="true"></i>
            Website ID
          </span>
          <b>+</b>
          <span class="formula-ingredient">
            <i class="security-feature-icon small icon-additional-secret-vector" aria-hidden="true"></i>
            Master Password
          </span>
          <b>+</b>
          <span class="formula-ingredient">
            <i class="security-feature-icon small icon-yubikey-vector" aria-hidden="true"></i>
            Optional security factors
          </span>
          <b class="formula-line">=</b>
          <strong>
            <i class="status-dot protected" aria-hidden="true"></i>
            Generated Password
          </strong>
        </div>
        <p class="source-note">
          No passwords are stored on GoblinPass servers. Optional vault metadata
          can stay local on your device if you choose to use it.
        </p>
      </section>

      <section class="section content-section security-visual-section" aria-labelledby="security-visual-title">
        <div class="section-intro">
          <p class="eyebrow">Visual model</p>
          <h2 id="security-visual-title">What each tool is protecting</h2>
          <p>GoblinPass now separates the experience into clear local tools: generation, encrypted notes, and Security Map metadata.</p>
        </div>
        <div class="security-visual-grid">
          <article class="security-visual-card">
            <div class="feature-card-heading">
              <i class="legend-art icon-state-file-vector" aria-hidden="true"></i>
              <h3>Stateless Gen 2.0</h3>
            </div>
            <div class="security-mini-flow">
              <span>Website ID</span>
              <b>+</b>
              <span>Master Password</span>
              <b>+</b>
              <span>Unlock Factor</span>
              <b>=</b>
              <strong>Generated Password</strong>
            </div>
            <p>Gen 2.0 can auto-record map details, but the password itself is still regenerated rather than stored.</p>
          </article>
          <article class="security-visual-card">
            <div class="feature-card-heading">
              <i class="legend-art icon-yubikey-vector" aria-hidden="true"></i>
              <h3>Secure Notes</h3>
            </div>
            <div class="security-mini-flow">
              <span>Plain Notes</span>
              <b>+</b>
              <span>Security Key</span>
              <b>=</b>
              <strong>Encrypted Export</strong>
            </div>
            <p>Secure Notes are opened locally and exported as encrypted data for the same unlock method.</p>
          </article>
          <article class="security-visual-card">
            <div class="feature-card-heading">
              <span class="gen2-choice-mark biometric" aria-hidden="true"></span>
              <h3>Future unlocks</h3>
            </div>
            <div class="security-mini-flow three">
              <span>YubiKey</span>
              <span>Passkey</span>
              <span>Biometrics</span>
            </div>
            <p>YubiKey is working now. Passkey and biometric options are shown as planned routes rather than hidden surprises.</p>
          </article>
        </div>
      </section>

      <section class="section content-section" aria-labelledby="security-layers-title">
        <div class="section-intro">
          <p class="eyebrow">Optional protection layers</p>
          <h2 id="security-layers-title">Extra controls when you want them</h2>
          <p>
            These settings are optional. Existing passwords stay the same unless a
            user deliberately enables an extra factor and keeps using it.
          </p>
        </div>
        <div class="content-cards two-column security-icon-cards">
          <article id="trusted-device-protection">
            <div class="feature-card-heading">
              <i class="legend-art icon-trusted-device-vector" aria-hidden="true"></i>
              <h3>Trusted Device Protection</h3>
            </div>
            <p>
              Trusted Device Protection adds a hidden local key to password
              generation. Passwords created with it enabled cannot be recreated on
              another device unless the recovery key is restored.
            </p>
            <p>
              If the Trusted Device Key is lost and no recovery key was saved,
              passwords generated with this feature cannot be recovered.
            </p>
          </article>
          <article id="security-key">
            <div class="feature-card-heading">
              <i class="legend-art icon-additional-secret-vector" aria-hidden="true"></i>
              <h3>Additional Secret</h3>
            </div>
            <p>
              The optional Additional Secret is a second secret typed or selected by the
              user every time. GoblinPass does not store it, export it, or save it
              in the vault.
            </p>
            <p>
              The full Additional Secret is part of the deterministic password input, so
              partial prompts are not used.
            </p>
          </article>
          <article id="google-security-factor">
            <div class="feature-card-heading">
              <i class="legend-art icon-google-factor-vector" aria-hidden="true"></i>
              <h3>Google Security Factor</h3>
            </div>
            <p>
              When enabled, GoblinPass requires Google Sign-In and uses the stable
              Google account subject ID as an extra password ingredient. It does
              not use your email address.
            </p>
            <p>
              If this is enabled, the same Google account must be used to regenerate
              the same passwords.
            </p>
          </article>
          <article id="yubikey-prf">
            <div class="feature-card-heading">
              <i class="legend-art icon-yubikey-vector" aria-hidden="true"></i>
              <h3>YubiKey PRF</h3>
            </div>
            <p>
              YubiKey PRF mode uses a supported hardware key as part of the
              password recipe. This is not normal login-only two-factor
              authentication: the YubiKey must return PRF data before the same
              password can be regenerated.
            </p>
            <p>
              This feature is intended for Windows 11 with a YubiKey that supports
              PRF/hmac-secret. If the browser, operating system, or key does not
              return real PRF data, GoblinPass stops instead of silently falling
              back to the normal formula.
            </p>
            <a class="card-button" href="guide.html#yubikey-guide">YubiKey setup guide</a>
          </article>
          <article id="copy-password-only">
            <div class="feature-card-heading">
              <i class="legend-art icon-copy-only-vector" aria-hidden="true"></i>
              <h3>Copy Password Only</h3>
            </div>
            <p>
              Copy Password Only copies the generated password to the clipboard
              without displaying the full value on screen. This can reduce casual
              exposure, but it does not protect against a compromised device.
            </p>
          </article>
        </div>
      </section>

      <section class="section content-section google-factor-section" aria-labelledby="google-detail-title">
        <div class="section-intro">
          <p class="eyebrow">Google Security Factor</p>
          <h2 id="google-detail-title">Why Google sign-in can be a powerful extra layer</h2>
          <p>
            Google Security Factor is optional and separate from normal generation.
            When it is off, GoblinPass keeps the standard formula unchanged. When
            it is on, the signed-in Google account becomes another hidden ingredient
            in the password derivation process.
          </p>
        </div>
        <div class="content-cards two-column">
          <article>
            <h3>What sign-in looks like</h3>
            <div class="google-signin-preview">
              <i class="security-feature-icon icon-google-factor-vector" aria-hidden="true"></i>
              <div>
                <strong>Signed in with Google</strong>
                <span>Google Security Factor: Enabled</span>
                <small>Only basic identity is requested.</small>
              </div>
            </div>
            <p>
              GoblinPass uses Google Identity Services for basic sign-in. It uses a
              frontend Client ID only, with no client secret, because this is a
              static GitHub Pages app.
            </p>
          </article>
          <article>
            <h3>What is used</h3>
            <p>
              Google provides a stable account subject ID. GoblinPass can use that
              ID as hidden input material during password derivation. The email
              address is not used as the password ingredient, and the subject ID is
              not shown as a normal setting.
            </p>
            <p>
              This is derivation input, not a public password field. It should be
              thought of as an extra account-bound factor used alongside the Website
              ID, master password, and optional Additional Secret.
            </p>
          </article>
          <article>
            <h3>Why it helps</h3>
            <p>
              With Google Security Factor enabled, someone who only knows your
              master password and Website ID still should not be able to recreate
              the same passwords without also signing into the same Google account.
              In practice, that means an attacker would need to defeat your Google
              account protection as well as know your GoblinPass inputs.
            </p>
          </article>
          <article>
            <h3>Important limits</h3>
            <p>
              This does not make GoblinPass unhackable. A fully compromised device,
              malicious browser extension, phishing attack, or stolen Google session
              can still create risk. If you enable this feature, protect your Google
              account with a strong password and two-factor authentication.
            </p>
          </article>
        </div>
      </section>

    </main>

    <footer class="site-footer">
      <div class="footer-brand">
        <p><strong>GoblinPass</strong></p>
        <p>Tiny vault. Minimal secrets.</p>
        <p>Publicly viewable source. Local first. No password storage.</p>
      </div>
      <nav class="footer-links" aria-label="Footer navigation">
        <a href="index.html">Home</a>
        <a href="app.html">Web Tools</a>
        <a href="checker.html">Password Checker</a>
              <a href="backup-codes.html">Secure Notes</a>
              <a href="goblinpass/offline-id-logbook/">Offline ID Logbook</a>
        <a href="guide.html">Guide 1.0</a><a href="guide2.html">Guide 2.0</a>
        <a href="faq.html">FAQ</a>
        <a href="about.html">About Us</a>
      </nav>
      <p class="footer-attribution">GoblinPass &copy; 2026 Carl Hatton &middot; <a href="https://github.com/goblinpassuk/goblinpassuk.github.io/blob/main/LICENSE">License</a></p>
    </footer>

    <script src="assets/js/app.js"></script>
  </body>
</html>