refactor: migrate to Next.js with edge functions and update relay utilities

- Removed old relay utilities and tests, replacing them with a new structure under `src/lib/relay-utils.ts`.
- Implemented a new edge function in `app/api/proxy/route.ts` to handle proxy requests.
- Created a new Next.js layout and page structure for the frontend, including a user interface for testing the proxy.
- Added Tailwind CSS for styling and configured PostCSS.
- Updated TypeScript configuration for better compatibility with Next.js.
- Removed unused files and configurations related to the previous setup.
This commit is contained in:
MythEclipse
2026-05-07 20:59:23 +07:00
parent 4c30f2a6e1
commit b0dde3c885
17 changed files with 427 additions and 1078 deletions
+11 -3
View File
@@ -4,13 +4,21 @@ import {
normalizeTargetUrl, normalizeTargetUrl,
stripRelayHeaders, stripRelayHeaders,
isAllowedTarget, isAllowedTarget,
} from "../relay-utils"; } from "@/lib/relay-utils";
export const config = { runtime: "edge" }; export const runtime = "edge";
const ALLOWED_METHODS = new Set(["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"]); const ALLOWED_METHODS = new Set(["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"]);
export default async function handler(req: Request): Promise<Response> { export async function POST(req: Request) { return await handler(req); }
export async function GET(req: Request) { return await handler(req); }
export async function PUT(req: Request) { return await handler(req); }
export async function DELETE(req: Request) { return await handler(req); }
export async function PATCH(req: Request) { return await handler(req); }
export async function HEAD(req: Request) { return await handler(req); }
export async function OPTIONS(req: Request) { return await handler(req); }
async function handler(req: Request): Promise<Response> {
if (!ALLOWED_METHODS.has(req.method)) { if (!ALLOWED_METHODS.has(req.method)) {
return new Response(JSON.stringify({ error: "Method not allowed" }), { return new Response(JSON.stringify({ error: "Method not allowed" }), {
status: 405, status: 405,
+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+19
View File
@@ -0,0 +1,19 @@
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Edge Proxy Relay",
description: "Securely relay requests through Vercel Edge",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
+199
View File
@@ -0,0 +1,199 @@
"use client";
import { useState } from "react";
export default function Home() {
const [targetUrl, setTargetUrl] = useState("https://httpbin.org/anything");
const [method, setMethod] = useState("GET");
const [requestBody, setRequestBody] = useState(JSON.stringify({
message: "Hello from Edge Proxy",
timestamp: Date.now(),
}, null, 2));
const [headerKey, setHeaderKey] = useState("");
const [headerValue, setHeaderValue] = useState("");
const [response, setResponse] = useState<any>(null);
const [loading, setLoading] = useState(false);
const methods = ["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"];
async function sendRequest() {
setLoading(true);
setResponse(null);
const headers: Record<string, string> = {
'x-relay-target': targetUrl,
'Content-Type': 'application/json'
};
if (headerKey && headerValue) {
headers[headerKey] = headerValue;
}
try {
const start = Date.now();
const fetchOptions: any = {
method,
headers
};
if (!['GET', 'HEAD', 'OPTIONS'].includes(method) && requestBody) {
fetchOptions.body = requestBody;
}
const res = await fetch('/api/proxy', fetchOptions);
const elapsed = Date.now() - start;
let responseText = '';
const contentType = res.headers.get('content-type') || '';
if (contentType.includes('application/json')) {
const data = await res.json();
responseText = JSON.stringify(data, null, 2);
} else {
responseText = await res.text();
}
const headersObj: Record<string, string> = {};
res.headers.forEach((value, key) => {
headersObj[key] = value;
});
setResponse({
status: res.status,
statusText: res.statusText,
time: `${elapsed}ms`,
body: responseText,
headers: JSON.stringify(headersObj, null, 2)
});
} catch (err: any) {
setResponse({
status: 'Error',
body: err.message,
headers: '-'
});
} finally {
setLoading(false);
}
}
return (
<div className="min-h-screen bg-slate-900 text-slate-200 p-8 max-w-6xl mx-auto font-sans">
<h1 className="text-3xl font-bold text-sky-400 mb-2">Edge Proxy Relay Test</h1>
<p className="text-slate-400 mb-8">Standardized Next.js Migration</p>
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700 mb-6">
<h2 className="text-sky-400 text-sm font-bold uppercase tracking-wider mb-4">Target Configuration</h2>
<div className="flex flex-col gap-4">
<div>
<label className="block text-xs text-slate-500 font-bold uppercase mb-2">Target URL</label>
<input
className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 font-mono text-sm focus:border-sky-500 outline-none"
value={targetUrl}
onChange={(e) => setTargetUrl(e.target.value)}
/>
</div>
<div className="flex gap-2 flex-wrap">
{['https://httpbin.org/anything', 'https://httpbin.org/get', 'https://jsonplaceholder.typicode.com/posts/1'].map(url => (
<button
key={url}
className="text-xs bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition"
onClick={() => setTargetUrl(url)}
>
{url.split('/').pop() || url}
</button>
))}
</div>
</div>
</div>
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700 mb-6">
<h2 className="text-sky-400 text-sm font-bold uppercase tracking-wider mb-4">Method</h2>
<div className="flex gap-2 flex-wrap">
{methods.map(m => (
<button
key={m}
className={`px-4 py-2 rounded font-bold text-sm transition ${method === m ? 'bg-sky-500 text-slate-900' : 'bg-slate-700 hover:bg-slate-600'}`}
onClick={() => setMethod(m)}
>
{m}
</button>
))}
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
<h2 className="text-sky-400 text-sm font-bold uppercase tracking-wider mb-4">Body (JSON)</h2>
<textarea
className="w-full h-48 bg-slate-950 border border-slate-700 rounded-lg p-3 font-mono text-xs focus:border-sky-500 outline-none resize-none"
value={requestBody}
onChange={(e) => setRequestBody(e.target.value)}
/>
</div>
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
<h2 className="text-sky-400 text-sm font-bold uppercase tracking-wider mb-4">Custom Headers</h2>
<div className="space-y-4">
<div>
<label className="block text-xs text-slate-500 font-bold uppercase mb-2">Key</label>
<input
className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 font-mono text-sm focus:border-sky-500 outline-none"
placeholder="x-custom-header"
value={headerKey}
onChange={(e) => setHeaderKey(e.target.value)}
/>
</div>
<div>
<label className="block text-xs text-slate-500 font-bold uppercase mb-2">Value</label>
<input
className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 font-mono text-sm focus:border-sky-500 outline-none"
placeholder="value"
value={headerValue}
onChange={(e) => setHeaderValue(e.target.value)}
/>
</div>
</div>
</div>
</div>
<button
className="w-full py-4 bg-sky-500 hover:bg-sky-400 text-slate-900 font-bold rounded-xl transition shadow-lg shadow-sky-500/20 disabled:opacity-50"
onClick={sendRequest}
disabled={loading}
>
{loading ? "Sending..." : "Send Request"}
</button>
{response && (
<div className="mt-8 space-y-6">
<div className="flex gap-4">
<div className="bg-slate-800 px-4 py-2 rounded-lg border border-slate-700">
<span className="text-xs text-slate-500 font-bold uppercase mr-2">Status:</span>
<span className={`font-bold ${response.status >= 200 && response.status < 300 ? 'text-green-400' : 'text-orange-400'}`}>
{response.status}
</span>
</div>
<div className="bg-slate-800 px-4 py-2 rounded-lg border border-slate-700">
<span className="text-xs text-slate-500 font-bold uppercase mr-2">Time:</span>
<span className="font-bold text-slate-200">{response.time}</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="block text-xs text-slate-500 font-bold uppercase mb-2">Response Body</label>
<pre className="bg-slate-950 p-4 rounded-lg border border-slate-700 overflow-auto max-h-96 text-xs text-green-400 font-mono">
{response.body}
</pre>
</div>
<div>
<label className="block text-xs text-slate-500 font-bold uppercase mb-2">Response Headers</label>
<pre className="bg-slate-950 p-4 rounded-lg border border-slate-700 overflow-auto max-h-96 text-xs text-slate-400 font-mono">
{response.headers}
</pre>
</div>
</div>
</div>
)}
</div>
);
}
+132
View File
@@ -4,9 +4,17 @@
"workspaces": { "workspaces": {
"": { "": {
"name": "proxy-vercel", "name": "proxy-vercel",
"dependencies": {
"next": "^16.2.5",
"react": "^19.2.6",
"react-dom": "^19.2.6",
},
"devDependencies": { "devDependencies": {
"@biomejs/biome": "^2.4.14", "@biomejs/biome": "^2.4.14",
"@types/bun": "latest", "@types/bun": "latest",
"autoprefixer": "^10.5.0",
"postcss": "^8.5.14",
"tailwindcss": "^4.2.4",
}, },
}, },
}, },
@@ -29,12 +37,136 @@
"@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.4.14", "", { "os": "win32", "cpu": "x64" }, "sha512-WL0EG5qE+EAKomGXbf2g6VnSKJhTL3tXC0QRzWRwA5VpjxNYa6H4P7ZWfymbGE4IhZZQi1KXQ2R0YjwInmz2fA=="], "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.4.14", "", { "os": "win32", "cpu": "x64" }, "sha512-WL0EG5qE+EAKomGXbf2g6VnSKJhTL3tXC0QRzWRwA5VpjxNYa6H4P7ZWfymbGE4IhZZQi1KXQ2R0YjwInmz2fA=="],
"@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
"@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
"@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
"@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],
"@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],
"@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],
"@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],
"@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],
"@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],
"@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],
"@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],
"@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],
"@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],
"@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],
"@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],
"@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],
"@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],
"@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],
"@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],
"@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],
"@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],
"@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],
"@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],
"@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],
"@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],
"@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
"@next/env": ["@next/env@16.2.5", "", {}, "sha512-Lb9ElHD2klcyeVD25vW+siPFqz9QMzDUSgvFZNO+dZEKoMHex4viJhVuzBhrXKqb+UKnih7mVYbt50/7KLsSCA=="],
"@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.2.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BW+8PGVmsruomXHsitD8JG6gny9lEdobctjBwvtPF8AKtxGDR7nR35FOl/oK9UAPXBOBm+vx0k8qtpeHOXQMGQ=="],
"@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.2.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZoCGnCl9LlQJWmqXrZAUlNxvuNmclvE+7zUif+nDydkkehl9FKxHJ+wxSQMj+C37BYFerKiEdX9s9o02ir975Q=="],
"@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.2.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-AwcZzMChaWkOTZt3vu+2ZMIj8g4dYQY+B8VUVhlFSQ2JtvyZpefyYHTe00D6b6L7BysYw7vl3zsvs9jix8tl5Q=="],
"@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.2.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-QqMgqWbCBFsfiQ7BF3dUlW8HJy1LWhpcqbTpoHMWA9IV+TnWwDKozQJA5NdIAHjQ00yX2Q7AUkLr/XK4n77q8A=="],
"@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.2.5", "", { "os": "linux", "cpu": "x64" }, "sha512-3hzeiFGZtyATVx9pCeuzTshXmh50vHZitqaeZiyJZaUmjQyrfjsVUgS8apOj1vEJCIpKJM/55F45yPAV2kpjsA=="],
"@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.2.5", "", { "os": "linux", "cpu": "x64" }, "sha512-0mzZV/mAt7Qj2tYNdTB6AqrS8dwng/AQLSYC5Z1YLpZdi2wxqKDPK7RY2RvjB1fXyJfOfdA3l/yTF5yLi+WfuQ=="],
"@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.2.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-f/H4nZ2zJBvA8/+HpsB9mNonF9zfQoAU6D0WxJrfzhJDvJLfngVN85oqxUyrDVK99DIFfFYhLpGa5K+c5uotSw=="],
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.2.5", "", { "os": "win32", "cpu": "x64" }, "sha512-nuP7DHs4koAojsIxVPkihNgKiRUKtCU65j5X6DAbSy8VBrfT/o90bCLLHPf51JEdOZwZMFzM6e0NiGWfIWjVAg=="],
"@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
"@types/bun": ["@types/bun@1.3.13", "", { "dependencies": { "bun-types": "1.3.13" } }, "sha512-9fqXWk5YIHGGnUau9TEi+qdlTYDAnOj+xLCmSTwXfAIqXr2x4tytJb43E9uCvt09zJURKXwAtkoH4nLQfzeTXw=="], "@types/bun": ["@types/bun@1.3.13", "", { "dependencies": { "bun-types": "1.3.13" } }, "sha512-9fqXWk5YIHGGnUau9TEi+qdlTYDAnOj+xLCmSTwXfAIqXr2x4tytJb43E9uCvt09zJURKXwAtkoH4nLQfzeTXw=="],
"@types/node": ["@types/node@25.6.0", "", { "dependencies": { "undici-types": "~7.19.0" } }, "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ=="], "@types/node": ["@types/node@25.6.0", "", { "dependencies": { "undici-types": "~7.19.0" } }, "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ=="],
"autoprefixer": ["autoprefixer@10.5.0", "", { "dependencies": { "browserslist": "^4.28.2", "caniuse-lite": "^1.0.30001787", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong=="],
"baseline-browser-mapping": ["baseline-browser-mapping@2.10.27", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-zEs/ufmZoUd7WftKpKyXaT6RFxpQ5Qm9xytKRHvJfxFV9DFJkZph9RvJ1LcOUi0Z1ZVijMte65JbILeV+8QQEA=="],
"browserslist": ["browserslist@4.28.2", "", { "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", "electron-to-chromium": "^1.5.328", "node-releases": "^2.0.36", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg=="],
"bun-types": ["bun-types@1.3.13", "", { "dependencies": { "@types/node": "*" } }, "sha512-QXKeHLlOLqQX9LgYaHJfzdBaV21T63HhFJnvuRCcjZiaUDpbs5ED1MgxbMra71CsryN/1dAoXuJJJwIv/2drVA=="], "bun-types": ["bun-types@1.3.13", "", { "dependencies": { "@types/node": "*" } }, "sha512-QXKeHLlOLqQX9LgYaHJfzdBaV21T63HhFJnvuRCcjZiaUDpbs5ED1MgxbMra71CsryN/1dAoXuJJJwIv/2drVA=="],
"caniuse-lite": ["caniuse-lite@1.0.30001792", "", {}, "sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw=="],
"client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
"detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
"electron-to-chromium": ["electron-to-chromium@1.5.352", "", {}, "sha512-9wHk8x6dyuimoe18EdiDPWKExNdxYqo4fn4FwOVVper6RxT3cmpBwBkWWfSOCYJjQdIco/nPhJhNLmn4Ufg1Yg=="],
"escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
"fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
"nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
"next": ["next@16.2.5", "", { "dependencies": { "@next/env": "16.2.5", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.5", "@next/swc-darwin-x64": "16.2.5", "@next/swc-linux-arm64-gnu": "16.2.5", "@next/swc-linux-arm64-musl": "16.2.5", "@next/swc-linux-x64-gnu": "16.2.5", "@next/swc-linux-x64-musl": "16.2.5", "@next/swc-win32-arm64-msvc": "16.2.5", "@next/swc-win32-x64-msvc": "16.2.5", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-TkVTm9F2WEulkgGljm4wPwNgvCCWCVw6StUHsZb8WZpHFRjepoUWg3d7L4IMg7IyjcJ4Co9eVhpro8e8O+KarQ=="],
"node-releases": ["node-releases@2.0.38", "", {}, "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw=="],
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
"postcss": ["postcss@8.5.14", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg=="],
"postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
"react": ["react@19.2.6", "", {}, "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q=="],
"react-dom": ["react-dom@19.2.6", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.6" } }, "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g=="],
"scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
"semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
"sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
"styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
"tailwindcss": ["tailwindcss@4.2.4", "", {}, "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA=="],
"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
"undici-types": ["undici-types@7.19.2", "", {}, "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg=="], "undici-types": ["undici-types@7.19.2", "", {}, "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg=="],
"update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
"next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
} }
} }
-27
View File
@@ -1,27 +0,0 @@
import {
normalizeTargetUrl,
stripRelayHeaders,
buildRelayRequest,
createRelayResponse,
} from "./relay-utils";
export const config = { runtime: "edge" };
export default async function handler(req: Request): Promise<Response> {
const target = req.headers.get("x-relay-target");
const relayPath = req.headers.get("x-relay-path") || "/";
const targetUrl = normalizeTargetUrl(target, relayPath);
if (!targetUrl) {
return new Response(JSON.stringify({ error: "Missing x-relay-target header" }), {
status: 400,
headers: { "content-type": "application/json" },
});
}
const headers = stripRelayHeaders(new Headers(req.headers));
const fetchOptions = buildRelayRequest(req, targetUrl, headers);
const response = await fetch(targetUrl, fetchOptions);
return createRelayResponse(response);
}
+7
View File
@@ -0,0 +1,7 @@
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;
+14 -8
View File
@@ -3,16 +3,22 @@
"type": "module", "type": "module",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "mkdir -p dist && cp public/index.html dist/index.html", "dev": "next dev",
"start": "bun run src/index.ts", "build": "next build",
"dev": "bun --hot run src/index.ts", "start": "next start",
"test": "bun test", "lint": "next lint",
"lint": "biome check .", "test": "bun test"
"lint:fix": "biome check --write .",
"check": "bunx tsc --noEmit"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "^2.4.14", "@biomejs/biome": "^2.4.14",
"@types/bun": "latest" "@types/bun": "latest",
"autoprefixer": "^10.5.0",
"postcss": "^8.5.14",
"tailwindcss": "^4.2.4"
},
"dependencies": {
"next": "^16.2.5",
"react": "^19.2.6",
"react-dom": "^19.2.6"
} }
} }
+6
View File
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
-542
View File
@@ -1,542 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edge Proxy Test</title>
<style>
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding: 2rem;
background: #0f172a;
color: #e2e8f0;
max-width: 1200px;
margin: 0 auto;
}
h1 {
color: #38bdf8;
margin-bottom: 0.5rem;
}
.subtitle {
color: #94a3b8;
margin-bottom: 2rem;
}
.panel {
background: #1e293b;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid #334155;
}
.panel h2 {
color: #38bdf8;
font-size: 1rem;
margin: 0 0 1rem 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.form-row {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.form-group {
flex: 1;
min-width: 200px;
}
label {
display: block;
font-size: 0.75rem;
color: #94a3b8;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
input, textarea, select {
width: 100%;
padding: 0.75rem;
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
color: #e2e8f0;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.875rem;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}
textarea {
min-height: 150px;
resize: vertical;
}
.method-buttons {
display: flex;
gap: 0.5rem;
}
.method-btn {
padding: 0.5rem 1rem;
background: #334155;
border: 1px solid #475569;
border-radius: 6px;
color: #e2e8f0;
cursor: pointer;
font-weight: 600;
transition: all 0.15s;
}
.method-btn:hover {
background: #475569;
}
.method-btn.active {
background: #38bdf8;
border-color: #38bdf8;
color: #0f172a;
}
.method-btn.get.active { background: #22c55e; border-color: #22c55e; }
.method-btn.post.active { background: #f97316; border-color: #f97316; }
.method-btn.put.active { background: #3b82f6; border-color: #3b82f6; }
.method-btn.delete.active { background: #ef4444; border-color: #ef4444; }
.send-btn {
width: 100%;
padding: 1rem;
background: linear-gradient(135deg, #38bdf8, #0ea5e9);
border: none;
border-radius: 8px;
color: #0f172a;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.send-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
}
.send-btn:active {
transform: translateY(0);
}
.send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.response-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
@media (max-width: 768px) {
.response-section {
grid-template-columns: 1fr;
}
}
.response-meta {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.meta-badge {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #0f172a;
border-radius: 6px;
font-size: 0.875rem;
}
.meta-badge .label {
color: #64748b;
}
.meta-badge .value {
font-weight: 600;
}
.status-2xx { color: #22c55e; }
.status-3xx { color: #eab308; }
.status-4xx { color: #f97316; }
.status-5xx { color: #ef4444; }
pre {
background: #0f172a;
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
font-size: 0.8rem;
line-height: 1.5;
margin: 0;
max-height: 400px;
overflow-y: auto;
}
.error-text {
color: #ef4444;
font-family: monospace;
white-space: pre-wrap;
}
.headers-list {
font-size: 0.75rem;
}
.headers-list div {
padding: 0.25rem 0;
border-bottom: 1px solid #334155;
}
.headers-list div:last-child {
border-bottom: none;
}
.spinner {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid #0f172a;
border-top-color: #38bdf8;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.quick-urls {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.quick-url {
padding: 0.25rem 0.75rem;
background: #334155;
border: none;
border-radius: 4px;
color: #e2e8f0;
font-size: 0.75rem;
cursor: pointer;
transition: background 0.15s;
}
.quick-url:hover {
background: #475569;
}
.presets {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.preset-btn {
padding: 0.25rem 0.75rem;
background: #334155;
border: 1px solid #475569;
border-radius: 4px;
color: #e2e8f0;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.15s;
}
.preset-btn:hover {
background: #475569;
}
.preset-btn.active {
background: #38bdf8;
border-color: #38bdf8;
color: #0f172a;
}
</style>
</head>
<body>
<h1>Edge Proxy Relay Test</h1>
<p class="subtitle">Test your proxy with various endpoints and configurations</p>
<div class="panel">
<h2>Target Configuration</h2>
<div class="form-row">
<div class="form-group">
<label>Target URL</label>
<input type="text" id="targetUrl" value="https://httpbin.org/anything" />
</div>
</div>
<div class="quick-urls">
<span style="color: #64748b; font-size: 0.75rem;">Quick URLs:</span>
<button class="quick-url" onclick="setUrl('https://httpbin.org/anything')">httpbin /anything</button>
<button class="quick-url" onclick="setUrl('https://httpbin.org/get')">httpbin /get</button>
<button class="quick-url" onclick="setUrl('https://httpbin.org/post')">httpbin /post</button>
<button class="quick-url" onclick="setUrl('https://httpbin.org/headers')">httpbin /headers</button>
<button class="quick-url" onclick="setUrl('https://httpbin.org/uuid')">httpbin /uuid</button>
<button class="quick-url" onclick="setUrl('https://jsonplaceholder.typicode.com/posts/1')">JSONPlaceholder</button>
</div>
</div>
<div class="panel">
<h2>Request Method</h2>
<div class="method-buttons">
<button class="method-btn get active" data-method="GET" onclick="setMethod('GET')">GET</button>
<button class="method-btn post" data-method="POST" onclick="setMethod('POST')">POST</button>
<button class="method-btn put" data-method="PUT" onclick="setMethod('PUT')">PUT</button>
<button class="method-btn delete" data-method="DELETE" onclick="setMethod('DELETE')">DELETE</button>
<button class="method-btn" data-method="PATCH" onclick="setMethod('PATCH')">PATCH</button>
<button class="method-btn" data-method="HEAD" onclick="setMethod('HEAD')">HEAD</button>
<button class="method-btn" data-method="OPTIONS" onclick="setMethod('OPTIONS')">OPTIONS</button>
</div>
</div>
<div class="panel">
<h2>Request Body (JSON)</h2>
<div class="form-row">
<div class="form-group" style="flex: 2;">
<textarea id="requestBody" placeholder='{"key": "value"}'>{
"message": "Hello from Edge Proxy",
"timestamp": 1234567890,
"nested": {
"array": [1, 2, 3]
}
}</textarea>
</div>
<div class="form-group" style="flex: 1;">
<label>Presets</label>
<div class="presets">
<button type="button" class="preset-btn" onclick="setBody('empty')">Empty</button>
<button type="button" class="preset-btn" onclick="setBody('simple')">Simple</button>
<button type="button" class="preset-btn" onclick="setBody('form')">Form Data</button>
<button type="button" class="preset-btn" onclick="setBody('large')">Large JSON</button>
</div>
<label>Format</label>
<button type="button" class="preset-btn" onclick="formatJson()">Format JSON</button>
</div>
</div>
</div>
<div class="panel">
<h2>Custom Headers</h2>
<div class="form-row">
<div class="form-group">
<label>Header Key</label>
<input type="text" id="headerKey" placeholder="x-custom-header" />
</div>
<div class="form-group">
<label>Header Value</label>
<input type="text" id="headerValue" placeholder="custom-value" />
</div>
</div>
</div>
<button class="send-btn" id="sendBtn" onclick="sendRequest()">
Send Request
</button>
<div class="panel" style="margin-top: 2rem;">
<h2>Response</h2>
<div class="response-meta" id="responseMeta">
<div class="meta-badge">
<span class="label">Status:</span>
<span class="value" id="statusBadge">-</span>
</div>
<div class="meta-badge">
<span class="label">Time:</span>
<span class="value" id="timeBadge">-</span>
</div>
<div class="meta-badge">
<span class="label">Size:</span>
<span class="value" id="sizeBadge">-</span>
</div>
</div>
<div class="response-section">
<div>
<label style="color: #64748b; font-size: 0.75rem; margin-bottom: 0.5rem; display: block;">Response Body</label>
<pre id="responseBody">Response will appear here...</pre>
</div>
<div>
<label style="color: #64748b; font-size: 0.75rem; margin-bottom: 0.5rem; display: block;">Response Headers</label>
<pre id="responseHeaders" class="headers-list">Response headers will appear here...</pre>
</div>
</div>
</div>
<script>
let currentMethod = 'GET';
function setMethod(method) {
currentMethod = method;
document.querySelectorAll('.method-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.method-btn').forEach(btn => {
if (btn.dataset.method === method) btn.classList.add('active');
});
}
function setUrl(url) {
document.getElementById('targetUrl').value = url;
}
function setBody(type) {
const textarea = document.getElementById('requestBody');
switch (type) {
case 'empty':
textarea.value = '';
break;
case 'simple':
textarea.value = JSON.stringify({ hello: 'world' }, null, 2);
break;
case 'form':
textarea.value = JSON.stringify({
name: 'John Doe',
email: 'john@example.com',
message: 'Hello!'
}, null, 2);
break;
case 'large':
textarea.value = JSON.stringify({
users: Array.from({ length: 100 }, (_, i) => ({
id: i + 1,
name: `User ${i + 1}`,
email: `user${i + 1}@example.com`,
active: i % 2 === 0
}))
}, null, 2);
break;
}
}
function formatJson() {
const textarea = document.getElementById('requestBody');
try {
const parsed = JSON.parse(textarea.value);
textarea.value = JSON.stringify(parsed, null, 2);
} catch (e) {
alert('Invalid JSON: ' + e.message);
}
}
function getStatusClass(status) {
if (status >= 200 && status < 300) return 'status-2xx';
if (status >= 300 && status < 400) return 'status-3xx';
if (status >= 400 && status < 500) return 'status-4xx';
return 'status-5xx';
}
async function sendRequest() {
const btn = document.getElementById('sendBtn');
const targetUrl = document.getElementById('targetUrl').value;
const requestBody = document.getElementById('requestBody').value;
const headerKey = document.getElementById('headerKey').value;
const headerValue = document.getElementById('headerValue').value;
// Update UI
btn.disabled = true;
btn.innerHTML = '<span class="spinner"></span> Sending...';
document.getElementById('responseBody').textContent = 'Sending request...';
document.getElementById('responseHeaders').textContent = '-';
document.getElementById('statusBadge').textContent = '-';
document.getElementById('timeBadge').textContent = '-';
document.getElementById('sizeBadge').textContent = '-';
const headers = {
'x-relay-target': targetUrl,
'Content-Type': 'application/json'
};
if (headerKey && headerValue) {
headers[headerKey] = headerValue;
}
try {
const start = Date.now();
const fetchOptions = {
method: currentMethod,
headers
};
if (!['GET', 'HEAD', 'OPTIONS'].includes(currentMethod) && requestBody) {
fetchOptions.body = requestBody;
}
const res = await fetch('/api', fetchOptions);
const elapsed = Date.now() - start;
// Parse response
let responseText = '';
let responseData = null;
const contentType = res.headers.get('content-type') || '';
if (contentType.includes('application/json')) {
responseData = await res.json();
responseText = JSON.stringify(responseData, null, 2);
} else {
responseText = await res.text();
}
// Get response headers
const headersObj = {};
res.headers.forEach((value, key) => {
headersObj[key] = value;
});
// Update UI
const statusEl = document.getElementById('statusBadge');
statusEl.textContent = `${res.status} ${res.statusText}`;
statusEl.className = `value ${getStatusClass(res.status)}`;
document.getElementById('timeBadge').textContent = `${elapsed}ms`;
document.getElementById('sizeBadge').textContent = formatBytes(new Blob([responseText]).size);
document.getElementById('responseBody').textContent = responseText;
document.getElementById('responseHeaders').textContent = JSON.stringify(headersObj, null, 2);
} catch (err) {
document.getElementById('responseBody').innerHTML = `<span class="error-text">Error: ${err.message}</span>`;
document.getElementById('statusBadge').textContent = 'Error';
document.getElementById('statusBadge').className = 'value status-5xx';
} finally {
btn.disabled = false;
btn.textContent = 'Send Request';
}
}
function formatBytes(bytes) {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
</script>
</body>
</html>
-257
View File
@@ -1,257 +0,0 @@
import { describe, expect, test } from "bun:test";
import {
buildRelayRequest,
createRelayResponse,
normalizeTargetUrl,
shouldSendBody,
stripRelayHeaders,
} from "~/relay-utils";
describe("normalizeTargetUrl", () => {
test("returns null when target is null", () => {
expect(normalizeTargetUrl(null, "/")).toBeNull();
});
test("returns null when target is empty string", () => {
expect(normalizeTargetUrl("", "/")).toBeNull();
});
test("removes trailing slash from target", () => {
expect(normalizeTargetUrl("https://httpbin.org/", "/get")).toBe(
"https://httpbin.org/get",
);
});
test("keeps target without trailing slash", () => {
expect(normalizeTargetUrl("https://httpbin.org", "/get")).toBe(
"https://httpbin.org/get",
);
});
test("appends relay path", () => {
expect(normalizeTargetUrl("https://example.com", "/api/users")).toBe(
"https://example.com/api/users",
);
});
test("handles nested paths", () => {
expect(
normalizeTargetUrl("https://api.example.com", "/v1/users/123/profile"),
).toBe("https://api.example.com/v1/users/123/profile");
});
});
describe("stripRelayHeaders", () => {
test("removes x-relay-target header", () => {
const headers = new Headers({ "x-relay-target": "https://test.com" });
const stripped = stripRelayHeaders(headers);
expect(stripped.get("x-relay-target")).toBeNull();
});
test("removes x-relay-path header", () => {
const headers = new Headers({ "x-relay-path": "/test" });
const stripped = stripRelayHeaders(headers);
expect(stripped.get("x-relay-path")).toBeNull();
});
test("removes host header", () => {
const headers = new Headers({ host: "localhost:3000" });
const stripped = stripRelayHeaders(headers);
expect(stripped.get("host")).toBeNull();
});
test("preserves other headers", () => {
const headers = new Headers({
"x-relay-target": "https://test.com",
"x-custom-header": "value",
authorization: "Bearer token",
});
const stripped = stripRelayHeaders(headers);
expect(stripped.get("x-custom-header")).toBe("value");
expect(stripped.get("authorization")).toBe("Bearer token");
});
test("handles multiple relay headers", () => {
const headers = new Headers({
"x-relay-target": "https://test.com",
"x-relay-path": "/path",
host: "test.com",
"content-type": "application/json",
});
const stripped = stripRelayHeaders(headers);
expect(stripped.get("content-type")).toBe("application/json");
expect(stripped.get("x-relay-target")).toBeNull();
expect(stripped.get("x-relay-path")).toBeNull();
expect(stripped.get("host")).toBeNull();
});
});
describe("shouldSendBody", () => {
test("returns false for GET", () => {
expect(shouldSendBody("GET")).toBe(false);
});
test("returns false for HEAD", () => {
expect(shouldSendBody("HEAD")).toBe(false);
});
test("returns true for POST", () => {
expect(shouldSendBody("POST")).toBe(true);
});
test("returns true for PUT", () => {
expect(shouldSendBody("PUT")).toBe(true);
});
test("returns true for PATCH", () => {
expect(shouldSendBody("PATCH")).toBe(true);
});
test("returns true for DELETE", () => {
expect(shouldSendBody("DELETE")).toBe(true);
});
test("is case-sensitive", () => {
expect(shouldSendBody("get")).toBe(true);
expect(shouldSendBody("post")).toBe(true);
});
});
describe("buildRelayRequest", () => {
test("sets correct method", () => {
const req = new Request("http://test.com", { method: "POST" });
const headers = new Headers();
const result = buildRelayRequest(req, headers);
expect(result.method).toBe("POST");
});
test("sets headers", () => {
const req = new Request("http://test.com");
const headers = new Headers({ "x-custom": "value" });
const result = buildRelayRequest(req, headers);
expect(result.headers).toBe(headers);
});
test("omits body for GET", () => {
const req = new Request("http://test.com", { method: "GET" });
const headers = new Headers();
const result = buildRelayRequest(req, headers);
expect(result.body).toBeUndefined();
});
test("omits body for HEAD", () => {
const req = new Request("http://test.com", { method: "HEAD" });
const headers = new Headers();
const result = buildRelayRequest(req, headers);
expect(result.body).toBeUndefined();
});
test("includes body for POST", () => {
const body = JSON.stringify({ test: true });
const req = new Request("http://test.com", { method: "POST", body });
const headers = new Headers();
const result = buildRelayRequest(req, headers);
expect(result.body).toBeDefined();
expect(result.duplex).toBe("half");
});
test("includes body for PUT", () => {
const body = JSON.stringify({ update: true });
const req = new Request("http://test.com", { method: "PUT", body });
const headers = new Headers();
const result = buildRelayRequest(req, headers);
expect(result.body).toBeDefined();
});
test("includes body for PATCH", () => {
const body = JSON.stringify({ patch: true });
const req = new Request("http://test.com", { method: "PATCH", body });
const headers = new Headers();
const result = buildRelayRequest(req, headers);
expect(result.body).toBeDefined();
});
test("includes body for DELETE", () => {
const body = JSON.stringify({ delete: true });
const req = new Request("http://test.com", { method: "DELETE", body });
const headers = new Headers();
const result = buildRelayRequest(req, headers);
expect(result.body).toBeDefined();
});
});
describe("createRelayResponse", () => {
test("preserves status", async () => {
const mockResponse = new Response("body", { status: 418 });
const result = createRelayResponse(mockResponse);
expect(result.status).toBe(418);
});
test("preserves headers", async () => {
const mockResponse = new Response("body", {
headers: { "x-custom": "value" },
});
const result = createRelayResponse(mockResponse);
expect(result.headers.get("x-custom")).toBe("value");
});
test("preserves body", async () => {
const mockResponse = new Response("test body content");
const result = createRelayResponse(mockResponse);
expect(await result.text()).toBe("test body content");
});
test("handles different status codes", async () => {
const mockResponse = new Response(null, { status: 404 });
const result = createRelayResponse(mockResponse);
expect(result.status).toBe(404);
});
test("handles 500 status", async () => {
const mockResponse = new Response("error", { status: 500 });
const result = createRelayResponse(mockResponse);
expect(result.status).toBe(500);
});
});
describe("integration: full relay flow", () => {
test("complete flow with mocked fetch", async () => {
const target = "https://httpbin.org";
const relayPath = "/get";
const targetUrl = normalizeTargetUrl(target, relayPath);
expect(targetUrl).toBe("https://httpbin.org/get");
const originalHeaders = new Headers({
"x-relay-target": target,
"x-relay-path": relayPath,
host: "localhost",
"x-custom": "preserved",
});
const strippedHeaders = stripRelayHeaders(originalHeaders);
expect(strippedHeaders.get("x-relay-target")).toBeNull();
expect(strippedHeaders.get("x-relay-path")).toBeNull();
expect(strippedHeaders.get("host")).toBeNull();
expect(strippedHeaders.get("x-custom")).toBe("preserved");
});
test("POST flow with body preservation", () => {
const req = new Request("http://test.com", {
method: "POST",
body: JSON.stringify({ data: "test" }),
headers: { "content-type": "application/json" },
});
const options = buildRelayRequest(req, new Headers());
expect(options.method).toBe("POST");
expect(options.body).toBeDefined();
});
test("error case: missing target", () => {
const target = null;
const relayPath = "/test";
const result = normalizeTargetUrl(target, relayPath);
expect(result).toBeNull();
});
});
-53
View File
@@ -1,53 +0,0 @@
import {
buildRelayRequest,
createRelayResponse,
normalizeTargetUrl,
stripRelayHeaders,
isAllowedTarget,
} from "~/relay-utils";
export const config = { runtime: "edge" };
// Only allow safe methodsa
const ALLOWED_METHODS = new Set(["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"]);
export default async function handler(req: Request): Promise<Response> {
// Method validation
if (!ALLOWED_METHODS.has(req.method)) {
return new Response(JSON.stringify({ error: "Method not allowed" }), {
status: 405,
headers: { "content-type": "application/json" },
});
}
const target = req.headers.get("x-relay-target");
const relayPath = req.headers.get("x-relay-path") || "/";
const targetUrl = normalizeTargetUrl(target, relayPath);
if (!targetUrl) {
return new Response(
JSON.stringify({ error: "Missing x-relay-target header" }),
{
status: 400,
headers: { "content-type": "application/json" },
},
);
}
// Target validation (SSRF prevention)
if (!isAllowedTarget(targetUrl)) {
return new Response(
JSON.stringify({ error: "Target domain not allowed" }),
{
status: 403,
headers: { "content-type": "application/json" },
},
);
}
const headers = stripRelayHeaders(new Headers(req.headers));
const fetchOptions = buildRelayRequest(req, headers);
const response = await fetch(targetUrl, fetchOptions);
return createRelayResponse(response);
}
-143
View File
@@ -1,143 +0,0 @@
// Allowlist: only these headers are forwarded to prevent leaking
// Vercel internal metadata, credentials, and infrastructure info
const ALLOWED_HEADERS = new Set([
// Standard request headers
"content-type",
"accept",
"accept-encoding",
"accept-language",
"user-agent",
"referer",
"origin",
// Auth headers (but NOT cookies)
"authorization",
"proxy-authorization",
// Content negotiation
"cache-control",
// Custom headers (no prefix restriction, but Vercel-specific are blocked)
]);
// Blocklist: sensitive headers that should NEVER be forwarded
const BLOCKED_HEADERS = new Set([
// Vercel infrastructure headers
"x-vercel-id",
"x-vercel-deployment-url",
"x-vercel-oidc-token",
"x-vercel-oidc-token-ts",
"x-vercel-signature",
"x-vercel-edgified",
"x-vercel-ip-city",
"x-vercel-ip-country",
"x-vercel-ip-country-region",
"x-vercel-ip-latency",
"x-vercel-deployment-config",
"x-vercel-rewritten-query",
// Cloudflare specific
"cf-ray",
"cf-connecting-ip",
"cf-ipcountry",
"cf-ray-id",
// Forwarding proxies (can leak internal network info)
"x-forwarded-for",
"x-forwarded-host",
"x-forwarded-proto",
"forwarded",
// Cookies (should be explicitly handled, not blindly forwarded)
"cookie",
"set-cookie",
// Internal infrastructure
"x-real-ip",
"x-cluster-client-ip",
// Authentication tokens
"x-api-key",
// Caching
"x-cache",
]);
// Internal relay headers
const INTERNAL_HEADERS = new Set([
"x-relay-target",
"x-relay-path",
"host",
]);
export interface RelayOptions {
stripHeaders?: string[];
}
export function isAllowedTarget(url: string): boolean {
try {
const parsed = new URL(url);
// Only allow HTTP/HTTPS (prevents file://, data:, etc.)
return ["http:", "https:"].includes(parsed.protocol);
} catch {
return false;
}
}
export function normalizeTargetUrl(
target: string | null,
relayPath: string,
): string | null {
if (!target) return null;
return target.replace(/\/$/, "") + relayPath;
}
export function filterHeaders(headers: Headers): Headers {
const filtered = new Headers();
for (const [key, value] of headers.entries()) {
const lowerKey = key.toLowerCase();
// Skip internal relay headers
if (INTERNAL_HEADERS.has(lowerKey)) continue;
// Skip blocked headers (security critical)
if (BLOCKED_HEADERS.has(lowerKey)) continue;
// Block headers with sensitive infrastructure prefixes
if (lowerKey.startsWith("x-vercel-")) continue;
if (lowerKey.startsWith("cf-")) continue;
if (lowerKey.startsWith("x-forwarded-")) continue;
// For known safe headers, always allow
if (ALLOWED_HEADERS.has(lowerKey)) {
filtered.set(key, value);
continue;
}
// Allow custom headers (no sensitive prefix)
// Custom headers typically use kebab-case (e.g., x-custom-header)
filtered.set(key, value);
}
return filtered;
}
export function stripRelayHeaders(headers: Headers): Headers {
// Use the secure filter instead of manual deletion
return filterHeaders(headers);
}
export function shouldSendBody(method: string): boolean {
return method !== "GET" && method !== "HEAD";
}
export function buildRelayRequest(
req: Request,
_headers: Headers,
): RequestInit {
return {
method: req.method,
headers: _headers,
body: shouldSendBody(req.method) ? req.body : undefined,
duplex: "half" as const,
};
}
export function createRelayResponse(response: Response): Response {
return new Response(response.body, {
status: response.status,
headers: response.headers,
});
}
+11
View File
@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}
+18 -21
View File
@@ -1,30 +1,27 @@
{ {
"compilerOptions": { "compilerOptions": {
"lib": ["ESNext"],
"target": "ESNext", "target": "ESNext",
"module": "Preserve", "lib": ["dom", "dom.iterable", "esnext"],
"moduleDetection": "force",
"jsx": "react-jsx",
"allowJs": true, "allowJs": true,
"types": ["bun"],
// Bundler mode
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true,
// Best practices
"strict": true,
"skipLibCheck": true, "skipLibCheck": true,
"noFallthroughCasesInSwitch": true, "strict": true,
"noUncheckedIndexedAccess": true, "noEmit": true,
"noImplicitOverride": true, "esModuleInterop": true,
"module": "esnext",
// Path aliases "moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": { "paths": {
"~/*": ["./src/*"] "@/*": ["./src/*"]
} }
}, },
"include": ["src/**/*"] "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
} }
-17
View File
@@ -1,17 +0,0 @@
{
"$schema": "https://openapi.vercel.sh/vercel.json",
"bunVersion": "1",
"installCommand": "bun install",
"outputDirectory": "dist",
"trailingSlash": false,
"rewrites": [
{
"source": "/api",
"destination": "/api/index.ts"
},
{
"source": "/api/(.*)",
"destination": "/api/index.ts"
}
]
}