@atelic-action/ui 0.12.0 → 0.12.1

package/README.md

@@ -141,7 +141,7 @@ export { default } from "@atelic-action/ui/gate/middleware";
 export const config = { matcher: ["/((?!api/auth/).*)"] };
 ```
 
-The default middleware holds back everything `needsSession` does: all of a host but the login page, what that page loads (`/assets/` apart from `/assets/doc/`, `/fonts/`, `/brand/`, the favicon and logo), the two functions under `/api/auth/`, `robots.txt`, `health.json`, and a website build proxied under `/proto`. A site whose matcher already leaves its open paths out passes its own test, and one whose link opens something other than a document names it:
+The default middleware holds back everything `needsSession` does: all of a host but the login page, what that page loads (`/assets/` apart from `/assets/doc/`, `/fonts/`, `/brand/`, the favicon and logo), everything under `/api/auth/` (the two sign in functions, and the one place under `/api/` where a host must add nothing private), `robots.txt`, `health.json`, and a website build proxied under `/proto`. A site whose matcher already leaves its open paths out passes its own test, and one whose link opens something other than a document names it:
 
 ```ts
 import { createMiddleware } from "@atelic-action/ui/gate/middleware";
@@ -156,9 +156,9 @@ export const POST = createRequestLink({ noun: "preview" });
 | `GATE_SESSION_SECRET` | all three | The signing secret, and the switch: unset, the gate is off. Use 32 random bytes or more |
 | `GATE_ALLOWLIST` | all three | Comma separated emails that may receive a link. Taking an address off, then redeploying, refuses its outstanding link and ends its session |
 | `RESEND_API_KEY` | request link | The sending only key the link goes out on |
-| `GATE_BASE_URL` | request link | The host the link points at; a bare host is read as https. Unset, production uses the project's own domain and a preview uses the deployment it was asked on |
-| `GATE_FROM`, `GATE_SUBJECT`, `GATE_LINK_TTL_MIN` | request link | Sender, subject, and link lifetime in minutes (15) |
-| `GATE_SESSION_DAYS`, `GATE_WATERMARK_MODE` | verify | Session lifetime in days (7), and `pill` or `tiled` |
+| `GATE_BASE_URL` | request link | The host the link points at; a bare host is read as https, and plain http is refused unless it is local. Unset, production uses the project's own domain and a preview uses the deployment it was asked on |
+| `GATE_FROM`, `GATE_SUBJECT`, `GATE_LINK_TTL_MIN` | request link | Sender, subject, and link lifetime in minutes (15, a day at most) |
+| `GATE_SESSION_DAYS`, `GATE_WATERMARK_MODE` | verify | Session lifetime in days (7, a year at most), and `pill` or `tiled` |
 
 What it holds to, each with a test in `tst/gate/`:
 
@@ -167,7 +167,7 @@ What it holds to, each with a test in `tst/gate/`:
 - The emailed link is never built from a forwarded header, since a caller can name any host there.
 - A link request answers the same way after the same two second wait whether or not the address was on the allowlist, and a send still running shortly before then is given up. A send that fails says so in the function's log and nowhere else.
 - The post sign in destination is held to a path on the same host, 512 characters at most (`safeNext`).
-- An open path opens only as written; the held corner is held in any case. Only the two sign in functions are open under `/api/`.
+- An open path opens only as written; the held corner is held in any case. Under `/api/`, only `/api/auth/` is open.
 
 What it does not do, by having no store: a link can be used more than once until it expires, and link requests are not rate limited. Rotating the secret ends every session at once. The `gate_email` and `gate_wm` cookies that feed the watermark are readable and unsigned on purpose: the watermark is drawn in the reader's own browser, so it deters and attributes nothing a reader set on removing it could not already remove.
 

package/dist/gate/config.d.ts

@@ -8,6 +8,8 @@ export declare function isAllowed(email: string, allowlist: string | undefined):
  * A setting that has to be a positive, finite number, or its default. A
  * lifetime of zero, a negative one, or Infinity would mint a token that is
  * already dead or that cannot be signed at all. A fraction is allowed (half
- * a day), so a caller rounds what it derives to whole seconds.
+ * a day), so a caller rounds what it derives to whole seconds. Anything past
+ * the ceiling is held to it: a lifetime of 1e308 days is a typo, and the
+ * seconds it works out to cannot be signed.
  */
-export declare function positive(value: string | undefined, fallback: number): number;
+export declare function positive(value: string | undefined, fallback: number, ceiling: number): number;

package/dist/gate/config.js

@@ -16,9 +16,13 @@ export function isAllowed(email, allowlist) {
  * A setting that has to be a positive, finite number, or its default. A
  * lifetime of zero, a negative one, or Infinity would mint a token that is
  * already dead or that cannot be signed at all. A fraction is allowed (half
- * a day), so a caller rounds what it derives to whole seconds.
+ * a day), so a caller rounds what it derives to whole seconds. Anything past
+ * the ceiling is held to it: a lifetime of 1e308 days is a typo, and the
+ * seconds it works out to cannot be signed.
  */
-export function positive(value, fallback) {
+export function positive(value, fallback, ceiling) {
     const parsed = Number(value);
-    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+    if (!Number.isFinite(parsed) || parsed <= 0)
+        return fallback;
+    return Math.min(parsed, ceiling);
 }

package/dist/gate/request-link.d.ts

@@ -5,8 +5,9 @@ export interface RequestLinkOptions {
 /**
  * Where the emailed link points. Never a forwarded header: a caller can name
  * any host there, and the link carries a signed token. The configured base
- * wins, read as a host (a bare one is taken as https); on production the
- * project's own domain is next; otherwise the host the platform routed this
+ * wins, read as a host (a bare one is taken as https, and plain http is
+ * accepted only for a local one); on production the project's own domain is
+ * next; otherwise the host the platform routed this
  * request to, which is the deployment itself.
  */
 export declare function linkBase(request: Request, env: Record<string, string | undefined>): string;

package/dist/gate/request-link.js

@@ -15,10 +15,13 @@
  * - GATE_LINK_TTL_MIN     link lifetime in minutes (optional, default 15)
  * - GATE_BASE_URL         the host the link points at (optional, see linkBase)
  */
+import { escapeHTML } from "../lib/escapeHTML.js";
 import { isAllowed, positive } from "./config.js";
 import { safeNext } from "./next.js";
 import { signToken } from "./tokens.js";
 const DEFAULT_FROM = "Atelic <forms@atelic.me>";
+/** A day: a sign in link that outlives it is a standing key, not a link. */
+const LONGEST_LINK_MIN = 24 * 60;
 /** How long every valid request takes to answer, whatever it did. */
 const ANSWER_AFTER_MS = 2000;
 /**
@@ -36,16 +39,20 @@ function json(status, body) {
 /**
  * Where the emailed link points. Never a forwarded header: a caller can name
  * any host there, and the link carries a signed token. The configured base
- * wins, read as a host (a bare one is taken as https); on production the
- * project's own domain is next; otherwise the host the platform routed this
+ * wins, read as a host (a bare one is taken as https, and plain http is
+ * accepted only for a local one); on production the project's own domain is
+ * next; otherwise the host the platform routed this
  * request to, which is the deployment itself.
  */
 export function linkBase(request, env) {
     const configured = env.GATE_BASE_URL?.trim();
     if (configured) {
         try {
-            return new URL(/^https?:\/\//i.test(configured) ? configured : `https://${configured}`)
-                .origin;
+            const base = new URL(/^https?:\/\//i.test(configured) ? configured : `https://${configured}`);
+            const local = base.hostname === "localhost" || base.hostname === "127.0.0.1";
+            if (base.protocol === "https:" || local)
+                return base.origin;
+            console.error("gate: GATE_BASE_URL is plain http, falling back to the request's own host");
         }
         catch {
             console.error("gate: GATE_BASE_URL is not a URL, falling back to the request's own host");
@@ -56,18 +63,9 @@ export function linkBase(request, env) {
     }
     return new URL(request.url).origin;
 }
-/** Text made safe to set inside an HTML element or a quoted attribute. */
-function escapeHtml(text) {
-    return text
-        .replaceAll("&", "&amp;")
-        .replaceAll("<", "&lt;")
-        .replaceAll(">", "&gt;")
-        .replaceAll('"', "&quot;")
-        .replaceAll("'", "&#39;");
-}
-function linkEmailHtml(rawLink, rawNoun) {
-    const link = escapeHtml(rawLink);
-    const noun = escapeHtml(rawNoun);
+function linkEmailHTML(rawLink, rawNoun) {
+    const link = escapeHTML(rawLink);
+    const noun = escapeHTML(rawNoun);
     // Gmail renders inline styles only, no style blocks.
     return `
 		<div style="font-family: Helvetica, Arial, sans-serif; color: #211c17; line-height: 1.6; max-width: 520px;">
@@ -102,7 +100,7 @@ async function sendLink(to, link, noun) {
                 from: process.env.GATE_FROM || DEFAULT_FROM,
                 to: [to],
                 subject: process.env.GATE_SUBJECT || `Your private link to the ${noun}`,
-                html: linkEmailHtml(link, noun),
+                html: linkEmailHTML(link, noun),
                 text: `Your private link to the ${noun}:\n\n${link}\n\nIf you did not expect this, you can ignore it.`,
             }),
         });
@@ -138,7 +136,7 @@ export function createRequestLink(options = {}) {
         // reads no differently from no send at all.
         const answered = wait(ANSWER_AFTER_MS);
         if (secret && isAllowed(email, process.env.GATE_ALLOWLIST)) {
-            const ttlMinutes = positive(process.env.GATE_LINK_TTL_MIN, 15);
+            const ttlMinutes = positive(process.env.GATE_LINK_TTL_MIN, 15, LONGEST_LINK_MIN);
             try {
                 const token = await signToken({
                     e: email,

package/dist/gate/verify.js

@@ -14,6 +14,8 @@
 import { isAllowed, positive } from "./config.js";
 import { safeNext } from "./next.js";
 import { signToken, verifyToken } from "./tokens.js";
+/** A year: past it a session is no longer something anyone remembers granting. */
+const LONGEST_SESSION_DAYS = 365;
 function cookie(name, value, maxAge, httpOnly) {
     const flags = ["Path=/", "Secure", "SameSite=Lax", `Max-Age=${maxAge}`];
     if (httpOnly)
@@ -39,7 +41,7 @@ export async function GET(request) {
     if (claims?.p !== "link" || !isAllowed(claims.e, process.env.GATE_ALLOWLIST)) {
         return redirect("/login?e=expired");
     }
-    const days = positive(process.env.GATE_SESSION_DAYS, 7);
+    const days = positive(process.env.GATE_SESSION_DAYS, 7, LONGEST_SESSION_DAYS);
     // Whole seconds: a browser ignores a Max-Age that is not an integer.
     const maxAge = Math.max(1, Math.round(days * 24 * 60 * 60));
     const session = await signToken({ e: claims.e, x: Math.floor(Date.now() / 1000) + maxAge, p: "session" }, secret);

package/dist/gate/wall.d.ts

@@ -37,7 +37,9 @@
  * The path is read the way a file server would read it (decoded, repeated
  * slashes collapsed) so an encoded or doubled slash cannot walk a held file
  * out through an open prefix; anything that will not decode, or still climbs
- * a directory once decoded, is held. Case is folded for the held corner
+ * a directory once decoded, is held, and so is one that still carries a
+ * percent sign, since a second decode somewhere downstream would make it a
+ * different path than the one judged here. Case is folded for the held corner
  * alone, so no spelling of it slips out, while an open path opens only as
  * written: the host serves files by exact case, and a path that merely looks
  * like an open one names some other file.

package/dist/gate/wall.js

@@ -49,7 +49,9 @@ const HELD_PREFIXES = ["/assets/doc/"];
  * The path is read the way a file server would read it (decoded, repeated
  * slashes collapsed) so an encoded or doubled slash cannot walk a held file
  * out through an open prefix; anything that will not decode, or still climbs
- * a directory once decoded, is held. Case is folded for the held corner
+ * a directory once decoded, is held, and so is one that still carries a
+ * percent sign, since a second decode somewhere downstream would make it a
+ * different path than the one judged here. Case is folded for the held corner
  * alone, so no spelling of it slips out, while an open path opens only as
  * written: the host serves files by exact case, and a path that merely looks
  * like an open one names some other file.
@@ -63,7 +65,7 @@ export function needsSession(pathname) {
         return true;
     }
     path = path.replace(/\/{2,}/g, "/");
-    if (path.includes("..") || path.includes("\\"))
+    if (path.includes("..") || path.includes("\\") || path.includes("%"))
         return true;
     const folded = path.toLowerCase();
     if (HELD_PREFIXES.some((prefix) => folded.startsWith(prefix)))

package/dist/lib/escapeHTML.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Text made safe to set inside an HTML element or a quoted attribute. Plain
+ * TypeScript with no imports, so the email renderer and the access gate's
+ * server side (which ships compiled) both use the one copy.
+ */
+export declare function escapeHTML(value: string): string;

package/dist/lib/escapeHTML.js

@@ -0,0 +1,13 @@
+/**
+ * Text made safe to set inside an HTML element or a quoted attribute. Plain
+ * TypeScript with no imports, so the email renderer and the access gate's
+ * server side (which ships compiled) both use the one copy.
+ */
+export function escapeHTML(value) {
+    return value
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "0.12.0",
+	"version": "0.12.1",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, the component library, and the access gate they install",
 	"type": "module",
 	"license": "UNLICENSED",

package/src/email/render.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
+import { escapeHTML } from "../lib/escapeHTML";
 import { atelicFonts, atelicPalette, type Fonts, type Palette } from "../tokens";
 import { FailurePage } from "./frame";
 import { EmailThemeProvider } from "./theme";
@@ -11,16 +12,6 @@ import { EmailThemeProvider } from "./theme";
  * inside the 680 column go through React.
  */
 
-/** jq's `esc`, in the same order, for the strings that land in the shell. */
-function esc(value: string): string {
-	return value
-		.replace(/&/g, "&")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;")
-		.replace(/"/g, "&quot;")
-		.replace(/'/g, "&#39;");
-}
-
 const WRAPPER_OPEN = "<table><tbody>";
 const WRAPPER_CLOSE = "</tbody></table>";
 
@@ -65,13 +56,13 @@ export function renderEmail({
 	return (
 		`<!doctype html><html lang="en"><head><meta charset="utf-8">` +
 		`<meta name="viewport" content="width=device-width, initial-scale=1">` +
-		`<meta name="color-scheme" content="light"><title>${esc(title)}</title>` +
+		`<meta name="color-scheme" content="light"><title>${escapeHTML(title)}</title>` +
 		`<style>body{margin:0;padding:0;background:${ground}}a{color:${palette.ink}}` +
 		`details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}` +
 		`@media (max-width:700px){.wrap{width:100%!important}}</style></head>` +
 		`<body style="margin:0;padding:0;background:${ground};-webkit-text-size-adjust:100%">` +
 		(preheader
-			? `<span style="display:none;font-size:1px;color:${ground};max-height:0;overflow:hidden">${esc(preheader)}</span>`
+			? `<span style="display:none;font-size:1px;color:${ground};max-height:0;overflow:hidden">${escapeHTML(preheader)}</span>`
 			: "") +
 		`<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:${ground}">` +
 		`<tr><td align="center" style="padding:28px 12px 48px">` +

package/src/gate/config.ts

@@ -17,9 +17,12 @@ export function isAllowed(email: string, allowlist: string | undefined): boolean
  * A setting that has to be a positive, finite number, or its default. A
  * lifetime of zero, a negative one, or Infinity would mint a token that is
  * already dead or that cannot be signed at all. A fraction is allowed (half
- * a day), so a caller rounds what it derives to whole seconds.
+ * a day), so a caller rounds what it derives to whole seconds. Anything past
+ * the ceiling is held to it: a lifetime of 1e308 days is a typo, and the
+ * seconds it works out to cannot be signed.
  */
-export function positive(value: string | undefined, fallback: number): number {
+export function positive(value: string | undefined, fallback: number, ceiling: number): number {
 	const parsed = Number(value);
-	return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+	if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
+	return Math.min(parsed, ceiling);
 }

package/src/gate/request-link.ts

@@ -15,12 +15,16 @@
  * - GATE_LINK_TTL_MIN     link lifetime in minutes (optional, default 15)
  * - GATE_BASE_URL         the host the link points at (optional, see linkBase)
  */
+import { escapeHTML } from "../lib/escapeHTML.js";
 import { isAllowed, positive } from "./config.js";
 import { safeNext } from "./next.js";
 import { signToken } from "./tokens.js";
 
 const DEFAULT_FROM = "Atelic <forms@atelic.me>";
 
+/** A day: a sign in link that outlives it is a standing key, not a link. */
+const LONGEST_LINK_MIN = 24 * 60;
+
 /** How long every valid request takes to answer, whatever it did. */
 const ANSWER_AFTER_MS = 2000;
 
@@ -46,16 +50,19 @@ function json(status: number, body: Record<string, unknown>): Response {
 /**
  * Where the emailed link points. Never a forwarded header: a caller can name
  * any host there, and the link carries a signed token. The configured base
- * wins, read as a host (a bare one is taken as https); on production the
- * project's own domain is next; otherwise the host the platform routed this
+ * wins, read as a host (a bare one is taken as https, and plain http is
+ * accepted only for a local one); on production the project's own domain is
+ * next; otherwise the host the platform routed this
  * request to, which is the deployment itself.
  */
 export function linkBase(request: Request, env: Record<string, string | undefined>): string {
 	const configured = env.GATE_BASE_URL?.trim();
 	if (configured) {
 		try {
-			return new URL(/^https?:\/\//i.test(configured) ? configured : `https://${configured}`)
-				.origin;
+			const base = new URL(/^https?:\/\//i.test(configured) ? configured : `https://${configured}`);
+			const local = base.hostname === "localhost" || base.hostname === "127.0.0.1";
+			if (base.protocol === "https:" || local) return base.origin;
+			console.error("gate: GATE_BASE_URL is plain http, falling back to the request's own host");
 		} catch {
 			console.error("gate: GATE_BASE_URL is not a URL, falling back to the request's own host");
 		}
@@ -66,19 +73,9 @@ export function linkBase(request: Request, env: Record<string, string | undefine
 	return new URL(request.url).origin;
 }
 
-/** Text made safe to set inside an HTML element or a quoted attribute. */
-function escapeHtml(text: string): string {
-	return text
-		.replaceAll("&", "&amp;")
-		.replaceAll("<", "&lt;")
-		.replaceAll(">", "&gt;")
-		.replaceAll('"', "&quot;")
-		.replaceAll("'", "&#39;");
-}
-
-function linkEmailHtml(rawLink: string, rawNoun: string): string {
-	const link = escapeHtml(rawLink);
-	const noun = escapeHtml(rawNoun);
+function linkEmailHTML(rawLink: string, rawNoun: string): string {
+	const link = escapeHTML(rawLink);
+	const noun = escapeHTML(rawNoun);
 	// Gmail renders inline styles only, no style blocks.
 	return `
 		<div style="font-family: Helvetica, Arial, sans-serif; color: #211c17; line-height: 1.6; max-width: 520px;">
@@ -114,7 +111,7 @@ async function sendLink(to: string, link: string, noun: string): Promise<void> {
 				from: process.env.GATE_FROM || DEFAULT_FROM,
 				to: [to],
 				subject: process.env.GATE_SUBJECT || `Your private link to the ${noun}`,
-				html: linkEmailHtml(link, noun),
+				html: linkEmailHTML(link, noun),
 				text: `Your private link to the ${noun}:\n\n${link}\n\nIf you did not expect this, you can ignore it.`,
 			}),
 		});
@@ -155,7 +152,7 @@ export function createRequestLink(options: RequestLinkOptions = {}) {
 		const answered = wait(ANSWER_AFTER_MS);
 
 		if (secret && isAllowed(email, process.env.GATE_ALLOWLIST)) {
-			const ttlMinutes = positive(process.env.GATE_LINK_TTL_MIN, 15);
+			const ttlMinutes = positive(process.env.GATE_LINK_TTL_MIN, 15, LONGEST_LINK_MIN);
 			try {
 				const token = await signToken(
 					{

package/src/gate/verify.ts

@@ -15,6 +15,9 @@ import { isAllowed, positive } from "./config.js";
 import { safeNext } from "./next.js";
 import { signToken, verifyToken } from "./tokens.js";
 
+/** A year: past it a session is no longer something anyone remembers granting. */
+const LONGEST_SESSION_DAYS = 365;
+
 function cookie(name: string, value: string, maxAge: number, httpOnly: boolean): string {
 	const flags = ["Path=/", "Secure", "SameSite=Lax", `Max-Age=${maxAge}`];
 	if (httpOnly) flags.unshift("HttpOnly");
@@ -42,7 +45,7 @@ export async function GET(request: Request): Promise<Response> {
 		return redirect("/login?e=expired");
 	}
 
-	const days = positive(process.env.GATE_SESSION_DAYS, 7);
+	const days = positive(process.env.GATE_SESSION_DAYS, 7, LONGEST_SESSION_DAYS);
 	// Whole seconds: a browser ignores a Max-Age that is not an integer.
 	const maxAge = Math.max(1, Math.round(days * 24 * 60 * 60));
 	const session = await signToken(

package/src/gate/wall.ts

@@ -53,7 +53,9 @@ const HELD_PREFIXES = ["/assets/doc/"];
  * The path is read the way a file server would read it (decoded, repeated
  * slashes collapsed) so an encoded or doubled slash cannot walk a held file
  * out through an open prefix; anything that will not decode, or still climbs
- * a directory once decoded, is held. Case is folded for the held corner
+ * a directory once decoded, is held, and so is one that still carries a
+ * percent sign, since a second decode somewhere downstream would make it a
+ * different path than the one judged here. Case is folded for the held corner
  * alone, so no spelling of it slips out, while an open path opens only as
  * written: the host serves files by exact case, and a path that merely looks
  * like an open one names some other file.
@@ -66,7 +68,7 @@ export function needsSession(pathname: string): boolean {
 		return true;
 	}
 	path = path.replace(/\/{2,}/g, "/");
-	if (path.includes("..") || path.includes("\\")) return true;
+	if (path.includes("..") || path.includes("\\") || path.includes("%")) return true;
 	const folded = path.toLowerCase();
 	if (HELD_PREFIXES.some((prefix) => folded.startsWith(prefix))) return true;
 	if (OPEN_EXACT.has(path)) return false;

package/src/lib/escapeHTML.ts

@@ -0,0 +1,13 @@
+/**
+ * Text made safe to set inside an HTML element or a quoted attribute. Plain
+ * TypeScript with no imports, so the email renderer and the access gate's
+ * server side (which ships compiled) both use the one copy.
+ */
+export function escapeHTML(value: string): string {
+	return value
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+}