attack-defense-platform/panel/static/team.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="team-id" content="0">
<title>Portal Tim — Gemastik A/D</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
<style>
  :root { --bg:#0b0e14; --panel:#151a23; --panel2:#1d2430; --line:#2a3444; --txt:#e6edf3; --dim:#8b98a9; --accent:#38bdf8; --green:#34d399; --red:#f87171; --purple:#a78bfa; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--txt); font-family:'Segoe UI',system-ui,sans-serif; min-height:100vh; }
  .wrap { max-width:1000px; margin:0 auto; padding:24px 16px 60px; }
  header { display:flex; align-items:center; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
  .logo { width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg,#38bdf8,#6366f1); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; color:#fff; }
  h1 { font-size:22px; }
  .sub { color:var(--dim); font-size:13px; }
  .badge { background:#06352a; border:1px solid var(--green); color:var(--green); border-radius:20px; padding:3px 12px; font-size:12px; font-weight:600; }
  .badge.stopped { background:#3a1414; border-color:var(--red); color:var(--red); }
  .card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:16px; }
  .card h2 { font-size:15px; margin-bottom:12px; color:var(--accent); }
  .kv { display:grid; grid-template-columns:150px 1fr; gap:6px 12px; font-size:13px; margin-bottom:4px; }
  .kv b { color:var(--dim); font-weight:500; }
  .kv span { font-family:ui-monospace,monospace; }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
  th { color:var(--dim); font-weight:500; }
  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
  .dot.up { background:var(--green); } .dot.down { background:var(--red); }
  label { display:block; font-size:12px; color:var(--dim); margin:12px 0 5px; }
  select, input[type=text], input[type=password] { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); font-size:14px; }
  button { padding:12px 16px; border:none; border-radius:8px; background:linear-gradient(135deg,#38bdf8,#6366f1); color:#fff; font-weight:600; font-size:14px; cursor:pointer; }
  button:hover { filter:brightness(1.1); }
  button.ghost { background:var(--panel2); border:1px solid var(--line); color:var(--txt); }
  #result { margin-top:14px; padding:12px; border-radius:8px; display:none; font-size:14px; }
  #result.ok { display:block; background:#06352a; border:1px solid var(--green); color:var(--green); }
  #result.err { display:block; background:#3a1414; border:1px solid var(--red); color:var(--red); }
  .sshbox { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:ui-monospace,monospace; font-size:12px; overflow-x:auto; }
  /* login */
  #loginScreen { max-width:420px; margin:80px auto; }
  #loginScreen .card { padding:32px; }
  #loginScreen h2 { text-align:center; margin-bottom:6px; }
  #loginScreen .hint { text-align:center; color:var(--dim); font-size:12px; margin-bottom:18px; }
  .login-err { color:var(--red); font-size:13px; margin-top:10px; display:none; }
  /* tabs */
  .tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
  .tabs button { background:var(--panel2); border:1px solid var(--line); color:var(--dim); font-weight:500; }
  .tabs button.active { background:linear-gradient(135deg,#38bdf8,#6366f1); color:#fff; border-color:transparent; }
  .view { display:none; }
  .view.active { display:block; }
  /* terminal */
  #termWrap { background:#0d1117; border:1px solid var(--line); border-radius:10px; padding:8px; height:480px; }
  #term { height:100%; }
  .term-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
  #termStatus { font-size:12px; color:var(--dim); }
  code { background:var(--panel2); padding:2px 6px; border-radius:5px; font-size:12px; }
  .guide h3 { color:var(--purple); margin:18px 0 8px; font-size:14px; }
  .guide p, .guide li { font-size:13px; color:#c9d4e3; line-height:1.7; }
  .guide ol, .guide ul { padding-left:20px; }
  .login-note { font-size:12px; color:var(--dim); margin-top:14px; text-align:center; }
  .login-note a { color:var(--accent); }
</style>
</head>
<body>
<div class="wrap">
  <header>
    <div class="logo">G</div>
    <div style="flex:1">
      <h1 id="teamTitle">Portal Tim</h1>
      <div class="sub" id="teamDomain"></div>
    </div>
    <span class="badge" id="teamStatus">…</span>
    <button class="ghost" id="logoutBtn" style="display:none" onclick="logout()">Keluar</button>
  </header>

  <!-- LOGIN -->
  <div id="loginScreen">
    <div class="card">
      <h2>🔐 Login Portal Tim</h2>
      <div class="hint" id="loginHint">Masukkan <b>password SSH tim</b> kamu (dari panitia)</div>
      <label>Password Tim</label>
      <input type="password" id="loginPass" placeholder="password SSH tim" autocomplete="off">
      <button onclick="doLogin()" style="width:100%;margin-top:16px">Masuk Portal</button>
      <div class="login-err" id="loginErr"></div>
      <div class="login-note">Belum punya password? Hubungi panitia.<br>Tutorial SSH: <a href="/team/0/guide" data-guide-link>baca panduan</a></div>
    </div>
  </div>

  <!-- PORTAL -->
  <div id="portalScreen" style="display:none">
    <div class="tabs">
      <button class="active" data-view="term" onclick="showView('term')">🖥️ Terminal SSH</button>
      <button data-view="targets" onclick="showView('targets')">🎯 Target Musuh</button>
      <button data-view="submit" onclick="showView('submit')">🚩 Submit Flag</button>
      <button data-view="guide" onclick="showView('guide')">📖 Panduan SSH</button>
    </div>

    <div class="view active" id="view-term">
      <div class="card">
        <h2>🖥️ SSH Terminal — pilih challenge</h2>
        <div class="term-toolbar">
          <select id="termChall" style="width:200px" onchange="connectTerm()">
            <option value="blogpost">blogpost (web)</option>
            <option value="carbeat">carbeat (pwn)</option>
            <option value="cdn">cdn (web)</option>
            <option value="phew">phew (crypto)</option>
            <option value="sheesh">sheesh (crypto)</option>
            <option value="warmup">warmup</option>
          </select>
          <button class="ghost" onclick="connectTerm()">🔄 Sambung</button>
          <span id="termStatus">Belum tersambung</span>
        </div>
        <div id="termWrap"><div id="term"></div></div>
        <div style="margin-top:10px;font-size:12px;color:var(--dim)">
          SSH otomatis login sebagai <code>ctfuser</code> ke container challenge timmu. Koneksi diputus setelah idle.
        </div>
      </div>
    </div>

    <div class="view" id="view-targets">
      <div class="card">
        <h2>🎯 Target Musuh</h2>
        <p style="font-size:13px;color:var(--dim);margin-bottom:12px">Service challenge tim lain — inilah yang harus kamu attack & curi flagnya.</p>
        <div id="targetList" class="sshbox">Memuat…</div>
      </div>
    </div>

    <div class="view" id="view-submit">
      <div class="card">
        <h2>🚩 Submit Flag</h2>
        <label>Challenge</label>
        <select id="challenge">
          <option value="blogpost">blogpost (web)</option>
          <option value="carbeat">carbeat (pwn)</option>
          <option value="cdn">cdn (web)</option>
          <option value="phew">phew (crypto)</option>
          <option value="sheesh">sheesh (crypto)</option>
          <option value="warmup">warmup</option>
        </select>
        <label>Flag</label>
        <input type="text" id="flag" placeholder="GEMASTIK18{...}" autocomplete="off">
        <button onclick="submitFlag()" style="width:100%;margin-top:16px">Submit Flag</button>
        <div id="result"></div>
      </div>
    </div>

    <div class="view" id="view-guide">
      <div class="card guide">
        <h2>📖 Panduan SSH & Attack</h2>
        <h3>1. Apa itu SSH di sini?</h3>
        <p>Setiap challenge punya service yang harus kamu <b>pertahankan</b> (defense) dan service tim lain yang harus kamu <b>serang</b> (attack). SSH container adalah akses administratif ke challenge tim kamu — untuk riset, patch, atau recovery.</p>

        <h3>2. Login via Web Terminal</h3>
        <ol>
          <li>Buka tab <b>🖥️ Terminal SSH</b>.</li>
          <li>Pilih challenge (misal <code>blogpost</code>).</li>
          <li>Klik <b>Sambung</b> — otomatis login sebagai <code>ctfuser</code>.</li>
        </ol>

        <h3>3. Login via SSH biasa (opsional)</h3>
        <div class="sshbox">ssh ctfuser@43.134.105.109 -p &lt;PORT_SSH&gt;
# password = password tim kamu</div>

        <h3>4. Command yang berguna</h3>
        <ul>
          <li><code>cat /flag.txt</code> — flag <b>tim kamu sendiri</b> (jangan bocorin!)</li>
          <li><code>ls /app /srv /opt</code> — cari source code challenge</li>
          <li><code>ps aux</code> — lihat proses service</li>
          <li><code>cat /flag.txt | nc &lt;ip_tim_lawan&gt; &lt;port_chall&gt;</code> — kirim flag kamu 🤫</li>
        </ul>

        <h3>5. Alur Attack</h3>
        <ol>
          <li>Cari vuln di challenge (SSTI, path traversal, crypto oracle, dll).</li>
          <li>Exploit service <b>tim lawan</b> — lihat tab <b>🎯 Target Musuh</b>.</li>
          <li>Baca flag dari container/service lawan.</li>
          <li>Submit flag di tab <b>🚩 Submit Flag</b> → dapat poin.</li>
        </ol>

        <h3>6. Aturan</h3>
        <ul>
          <li>Jangan ubah flag tim sendiri (mount read-only).</li>
          <li>Jangan matikan service tim sendiri — SLA dicek panitia.</li>
          <li>Flag yang valid: <code>GEMASTIK18{...}</code>.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<script>
const TEAM_ID = parseInt(document.querySelector('meta[name="team-id"]').content || '0', 10);
let term = null, ws = null;

// fix all guide links immediately (no auth needed) — /team/0 would 403
document.querySelectorAll('[data-guide-link]').forEach(a => a.href = `/team/${TEAM_ID}/guide`);

async function api(url, opts) { const r = await fetch(url, opts); return r.json(); }
function esc(s) { return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
function showView(v) {
  document.querySelectorAll('.tabs button').forEach(b => b.classList.toggle('active', b.dataset.view === v));
  document.querySelectorAll('.view').forEach(x => x.classList.toggle('active', x.id === 'view-' + v));
  if (v === 'term' && term) term.focus();
  if (v === 'targets') loadTargets();
}

// ---------- auth ----------
async function checkSession() {
  const s = await api(`/api/team/${TEAM_ID}/session`);
  if (s.authed) {
    document.getElementById('loginScreen').style.display = 'none';
    document.getElementById('portalScreen').style.display = 'block';
    document.getElementById('logoutBtn').style.display = '';
    loadInfo();
  }
}

async function doLogin() {
  const pass = document.getElementById('loginPass').value;
  const err = document.getElementById('loginErr');
  err.style.display = 'none';
  const d = await api(`/api/team/${TEAM_ID}/login`, {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({pass}),
  });
  if (d.ok) {
    document.getElementById('loginScreen').style.display = 'none';
    document.getElementById('portalScreen').style.display = 'block';
    document.getElementById('logoutBtn').style.display = '';
    loadInfo();
  } else {
    err.textContent = 'Password salah. Coba lagi.';
    err.style.display = 'block';
  }
}

async function logout() {
  await api('/api/team/logout', {method:'POST'});
  location.reload();
}

// ---------- info & targets ----------
async function loadInfo() {
  try {
    const t = (await api(`/api/team/${TEAM_ID}/info`)).team;
    document.getElementById('teamTitle').textContent = t.label || ('Team ' + TEAM_ID);
    document.getElementById('teamDomain').textContent = t.domain || '';
    const st = document.getElementById('teamStatus');
    if (t.status === 'running') {
      st.textContent = '● RUNNING'; st.className = 'badge';
    } else {
      st.textContent = '○ STOPPED'; st.className = 'badge stopped';
    }
    document.getElementById('loginHint').innerHTML = 'Masukkan <b>password SSH tim</b> kamu (dari panitia)';
    document.getElementById('guideLink').href = `/team/${TEAM_ID}/guide`;
  } catch (e) {}
}

async function loadTargets() {
  const box = document.getElementById('targetList');
  const d = await api(`/api/team/${TEAM_ID}/targets`);
  const targets = d.targets || [];
  if (!targets.length) { box.textContent = 'Belum ada tim musuh.'; return; }
  let html = '=== TARGET MUSUH ===\n\n';
  for (const t of targets) {
    html += `[${esc(t.team)}] — ${esc(t.challenge)}\n`;
    if (t.domain) html += `  domain : https://${esc(t.domain)}\n`;
    html += `  service: ${esc(window.location.hostname)}:${t.port}\n`;
    html += `  ssh    : ${esc(window.location.hostname)}:${t.ssh}\n\n`;
  }
  box.textContent = html;
}

// ---------- SSH terminal ----------
function connectTerm() {
  const chall = document.getElementById('termChall').value;
  const status = document.getElementById('termStatus');
  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
  const url = `${proto}//${location.host}/api/team/${TEAM_ID}/ssh/ws?chall=${chall}`;

  if (ws) { try { ws.close(); } catch(e){} }
  if (term) term.dispose();
  term = new Terminal({cursorBlink:true, fontSize:13, theme:{background:'#0d1117'}});
  term.open(document.getElementById('term'));

  ws = new WebSocket(url);
  status.textContent = 'Menghubungkan…';
  ws.onopen = () => { status.textContent = `● tersambung ke ${chall} (ctfuser)`; term.focus(); };
  ws.onmessage = ev => term.write(ev.data);
  ws.onclose = ev => { status.textContent = '✖ terputus (' + (ev.reason || 'closed') + ')'; };
  ws.onerror = () => { status.textContent = '✖ error koneksi'; };

  term.onData(d => {
    if (ws && ws.readyState === WebSocket.OPEN) ws.send(d);
  });
  term.onResize(size => {
    if (ws && ws.readyState === WebSocket.OPEN) ws.send(`__resize__:${size.cols}:${size.rows}`);
  });
  document.getElementById('view-term').querySelector('#termWrap').style.height = '480px';
}

// ---------- submit ----------
async function submitFlag() {
  const res = document.getElementById('result');
  res.className = '';
  const d = await api('/api/flag/submit', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      team: TEAM_ID,
      challenge: document.getElementById('challenge').value,
      flag: document.getElementById('flag').value.trim(),
    }),
  });
  if (d.success) { res.className = 'ok'; res.textContent = '✅ Flag benar! Poin masuk.'; }
  else { res.className = 'err'; res.textContent = '❌ ' + (d.error || 'Gagal'); }
}

checkSession();
</script>
</body>
</html>