XSS and Why It Matters to an API

// ── Plain fields: reject markup, do not escape it ─────────────────────
const profileSchema = z.object({
  // A display name has no legitimate reason to contain markup.
  name: z.string().min(1).max(100)
    .refine((v) => !/[<>]/.test(v), 'Must not contain < or >'),
  bio: z.string().max(500)
    .refine((v) => !/<[a-z/]/i.test(v), 'HTML is not permitted here'),
  website: z.string().url().max(200)
    .refine((v) => /^https?:\/\//.test(v), 'Must be http or https')
    .optional(),   // ← blocks javascript: and data: URLs
}).strict();

// ❌ Do NOT store escaped HTML
// await db.users.update(id, { name: escapeHtml(req.body.name) });
//   → the mobile app shows "O&#39;Brien"
//   → the CSV export shows "O&#39;Brien"
//   → the frontend escapes again: "O&amp;#39;Brien"
// Store the truth. Escape at the point of rendering.

// ── Rich text: sanitise SERVER-SIDE with an allowlist ────────────────
import createDOMPurify from 'dompurify';
import { JSDOM } from 'jsdom';
const DOMPurify = createDOMPurify(new JSDOM('').window);

export function sanitiseRichText(html) {
  if (typeof html !== 'string' || html.length > 100_000) {
    throw new BadRequestError('content_too_large');
  }
  return DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'a', 'ul', 'ol', 'li',
                   'h2', 'h3', 'blockquote', 'code', 'pre'],
    ALLOWED_ATTR: ['href', 'title'],
    ALLOWED_URI_REGEXP: /^(?:https?|mailto):/i,     // no javascript:, no data:
    FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'embed', 'form'],
    FORBID_ATTR: ['style', 'onerror', 'onload', 'onclick', 'srcset'],
    ALLOW_DATA_ATTR: false,
  });
}

// Client-side sanitisation is a nicety. The API must sanitise again, because
// the API is reachable without the client.
app.put('/api/posts/:id', auth, async (req, res) => {
  const body = sanitiseRichText(req.body.content);
  await req.repos.posts.update(req.params.id, { content: body });
  res.sendStatus(204);
});

// ── Links: rewrite them, do not just allow them ──────────────────────
export function safeLink(url) {
  let parsed;
  try { parsed = new URL(url); } catch { return null; }
  if (!['http:', 'https:', 'mailto:'].includes(parsed.protocol)) return null;
  return parsed.toString();
}
// javascript:alert(1) and data:text/html,... are both rejected here, and both
// are valid href values that DOMPurify configurations sometimes let through.

// An API that is never rendered as HTML cannot deliver XSS itself.

// 1. nosniff plus an accurate type, on every response
app.use((req, res, next) => {
  res.set('X-Content-Type-Options', 'nosniff');
  res.set('Content-Security-Policy', "default-src 'none'; frame-ancestors 'none'");
  next();
});
app.use((req, res, next) => {
  const json = res.json.bind(res);
  res.json = (body) => {
    res.set('Content-Type', 'application/json; charset=utf-8');
    return json(body);
  };
  next();
});

// 2. User content NEVER from your origin — this is the important one
//      app:          https://abc.com
//      user content: https://usercontent-abc.com     ← a different SITE
// Even if an uploaded file executes, it does so on an origin with no cookies,
// no localStorage and no access to your DOM.

app.get('/files/:id', auth, async (req, res) => {
  const file = await req.repos.files.find(req.params.id);
  if (!file) return res.sendStatus(404);

  // Redirect to a signed URL on the content domain rather than proxying it.
  res.redirect(await signedUrl(file.storageKey, { expiresIn: 300 }));
});

// If you must serve it yourself:
res.set({
  'Content-Type': file.detectedMime,                  // detected, not claimed
  'X-Content-Type-Options': 'nosniff',
  'Content-Disposition': `attachment; filename="${sanitise(file.name)}"`,
  'Content-Security-Policy': "default-src 'none'; sandbox",
  'Cross-Origin-Resource-Policy': 'same-origin',
});

// 3. Never build HTML in the API
// ❌ res.send(`<h1>Welcome ${user.name}</h1>`)
// If an endpoint returns HTML, it is a page, and it needs page defences.

// 4. Bound the damage in the frontend contract
//    - access token in memory, never localStorage
//    - refresh token in an HttpOnly cookie
//    - short token lifetimes
// An XSS can then act while the tab is open, and cannot walk away with a
// credential that works tomorrow from another machine.

// The API cannot test rendering, but it can test that it does not become a
// rendering context and does not corrupt what it stores.

const XSS_PAYLOADS = [
  '<script>alert(1)</script>',
  '"><script>alert(1)</script>',
  "<img src=x onerror=alert(1)>",
  '<svg/onload=alert(1)>',
  'javascript:alert(1)',
  'data:text/html,<script>alert(1)</script>',
  '<iframe src="javascript:alert(1)">',
  '<a href="javascript:alert(1)">x</a>',
  '<style>@import"//evil.com"</style>',
  '\u003cscript\u003ealert(1)\u003c/script\u003e',
];

describe('XSS: the API half', () => {
  it('rejects markup in plain fields', async () => {
    for (const payload of XSS_PAYLOADS) {
      const res = await request(app).patch('/api/users/me')
        .set('Authorization', `Bearer ${token}`)
        .send({ name: payload });
      expect(res.status).toBe(400);
    }
  });

  it('strips dangerous markup from rich text but keeps the safe parts', async () => {
    const res = await request(app).put('/api/posts/1')
      .set('Authorization', `Bearer ${token}`)
      .send({ content: '<p>Hello <strong>world</strong></p><script>alert(1)</script>' });

    const stored = await db('posts').where({ id: 1 }).first();
    expect(stored.content).toContain('<strong>world</strong>');   // preserved
    expect(stored.content).not.toContain('<script');              // removed
    expect(stored.content).not.toContain('onerror');
  });

  it('rejects javascript: and data: URLs', async () => {
    for (const url of ['javascript:alert(1)', 'data:text/html,<script>alert(1)</script>']) {
      const res = await request(app).patch('/api/users/me')
        .set('Authorization', `Bearer ${token}`).send({ website: url });
      expect(res.status).toBe(400);
    }
  });

  it('does not store pre-escaped HTML', async () => {
    await request(app).patch('/api/users/me')
      .set('Authorization', `Bearer ${token}`).send({ name: "O'Brien & Sons" });

    const stored = await db('users').where({ id: user.id }).first();
    expect(stored.name).toBe("O'Brien & Sons");      // the truth, not &amp;
  });

  it('never returns a response a browser would render', async () => {
    const res = await request(app).get('/api/me').set('Authorization', `Bearer ${token}`);
    expect(res.headers['content-type']).toMatch(/application\/json/);
    expect(res.headers['x-content-type-options']).toBe('nosniff');
  });
});