terraform-cloudflare-tunnel…/workers/deny-page.js

/**
 * Page de refus d'accès — servie sur denied.tips-of-mine.org
 * Toutes les applications Access du repo pointent leur custom_deny_url ici.
 * Déployée par Terraform : Workers-Deny_Page.tf
 *
 * La page affiche une référence d'incident (le Ray ID Cloudflare de la
 * requête) : l'utilisateur la communique au support, qui peut retrouver la
 * requête exacte dans les logs Access/Gateway.
 */
addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

const SUPPORT_EMAIL = '[email protected]';
const TICKETING_URL = 'https://ticket.tips-of-mine.org'; // adapter à l'outil de ticketing

async function handleRequest(request) {
  const rayId = request.headers.get('cf-ray') || 'indisponible';
  const now = new Date().toLocaleString('fr-FR', { timeZone: 'Europe/Paris', dateStyle: 'long', timeStyle: 'medium' });

  const html = `<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <title>Acc&egrave;s refus&eacute; (403) &mdash; Tips-Of-Mine</title>
  <style>
    :root {
      color-scheme: light dark;
      --brand: #f6821f;
      --bg: #f3f4f6; --card: #ffffff; --text: #111827; --muted: #6b7280;
      --border: #e5e7eb; --detail-bg: #f9fafb;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #101318; --card: #1a1f27; --text: #e5e7eb; --muted: #9ca3af;
        --border: #2b3240; --detail-bg: #151a21;
      }
    }
    * { box-sizing: border-box; }
    body {
      margin: 0; min-height: 100vh; display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding: 1.5rem;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      background: var(--bg); color: var(--text);
    }
    .card {
      width: 100%; max-width: 560px; background: var(--card);
      border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,.10);
    }
    .brand {
      display: flex; align-items: center; gap: .75rem;
      padding: 1rem 1.75rem; border-bottom: 1px solid var(--border);
    }
    .brand-mark {
      width: 34px; height: 34px; border-radius: 8px; background: var(--brand);
      display: flex; align-items: center; justify-content: center; flex: none;
    }
    .brand-name { font-weight: 700; letter-spacing: .01em; }
    .brand-sub { font-size: .78rem; color: var(--muted); }
    .body { padding: 1.9rem 1.75rem; }
    .status {
      display: inline-flex; align-items: center; gap: .45rem;
      font-size: .8rem; font-weight: 600; color: #b91c1c;
      background: rgba(220, 38, 38, .10); border: 1px solid rgba(220, 38, 38, .25);
      padding: .3rem .7rem; border-radius: 999px;
    }
    @media (prefers-color-scheme: dark) { .status { color: #fca5a5; } }
    h1 { font-size: 1.35rem; margin: .9rem 0 .4rem; }
    p.lead { margin: 0; color: var(--muted); line-height: 1.6; }
    .details {
      margin-top: 1.4rem; border: 1px solid var(--border); border-radius: 10px;
      background: var(--detail-bg); font-size: .85rem;
    }
    .details div {
      display: flex; justify-content: space-between; gap: 1rem;
      padding: .55rem .9rem; border-top: 1px solid var(--border);
    }
    .details div:first-child { border-top: 0; }
    .details dt { color: var(--muted); }
    .details dd { margin: 0; font-family: ui-monospace, Consolas, monospace; }
    ul.checks { margin: 1.2rem 0 0; padding-left: 1.15rem; color: var(--muted); line-height: 1.8; font-size: .92rem; }
    .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
    .btn {
      display: inline-block; padding: .6rem 1.1rem; border-radius: 8px;
      font-size: .92rem; font-weight: 600; text-decoration: none;
    }
    .btn-primary { background: var(--brand); color: #fff; }
    .btn-secondary { border: 1px solid var(--border); color: var(--text); }
    .footer {
      padding: .9rem 1.75rem; border-top: 1px solid var(--border);
      font-size: .78rem; color: var(--muted);
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
    }
  </style>
</head>
<body>
  <main class="card">
    <div class="brand">
      <div class="brand-mark">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
      </div>
      <div>
        <div class="brand-name">Tips-Of-Mine</div>
        <div class="brand-sub">S&eacute;curit&eacute; des acc&egrave;s &mdash; Zero Trust</div>
      </div>
    </div>

    <div class="body">
      <span class="status">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
          <circle cx="12" cy="12" r="10"/><line x1="4.9" y1="4.9" x2="19.1" y2="19.1"/>
        </svg>
        Erreur 403 &mdash; Acc&egrave;s refus&eacute;
      </span>

      <h1>Vous n'&ecirc;tes pas autoris&eacute; &agrave; acc&eacute;der &agrave; cette application</h1>
      <p class="lead">Votre identit&eacute; a bien &eacute;t&eacute; v&eacute;rifi&eacute;e, mais elle ne remplit pas
      les conditions d'acc&egrave;s d&eacute;finies pour cette ressource&nbsp;: groupe d'autorisation,
      conformit&eacute; du poste de travail, authentification multifacteur ou localisation.</p>

      <div class="details" role="group" aria-label="D&eacute;tails techniques">
        <div><dt>R&eacute;f&eacute;rence incident</dt><dd>${rayId}</dd></div>
        <div><dt>Horodatage</dt><dd>${now}</dd></div>
        <div><dt>Code</dt><dd>HTTP 403 &mdash; Forbidden</dd></div>
      </div>

      <ul class="checks">
        <li>V&eacute;rifiez que vous &ecirc;tes connect&eacute; avec votre compte professionnel&nbsp;;</li>
        <li>V&eacute;rifiez que le client WARP est actif et que votre poste est conforme&nbsp;;</li>
        <li>Si votre besoin d'acc&egrave;s est l&eacute;gitime, contactez le support en joignant la <strong>r&eacute;f&eacute;rence incident</strong> ci-dessus.</li>
      </ul>

      <div class="actions">
        <a class="btn btn-primary" href="${TICKETING_URL}">Ouvrir un ticket</a>
        <a class="btn btn-secondary" href="mailto:${SUPPORT_EMAIL}?subject=Demande%20d%27acc%C3%A8s%20refus%C3%A9e%20-%20R%C3%A9f.%20${encodeURIComponent(rayId)}">Contacter le support</a>
      </div>
    </div>

    <div class="footer">
      <span>&copy; Tips-Of-Mine &mdash; Direction des Syst&egrave;mes d'Information</span>
      <span>${SUPPORT_EMAIL}</span>
    </div>
  </main>
</body>
</html>`;

  return new Response(html, {
    status: 403,
    headers: {
      'content-type': 'text/html; charset=utf-8',
      'cache-control': 'no-store',
    },
  });
}