roaris
commented
2 months ago XSSが発動するURLをクローラに報告し、クローラに設定されたCookieを取得する形式の問題
サーバの実装 CSPが設定されていることに着目する また、replace関数を使ったテンプレートエンジン(render関数)が使われている
import Fastify from "fastify";
import crypto from "node:crypto";
import { promises as fs } from "node:fs";
const app = Fastify();
const PORT = 3000;
// A simple template engine!
const render = async (view, params) => {
const tmpl = await fs.readFile(`views/${view}.html`, { encoding: "utf8" });
const html = Object.entries(params).reduce(
(prev, [key, value]) => prev.replace(`{{${key}}}`, value),
tmpl
);
return html;
};
app.addHook("onRequest", (req, res, next) => {
const nonce = crypto.randomBytes(16).toString("hex");
res.header("Content-Security-Policy", `script-src 'nonce-${nonce}';`);
req.nonce = nonce;
next();
});
app.get("/", async (req, res) => {
const html = await render("index", {});
res.type("text/html").send(html);
});
app.get("/note", async (req, res) => {
const title = String(req.query.title);
const content = String(req.query.content);
const html = await render("note", {
nonce: req.nonce,
data: JSON.stringify({ title, content }),
});
res.type("text/html").send(html);
});
app.listen({ port: PORT, host: "0.0.0.0" });テンプレート
{{nonce}}と{{data}}がrender関数によって置き換えられる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pico Note</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<link
href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css"
rel="stylesheet"
/>
<style>
body {
font-family: "Press Start 2P", "Noto Emoji", sans-serif;
background-color: #212529;
color: #fff;
max-width: 56rem;
margin: auto;
padding: 3rem;
display: flex;
gap: 2rem;
flex-direction: column;
justify-content: start;
}
</style>
</head>
<body>
<h1>Pico Note</h1>
<div class="nes-container is-dark with-title">
<p id="title" class="title"></p>
<p id="content"></p>
</div>
<div style="display: flex; justify-content: center">
<button id="back" type="button" class="nes-btn">Back</button>
</div>
<script nonce="{{nonce}}">
const { title, content } = {{data}};
document.getElementById("title").textContent = title;
document.getElementById("content").textContent = content;
document.getElementById("back").addEventListener("click", () => history.back());
</script>
</body>
</html>
https://alpacahack.com/challenges/pico-note-1 時間内に解けなかった問題