Asger Weirsøe
419 lines
16 KiB
HTML
419 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>weircon-random-proxy · API tester</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f7f7f8;
|
|
--panel: #ffffff;
|
|
--text: #1f2328;
|
|
--muted: #656d76;
|
|
--border: #d0d7de;
|
|
--accent: #0969da;
|
|
--ok: #1a7f37;
|
|
--warn: #9a6700;
|
|
--err: #cf222e;
|
|
--code-bg: #f1f3f5;
|
|
--pill-bg: #ddf4ff;
|
|
--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0d1117;
|
|
--panel: #161b22;
|
|
--text: #e6edf3;
|
|
--muted: #8b949e;
|
|
--border: #30363d;
|
|
--accent: #58a6ff;
|
|
--ok: #3fb950;
|
|
--warn: #d29922;
|
|
--err: #f85149;
|
|
--code-bg: #1e242b;
|
|
--pill-bg: #133156;
|
|
}
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
}
|
|
.wrap { max-width: 920px; margin: 0 auto; padding: 24px; }
|
|
header { margin-bottom: 32px; }
|
|
h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.01em; }
|
|
h1 .tag { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: 8px; font-weight: 400; }
|
|
header p { margin: 0; color: var(--muted); }
|
|
section { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
|
|
section h2 { margin: 0 0 4px; font-size: 18px; }
|
|
section h2 .method { font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--pill-bg); color: var(--accent); margin-right: 8px; vertical-align: 1px; }
|
|
section h2 code { font-size: 16px; color: var(--text); background: transparent; padding: 0; }
|
|
section > p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
|
|
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
|
|
input, select, textarea {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
}
|
|
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
|
|
textarea { font-family: var(--mono); resize: vertical; min-height: 80px; }
|
|
.grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
|
|
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
|
|
.field { margin-bottom: 12px; }
|
|
button {
|
|
padding: 8px 16px;
|
|
background: var(--accent);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { filter: brightness(0.92); }
|
|
button.secondary { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
|
|
button.secondary:hover { background: var(--code-bg); }
|
|
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
pre, code { font-family: var(--mono); }
|
|
pre {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
overflow: auto;
|
|
font-size: 12px;
|
|
max-height: 360px;
|
|
margin: 0;
|
|
}
|
|
code { background: var(--code-bg); padding: 1px 4px; border-radius: 3px; font-size: 0.92em; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
|
|
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
|
|
th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
|
|
td code { font-size: 12px; }
|
|
.status-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-family: var(--mono); font-weight: 600; }
|
|
.status-2xx { background: rgba(63, 185, 80, 0.15); color: var(--ok); }
|
|
.status-3xx { background: rgba(210, 153, 34, 0.15); color: var(--warn); }
|
|
.status-4xx, .status-5xx { background: rgba(248, 81, 73, 0.15); color: var(--err); }
|
|
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
.row > * { flex: 0 0 auto; }
|
|
details summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
|
|
details summary:hover { color: var(--text); }
|
|
.muted { color: var(--muted); font-size: 13px; }
|
|
.tunnel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 12px; }
|
|
.tunnel { padding: 10px 12px; background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 12px; }
|
|
.tunnel .id { color: var(--muted); font-size: 11px; }
|
|
.tunnel .ip { font-size: 13px; font-weight: 600; margin-top: 2px; }
|
|
.tunnel.err { border-color: var(--err); }
|
|
.tunnel.err .ip { color: var(--err); }
|
|
.tunnel.loading .ip { color: var(--muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header>
|
|
<h1>weircon-random-proxy <span class="tag" id="version-tag">api tester</span></h1>
|
|
<p>HTTP fetch service that forwards a request through one of N upstream WireGuard tunnels. This page lets you exercise the API without writing any code.</p>
|
|
</header>
|
|
|
|
<section id="config-section">
|
|
<h2>Configuration</h2>
|
|
<p>If a reverse proxy in front (e.g. NginxProxyManager) validates an API key header, paste it here. Stored in your browser's localStorage. Leave blank when accessing the service directly on LAN.</p>
|
|
<div class="grid">
|
|
<div>
|
|
<label for="apikey">X-WEIRCON-RANDOM-IP (API key)</label>
|
|
<input id="apikey" type="password" autocomplete="off" placeholder="optional">
|
|
</div>
|
|
<div>
|
|
<label for="base-url">Service base URL</label>
|
|
<input id="base-url" type="url" placeholder="(this origin)">
|
|
</div>
|
|
<div style="display: flex; align-items: end;">
|
|
<button class="secondary" onclick="forgetCreds()">Forget</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="method">GET</span><code>/health</code></h2>
|
|
<p>Service health and the number of upstream tunnels configured.</p>
|
|
<div class="row">
|
|
<button onclick="callHealth()">Try it</button>
|
|
<span id="health-status" class="muted"></span>
|
|
</div>
|
|
<pre id="health-body" style="margin-top: 8px; display: none;"></pre>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="method">ANY</span><code>/</code></h2>
|
|
<p>Fetch a target URL through one of the configured tunnels. Status, headers, and body of the upstream response are streamed back to you.</p>
|
|
|
|
<h3 style="margin: 16px 0 8px; font-size: 14px;">Parameters</h3>
|
|
<table>
|
|
<thead><tr><th>Source</th><th>Name</th><th>Required</th><th>Description</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>header</td><td><code>X-WEIRCON-RANDOM-IP-REDIRECT</code></td><td>one of</td><td>Target URL to fetch. Takes precedence over <code>?url=</code>.</td></tr>
|
|
<tr><td>query</td><td><code>?url=</code></td><td>one of</td><td>Alternative way to pass the target URL.</td></tr>
|
|
<tr><td>header</td><td><code>X-WEIRCON-PROXY-ID</code></td><td>no</td><td>Pin a specific tunnel (0..N-1). Default: random.</td></tr>
|
|
<tr><td>header</td><td><code>X-WEIRCON-FORWARD-METHOD</code></td><td>no</td><td>Override the HTTP method sent to the target.</td></tr>
|
|
<tr><td>body</td><td><em>passthrough</em></td><td>no</td><td>Forwarded as-is for POST/PUT/PATCH.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 style="margin: 16px 0 8px; font-size: 14px;">Try it out</h3>
|
|
<div class="grid">
|
|
<div>
|
|
<label for="target">Target URL</label>
|
|
<input id="target" type="url" value="https://api.ipify.org" placeholder="https://example.com">
|
|
</div>
|
|
<div>
|
|
<label for="method">Method</label>
|
|
<select id="method">
|
|
<option>GET</option><option>POST</option><option>PUT</option><option>PATCH</option><option>DELETE</option><option>HEAD</option><option>OPTIONS</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="proxy-id">Proxy ID</label>
|
|
<input id="proxy-id" type="number" min="0" placeholder="random">
|
|
</div>
|
|
</div>
|
|
<div class="field" id="body-field" style="display: none;">
|
|
<label for="body">Request body</label>
|
|
<textarea id="body" placeholder='{"hello":"world"}'></textarea>
|
|
</div>
|
|
<div class="row">
|
|
<button onclick="callFetch()">Send</button>
|
|
<button class="secondary" onclick="showCurl()">Show cURL</button>
|
|
<span id="fetch-status" class="muted"></span>
|
|
</div>
|
|
|
|
<details id="curl-details" style="margin-top: 12px;">
|
|
<summary>cURL equivalent</summary>
|
|
<pre id="curl-out"></pre>
|
|
</details>
|
|
|
|
<div id="response-block" style="display: none; margin-top: 16px;">
|
|
<div class="row" style="margin-bottom: 8px;">
|
|
<span id="resp-status" class="status-pill"></span>
|
|
<span id="resp-egress" class="muted"></span>
|
|
<span id="resp-latency" class="muted"></span>
|
|
</div>
|
|
<details open>
|
|
<summary>Body</summary>
|
|
<pre id="resp-body"></pre>
|
|
</details>
|
|
<details>
|
|
<summary>Response headers</summary>
|
|
<pre id="resp-headers"></pre>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Tunnel health check</h2>
|
|
<p>Sends a request to each configured tunnel and reports the egress IP. A healthy stack returns N distinct IPs.</p>
|
|
<div class="row">
|
|
<input id="probe-url" type="url" value="https://api.ipify.org" style="max-width: 320px;">
|
|
<button onclick="probeAll()">Probe all tunnels</button>
|
|
</div>
|
|
<div id="tunnel-grid" class="tunnel-grid"></div>
|
|
</section>
|
|
|
|
<p class="muted" style="text-align: center; margin-top: 24px;">
|
|
weircon-random-proxy · <a href="/health" style="color: var(--accent);">/health</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const HEADER_AUTH = "X-Weircon-Random-Ip";
|
|
const HEADER_REDIRECT = "X-Weircon-Random-Ip-Redirect";
|
|
const HEADER_PROXY_ID = "X-Weircon-Proxy-Id";
|
|
const HEADER_METHOD = "X-Weircon-Forward-Method";
|
|
const RESP_HEADER_EGRESS = "x-weircon-egress-proxy";
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
function loadCreds() {
|
|
$("apikey").value = localStorage.getItem("weircon_apikey") || "";
|
|
$("base-url").value = localStorage.getItem("weircon_base_url") || "";
|
|
}
|
|
function saveCreds() {
|
|
localStorage.setItem("weircon_apikey", $("apikey").value);
|
|
localStorage.setItem("weircon_base_url", $("base-url").value);
|
|
}
|
|
function forgetCreds() {
|
|
localStorage.removeItem("weircon_apikey");
|
|
localStorage.removeItem("weircon_base_url");
|
|
loadCreds();
|
|
}
|
|
function baseURL() {
|
|
return ($("base-url").value || window.location.origin).replace(/\/$/, "");
|
|
}
|
|
function authHeaders() {
|
|
const h = {};
|
|
const k = $("apikey").value;
|
|
if (k) h[HEADER_AUTH] = k;
|
|
return h;
|
|
}
|
|
|
|
async function callHealth() {
|
|
saveCreds();
|
|
$("health-status").textContent = "calling…";
|
|
$("health-body").style.display = "none";
|
|
try {
|
|
const r = await fetch(baseURL() + "/health", { headers: authHeaders() });
|
|
const text = await r.text();
|
|
$("health-status").textContent = r.ok ? `HTTP ${r.status}` : `HTTP ${r.status} (failed)`;
|
|
$("health-body").textContent = tryPrettyJSON(text);
|
|
$("health-body").style.display = "block";
|
|
try {
|
|
const j = JSON.parse(text);
|
|
if (j.proxies) renderTunnelGrid(j.proxies);
|
|
} catch (_) {}
|
|
} catch (e) {
|
|
$("health-status").textContent = "network error: " + e.message;
|
|
}
|
|
}
|
|
|
|
async function callFetch() {
|
|
saveCreds();
|
|
const target = $("target").value.trim();
|
|
if (!target) { alert("target URL required"); return; }
|
|
const method = $("method").value;
|
|
const proxyId = $("proxy-id").value.trim();
|
|
const body = $("body").value;
|
|
|
|
const headers = { ...authHeaders(), [HEADER_REDIRECT]: target };
|
|
if (proxyId !== "") headers[HEADER_PROXY_ID] = proxyId;
|
|
|
|
const init = { method, headers };
|
|
if (["POST", "PUT", "PATCH"].includes(method) && body) init.body = body;
|
|
|
|
$("fetch-status").textContent = "calling…";
|
|
$("response-block").style.display = "none";
|
|
|
|
const t0 = performance.now();
|
|
try {
|
|
const r = await fetch(baseURL() + "/", init);
|
|
const t1 = performance.now();
|
|
const text = await r.text();
|
|
showResponse(r, text, Math.round(t1 - t0));
|
|
$("fetch-status").textContent = "";
|
|
} catch (e) {
|
|
$("fetch-status").textContent = "network error: " + e.message;
|
|
}
|
|
}
|
|
|
|
function showResponse(r, body, latencyMs) {
|
|
$("response-block").style.display = "block";
|
|
const sp = $("resp-status");
|
|
sp.textContent = `${r.status} ${r.statusText}`;
|
|
sp.className = "status-pill status-" + (Math.floor(r.status / 100)) + "xx";
|
|
|
|
const egress = r.headers.get(RESP_HEADER_EGRESS);
|
|
$("resp-egress").textContent = egress !== null ? `via proxy${egress}` : "";
|
|
$("resp-latency").textContent = `${latencyMs} ms`;
|
|
|
|
$("resp-body").textContent = tryPrettyJSON(body);
|
|
const headerLines = [];
|
|
r.headers.forEach((v, k) => headerLines.push(`${k}: ${v}`));
|
|
$("resp-headers").textContent = headerLines.join("\n");
|
|
}
|
|
|
|
function tryPrettyJSON(s) {
|
|
try { return JSON.stringify(JSON.parse(s), null, 2); } catch (_) { return s; }
|
|
}
|
|
|
|
function showCurl() {
|
|
saveCreds();
|
|
const target = $("target").value.trim();
|
|
const method = $("method").value;
|
|
const proxyId = $("proxy-id").value.trim();
|
|
const body = $("body").value;
|
|
const k = $("apikey").value;
|
|
|
|
let cmd = `curl -X ${method} \\\n "${baseURL()}/"`;
|
|
if (k) cmd += ` \\\n -H '${HEADER_AUTH}: ${k}'`;
|
|
cmd += ` \\\n -H '${HEADER_REDIRECT}: ${target}'`;
|
|
if (proxyId !== "") cmd += ` \\\n -H '${HEADER_PROXY_ID}: ${proxyId}'`;
|
|
if (["POST", "PUT", "PATCH"].includes(method) && body) {
|
|
cmd += ` \\\n --data-raw '${body.replace(/'/g, "'\\''")}'`;
|
|
}
|
|
$("curl-out").textContent = cmd;
|
|
$("curl-details").open = true;
|
|
}
|
|
|
|
async function renderTunnelGrid(count) {
|
|
const grid = $("tunnel-grid");
|
|
grid.innerHTML = "";
|
|
for (let i = 0; i < count; i++) {
|
|
const el = document.createElement("div");
|
|
el.className = "tunnel";
|
|
el.id = `tunnel-${i}`;
|
|
el.innerHTML = `<div class="id">proxy${i}</div><div class="ip">—</div>`;
|
|
grid.appendChild(el);
|
|
}
|
|
}
|
|
|
|
async function probeAll() {
|
|
const probeURL = $("probe-url").value.trim();
|
|
if (!probeURL) { alert("probe URL required"); return; }
|
|
|
|
// ensure grid is rendered (calls /health if needed)
|
|
if ($("tunnel-grid").children.length === 0) {
|
|
try {
|
|
const r = await fetch(baseURL() + "/health", { headers: authHeaders() });
|
|
const j = await r.json();
|
|
renderTunnelGrid(j.proxies);
|
|
} catch (e) {
|
|
alert("failed to read /health: " + e.message);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const cells = [...$("tunnel-grid").children];
|
|
cells.forEach(c => { c.className = "tunnel loading"; c.querySelector(".ip").textContent = "…"; });
|
|
|
|
await Promise.all(cells.map(async (cell, i) => {
|
|
const headers = { ...authHeaders(), [HEADER_REDIRECT]: probeURL, [HEADER_PROXY_ID]: String(i) };
|
|
const t0 = performance.now();
|
|
try {
|
|
const r = await fetch(baseURL() + "/", { headers });
|
|
const text = (await r.text()).trim();
|
|
const ms = Math.round(performance.now() - t0);
|
|
if (r.ok) {
|
|
cell.className = "tunnel";
|
|
cell.querySelector(".ip").textContent = text.slice(0, 64);
|
|
cell.querySelector(".id").textContent = `proxy${i} · ${ms}ms`;
|
|
} else {
|
|
cell.className = "tunnel err";
|
|
cell.querySelector(".ip").textContent = `HTTP ${r.status}`;
|
|
}
|
|
} catch (e) {
|
|
cell.className = "tunnel err";
|
|
cell.querySelector(".ip").textContent = "error";
|
|
}
|
|
}));
|
|
}
|
|
|
|
$("method").addEventListener("change", () => {
|
|
const m = $("method").value;
|
|
$("body-field").style.display = ["POST", "PUT", "PATCH"].includes(m) ? "block" : "none";
|
|
});
|
|
|
|
loadCreds();
|
|
// auto-load /health to populate tunnel grid on first paint
|
|
callHealth();
|
|
</script>
|
|
</body>
|
|
</html>
|