{
"auth": "YOUR_SERVER_KEY",
"payload": { ... }
}
function authenticate(req, res, next) {
const key = req.body.auth;
const SERVER_KEY = process.env.SERVER_KEY;
if (!key) {
return res.status(401).json({
success: false,
error: 'Missing auth field in JSON body'
});
}
if (key !== SERVER_KEY) {
return res.status(403).json({
success: false,
error: 'Invalid or unauthorized key'
});
}
next();
}
const express = require('express');
const app = express();
app.use(express.json());
function authenticate(req, res, next) {
const key = req.query.key; // secret in URL
const SERVER_KEY = "MY_EDU_SECRET";
if (!key) {
return res.status(401).json({
success: false,
error: "Missing ?key= in URL"
});
}
if (key !== SERVER_KEY) {
return res.status(403).json({
success: false,
error: "Invalid key"
});
}
next();
}
app.post('/api/data', authenticate, (req, res) => {
res.json({
success: true,
message: "Authenticated via URL key",
data: req.body
});
});
app.listen(3000, () => console.log("Server running"));
POST /api/data?key=MY_EDU_SECRET
const express = require('express');
const app = express();
app.use(express.json());
function authenticate(req, res, next) {
const key = req.body.auth; // secret in JSON body
const SERVER_KEY = "MY_EDU_SECRET";
if (!key) {
return res.status(401).json({
success: false,
error: "Missing auth field in JSON body"
});
}
if (key !== SERVER_KEY) {
return res.status(403).json({
success: false,
error: "Invalid auth key"
});
}
next();
}
app.post('/api/data', authenticate, (req, res) => {
res.json({
success: true,
message: "Authenticated via JSON body",
data: req.body
});
});
app.listen(3000, () => console.log("Server running"));
{
"auth": "MY_EDU_SECRET",
"payload": {
"message": "Hello"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hack This Request – Vulnerability Playground</title>
<style>
body { font-family: Arial; margin: 40px; max-width: 900px; }
input, textarea { width: 100%; padding: 10px; margin: 8px 0; }
button { padding: 12px 20px; background: #d62828; color: white; border: none; cursor: pointer; }
button:hover { background: #a4161a; }
pre { background: #f4f4f4; padding: 15px; border-radius: 6px; }
.secret-box { background: #ffe8e8; padding: 10px; border-left: 5px solid #d62828; }
.network-log { background: #eef; padding: 10px; border-left: 5px solid #446; margin-top: 20px; }
</style>
</head>
<body>
<h1>Hack This Request – Vulnerability Playground</h1>
<p>This sandbox simulates insecure APIs. Your mission: <strong>find and leak secrets</strong>.</p>
<div class="secret-box">
<strong>Server Secret (hidden from students):</strong>
<span id="serverSecret">MY_EDU_SECRET</span>
</div>
<hr>
<h2>Network Inspector</h2>
<p>Every request you send will appear here.</p>
<pre id="networkInspector" class="network-log">No requests yet.</pre>
<hr>
<h2>Vulnerability 1 — Secret in URL</h2>
<label>Request URL</label>
<input id="urlInput" value="/api/data?key=MY_EDU_SECRET">
<label>JSON Body</label>
<textarea id="bodyInput" rows="5">{ "message": "Student request" }</textarea>
<button onclick="hackUrl()">Exploit URL Vulnerability</button>
<h3>Server Response</h3>
<pre id="urlResponse"></pre>
<hr>
<h2>Vulnerability 2 — Secret in JSON Body</h2>
<label>Request URL</label>
<input id="urlBodyInput" value="/api/data">
<label>JSON Body (contains secret)</label>
<textarea id="bodyAuthInput" rows="5">
{
"auth": "MY_EDU_SECRET",
"message": "Student request"
}
</textarea>
<button onclick="hackBody()">Exploit Body Vulnerability</button>
<h3>Server Response</h3>
<pre id="bodyResponse"></pre>
<hr>
<h2>Vulnerability 3 — Secret in Headers</h2>
<label>Request URL</label>
<input id="headerUrlInput" value="/api/data">
<label>Header Secret</label>
<input id="headerSecretInput" value="MY_EDU_SECRET">
<button onclick="hackHeader()">Exploit Header Vulnerability</button>
<h3>Server Response</h3>
<pre id="headerResponse"></pre>
<hr>
<h2>Vulnerability 4 — Secret in Cookies</h2>
<p>This simulates a server that stores secrets in cookies.</p>
<button onclick="hackCookie()">Exploit Cookie Vulnerability</button>
<h3>Server Response</h3>
<pre id="cookieResponse"></pre>
<hr>
<h2>Vulnerability 5 — Secret in Hidden HTML Fields</h2>
<input type="hidden" id="hiddenSecret" value="MY_EDU_SECRET">
<button onclick="hackHidden()">Exploit Hidden Field Vulnerability</button>
<h3>Server Response</h3>
<pre id="hiddenResponse"></pre>
<script>
// Fake vulnerable server
function fakeServer(request) {
const secret = document.getElementById("serverSecret").textContent;
const leaked = {
requestSent: request,
leakedSecret: secret,
warning: "This API is vulnerable. Secrets should NEVER be stored in URLs, bodies, headers, cookies, or hidden fields."
};
return leaked;
}
// Network inspector logger
function logNetwork(request) {
const inspector = document.getElementById("networkInspector");
inspector.textContent = JSON.stringify(request, null, 2);
}
// Vulnerability 1 — URL
function hackUrl() {
const url = document.getElementById("urlInput").value;
const body = document.getElementById("bodyInput").value;
const request = { type: "URL", url, body };
logNetwork(request);
const result = fakeServer(request);
document.getElementById("urlResponse").textContent = JSON.stringify(result, null, 2);
}
// Vulnerability 2 — Body
function hackBody() {
const url = document.getElementById("urlBodyInput").value;
const body = document.getElementById("bodyAuthInput").value;
const request = { type: "Body", url, body };
logNetwork(request);
const result = fakeServer(request);
document.getElementById("bodyResponse").textContent = JSON.stringify(result, null, 2);
}
// Vulnerability 3 — Header
function hackHeader() {
const url = document.getElementById("headerUrlInput").value;
const headerSecret = document.getElementById("headerSecretInput").value;
const request = { type: "Header", url, headers: { "X-Secret": headerSecret } };
logNetwork(request);
const result = fakeServer(request);
document.getElementById("headerResponse").textContent = JSON.stringify(result, null, 2);
}
// Vulnerability 4 — Cookie
function hackCookie() {
document.cookie = "secret=MY_EDU_SECRET";
const request = { type: "Cookie", cookies: document.cookie };
logNetwork(request);
const result = fakeServer(request);
document.getElementById("cookieResponse").textContent = JSON.stringify(result, null, 2);
}
// Vulnerability 5 — Hidden HTML Field
function hackHidden() {
const hiddenSecret = document.getElementById("hiddenSecret").value;
const request = { type: "HiddenField", hiddenSecret };
logNetwork(request);
const result = fakeServer(request);
document.getElementById("hiddenResponse").textContent = JSON.stringify(result, null, 2);
}
</script>
</body>
</html>
<hr>
<h2>Vulnerability 6 — Replay Attacks</h2>
<p>Capture a request and replay it to exploit the vulnerability.</p>
<button onclick="captureRequest()">Capture Last Request</button>
<button onclick="replayAttack()">Replay Captured Request</button>
<h3>Captured Request</h3>
<pre id="capturedRequest">No request captured yet.</pre>
<h3>Replay Attack Result</h3>
<pre id="replayResult"></pre>
let lastCapturedRequest = null;
// Capture the last request shown in the network inspector
function captureRequest() {
const inspector = document.getElementById("networkInspector").textContent;
try {
lastCapturedRequest = JSON.parse(inspector);
document.getElementById("capturedRequest").textContent =
JSON.stringify(lastCapturedRequest, null, 2);
} catch {
document.getElementById("capturedRequest").textContent =
"No valid request to capture.";
}
}
// Replay the captured request
function replayAttack() {
if (!lastCapturedRequest) {
document.getElementById("replayResult").textContent =
"No captured request available.";
return;
}
// Fake vulnerable server accepts replayed requests
const result = {
replayedRequest: lastCapturedRequest,
leakedSecret: document.getElementById("serverSecret").textContent,
attackSuccess: true,
explanation:
"Replay attack succeeded because the server does not use timestamps, nonces, or signatures. " +
"Any previously valid request can be reused by an attacker."
};
document.getElementById("replayResult").textContent =
JSON.stringify(result, null, 2);
}
