app/lib/preview.server.ts

Functions

Imports

It imports no other module of this repo. Imported by app/routes/ai-draft.preview.ts, app/routes/preview.ts.

Source

1// The preview: the site renders the draft with its own pipeline, and Carrel serves that page into a
2// sandboxed iframe. The page is the site's markup, so it runs with no script, no forms, no network
3// but the site's own styles and images, and an opaque origin that cannot reach Carrel.
4
5import { buildPolicy } from "@dustinedwards/site-runtime/csp";
6
7/** The policy for a preview document. `sandbox` in the header holds even if the iframe attribute is lost. */
8export function previewPolicy(siteOrigin: string): string {
9  return buildPolicy([
10    "sandbox",
11    "default-src 'none'",
12    `style-src ${siteOrigin} 'unsafe-inline'`,
13    `img-src ${siteOrigin} data:`,
14    `font-src ${siteOrigin}`,
15    `media-src ${siteOrigin}`,
16    "script-src 'none'",
17    "form-action 'none'",
18    `base-uri ${siteOrigin}`,
19    "frame-ancestors 'self'",
20  ]);
21}
22
23/**
24 * Relative URLs in the site's page (its stylesheets, images) must resolve against the site, not
25 * Carrel, so a <base> goes first in <head>. Any <base> the page carries is removed first.
26 */
27export function withSiteBase(html: string, siteOrigin: string): string {
28  const base = `<base href="${siteOrigin}/">`;
29  const stripped = html.replace(/<base\b[^>]*>/gi, "");
30  if (/<head\b[^>]*>/i.test(stripped)) return stripped.replace(/<head\b[^>]*>/i, (head) => `${head}${base}`);
31  return `${base}${stripped}`;
32}
33
34/** A line of plain text at the top of the page saying whose text this is, for a preview of something other than the person's own draft. */
35export function withLabel(html: string, label: string): string {
36  const note = `<p style="margin:0;padding:8px 12px;font:14px/1.4 system-ui,sans-serif;background:#fff3cd;color:#333;border-bottom:1px solid #d9c27a">${label.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`)}</p>`;
37  return /<body\b[^>]*>/i.test(html) ? html.replace(/<body\b[^>]*>/i, (body) => `${body}${note}`) : `${note}${html}`;
38}
39
40export function previewResponse(html: string, siteOrigin: string): Response {
41  return new Response(withSiteBase(html, siteOrigin), {
42    status: 200,
43    headers: {
44      "Content-Type": "text/html; charset=utf-8",
45      "Content-Security-Policy": previewPolicy(siteOrigin),
46      "X-Frame-Options": "SAMEORIGIN",
47    },
48  });
49}
50
51export function previewFailure(message: string): Response {
52  const escaped = message.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
53  return new Response(
54    `<!doctype html><html><head><meta charset="utf-8"><title>Preview unavailable</title></head><body><p>${escaped}</p></body></html>`,
55    {
56      status: 200,
57      headers: {
58        "Content-Type": "text/html; charset=utf-8",
59        "Content-Security-Policy": buildPolicy(["sandbox", "default-src 'none'", "frame-ancestors 'self'"]),
60        "X-Frame-Options": "SAMEORIGIN",
61      },
62    },
63  );
64}