@glw907/cairn-cms 0.33.0 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/components/LoginPage.svelte +1 -1
- package/dist/sveltekit/guard.js +32 -0
- package/dist/sveltekit/https-required-page.d.ts +5 -0
- package/dist/sveltekit/https-required-page.js +216 -0
- package/package.json +2 -1
- package/src/lib/components/LoginPage.svelte +1 -1
- package/src/lib/sveltekit/guard.ts +36 -0
- package/src/lib/sveltekit/https-required-page.ts +220 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project are recorded here, most recent first.
|
|
4
4
|
|
|
5
|
+
## 0.34.0
|
|
6
|
+
|
|
7
|
+
A deployed admin request that arrives over http now gets a clear, branded help page instead of the
|
|
8
|
+
framework's opaque CSRF 403. The magic-link sign-in posts a JS-free form, and the framework rejects a
|
|
9
|
+
form POST unless the request carries a matching https origin, so an admin reached over http cannot sign
|
|
10
|
+
in. The auth guard detects that case on a deployed host and serves a self-contained page that names the
|
|
11
|
+
problem, links to the https version for one-click recovery, and gives the exact Cloudflare fix (Always
|
|
12
|
+
Use HTTPS). The page matches the admin design system in light and dark. Local `wrangler dev` over http
|
|
13
|
+
is exempt.
|
|
14
|
+
|
|
15
|
+
The release also adds a `check:prose` gate (`scripts/check-admin-prose.mjs`, in CI) that scans the admin
|
|
16
|
+
components' user-facing strings for AI-writing tells, since the component copy ships compiled and a
|
|
17
|
+
consuming site's prose tooling never sees it.
|
|
18
|
+
|
|
19
|
+
Consumers may: force HTTPS at the edge (Always Use HTTPS plus HSTS), which the deploy guide now requires.
|
|
20
|
+
The help page is a fallback for the window before that is set, not a substitute.
|
|
21
|
+
|
|
5
22
|
## 0.33.0
|
|
6
23
|
|
|
7
24
|
The admin isolates itself from host chrome. A dev-only guard in the admin and login roots walks the
|
|
@@ -43,7 +43,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
|
|
|
43
43
|
</div>
|
|
44
44
|
|
|
45
45
|
<h1 class="text-lg font-semibold">Sign in to {data.siteName}</h1>
|
|
46
|
-
<p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email
|
|
46
|
+
<p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email. We'll send a one-time sign-in link.</p>
|
|
47
47
|
|
|
48
48
|
{#if form?.sent}
|
|
49
49
|
<div role="status" class="alert alert-success text-sm">
|
package/dist/sveltekit/guard.js
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import { redirect, error } from '@sveltejs/kit';
|
|
5
5
|
import { resolveSession } from '../auth/store.js';
|
|
6
6
|
import { sessionCookieName } from '../auth/crypto.js';
|
|
7
|
+
import { httpsRequiredPage } from './https-required-page.js';
|
|
7
8
|
/** The login page and the auth endpoints are public; everything else under /admin is gated. */
|
|
8
9
|
function isPublicAdminPath(pathname) {
|
|
9
10
|
return pathname === '/admin/login' || pathname.startsWith('/admin/auth/');
|
|
@@ -11,6 +12,19 @@ function isPublicAdminPath(pathname) {
|
|
|
11
12
|
function isAdminPath(pathname) {
|
|
12
13
|
return pathname === '/admin' || pathname.startsWith('/admin/');
|
|
13
14
|
}
|
|
15
|
+
/**
|
|
16
|
+
* Local development (`wrangler dev`) legitimately speaks http; a deployed host does not. The hostname
|
|
17
|
+
* comes from the client `Host` header, so this is UX only: it decides whether to show the help page,
|
|
18
|
+
* never whether to grant access. The session gate below runs regardless. Do not make it an auth check.
|
|
19
|
+
*/
|
|
20
|
+
function isLocalHost(hostname) {
|
|
21
|
+
return (hostname === 'localhost' ||
|
|
22
|
+
hostname === '127.0.0.1' ||
|
|
23
|
+
hostname === '0.0.0.0' ||
|
|
24
|
+
hostname === '::1' ||
|
|
25
|
+
hostname === '[::1]' ||
|
|
26
|
+
hostname.endsWith('.localhost'));
|
|
27
|
+
}
|
|
14
28
|
/**
|
|
15
29
|
* Attach the baseline security headers to an admin response. No full CSP; see the auth-hardening
|
|
16
30
|
* design. frame-ancestors is the modern clickjacking control and the one CSP directive included.
|
|
@@ -23,12 +37,30 @@ function applySecurityHeaders(headers) {
|
|
|
23
37
|
headers.set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains');
|
|
24
38
|
headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
|
|
25
39
|
}
|
|
40
|
+
/** The hardened 400 help page for a deployed admin request that arrived over http. */
|
|
41
|
+
function httpsRequiredResponse(url) {
|
|
42
|
+
const httpsUrl = new URL(url);
|
|
43
|
+
httpsUrl.protocol = 'https:';
|
|
44
|
+
const headers = new Headers({
|
|
45
|
+
'Content-Type': 'text/html; charset=utf-8',
|
|
46
|
+
'Cache-Control': 'no-store',
|
|
47
|
+
});
|
|
48
|
+
applySecurityHeaders(headers);
|
|
49
|
+
return new Response(httpsRequiredPage(httpsUrl.toString()), { status: 400, headers });
|
|
50
|
+
}
|
|
26
51
|
/** The SvelteKit `Handle` that guards `/admin/**` and hardens admin responses. */
|
|
27
52
|
export function createAuthGuard() {
|
|
28
53
|
return async function handle({ event, resolve }) {
|
|
29
54
|
const { pathname } = event.url;
|
|
30
55
|
if (!isAdminPath(pathname))
|
|
31
56
|
return resolve(event);
|
|
57
|
+
// A deployed admin request over http never works: the magic-link form POST would fail the
|
|
58
|
+
// framework's CSRF guard with an opaque 403. Serve the help page instead, before resolve()
|
|
59
|
+
// runs that check. This covers the public login/auth paths too, since that is where the form
|
|
60
|
+
// posts. Local http (wrangler dev) is exempt.
|
|
61
|
+
if (event.url.protocol === 'http:' && !isLocalHost(event.url.hostname)) {
|
|
62
|
+
return httpsRequiredResponse(event.url);
|
|
63
|
+
}
|
|
32
64
|
if (!isPublicAdminPath(pathname)) {
|
|
33
65
|
const env = event.platform?.env ?? {};
|
|
34
66
|
const id = event.cookies.get(sessionCookieName(event.url.protocol === 'https:'));
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
// The standalone "this admin needs HTTPS" page. The auth guard serves it when a request reaches a
|
|
2
|
+
// deployed Worker over http, which is the one case that makes the magic-link sign-in fail: the
|
|
3
|
+
// JS-free login form posts over http, and the framework's CSRF guard rejects a form POST whose
|
|
4
|
+
// origin scheme does not match, so the editor would otherwise hit an opaque 403. This page names
|
|
5
|
+
// the problem, says why https is needed, and gives the exact Cloudflare fix.
|
|
6
|
+
//
|
|
7
|
+
// It is served raw from the edge, before SvelteKit renders anything, so it carries no external
|
|
8
|
+
// request: the Warm Stone tokens are inlined for both colour schemes and the type falls back to the
|
|
9
|
+
// system stack (the shipped admin fonts are not reachable from here). The cairn glyph is the same
|
|
10
|
+
// public-domain Temaki mark the admin chrome uses. See docs/internal/admin-design-system.md.
|
|
11
|
+
/** Escape a string for safe interpolation into HTML text and double-quoted attributes. */
|
|
12
|
+
function escapeHtml(value) {
|
|
13
|
+
return value
|
|
14
|
+
.replace(/&/g, '&')
|
|
15
|
+
.replace(/</g, '<')
|
|
16
|
+
.replace(/>/g, '>')
|
|
17
|
+
.replace(/"/g, '"');
|
|
18
|
+
}
|
|
19
|
+
// The cairn stone-stack glyph (Temaki, CC0), drawn in currentColor like CairnLogo.svelte.
|
|
20
|
+
const CAIRN_GLYPH = '<path d="M6.28 14C5.56 14 1 13.89 1 12.91C1 11.46 2.16 11.07 3.2 10.81C4.36 10.51 13.18 9.77 ' +
|
|
21
|
+
'13.76 10.07C14.46 10.43 13.52 12.49 12.44 12.77C11.28 13.07 10.21 14 8.48 14C7.05 14 9.69 14 ' +
|
|
22
|
+
'6.28 14ZM6.92 4.5C6.67 4.5 5 4.43 5 3.88C5 3.07 5.75 2.51 5.96 2.35C6.36 2.03 6.32 1.62 6.54 ' +
|
|
23
|
+
'1.27C6.84 0.79 7.61 0.5 7.88 0.5C8.1 0.5 8.75 0.9 9.23 1.42C9.45 1.66 10 2.77 10 3.12C10 4.22 ' +
|
|
24
|
+
'9.36 4.5 8.85 4.5C8.33 4.5 8.15 4.5 6.92 4.5ZM3.68 8.22C3 7.73 3.67 6.86 4.57 6.21C5.38 5.63 ' +
|
|
25
|
+
'5.92 5.96 6.79 5.7C8.33 5.24 9.02 5.72 9.02 5.72L10.9 6.82C12.03 7.63 10.99 7.67 10.38 8.56C9.79 ' +
|
|
26
|
+
'9.42 8.18 9.11 7.42 9.33C6.78 9.53 5.75 9.71 4.62 8.9L3.68 8.22Z"/>';
|
|
27
|
+
/**
|
|
28
|
+
* Render the full HTML document for the HTTPS-required page.
|
|
29
|
+
* @param httpsUrl The same request rebuilt over https, offered as the one-click recovery link.
|
|
30
|
+
*/
|
|
31
|
+
export function httpsRequiredPage(httpsUrl) {
|
|
32
|
+
const href = escapeHtml(httpsUrl);
|
|
33
|
+
return `<!doctype html>
|
|
34
|
+
<html lang="en">
|
|
35
|
+
<head>
|
|
36
|
+
<meta charset="utf-8" />
|
|
37
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
38
|
+
<meta name="robots" content="noindex, nofollow" />
|
|
39
|
+
<title>HTTPS required · Cairn</title>
|
|
40
|
+
<style>
|
|
41
|
+
:root {
|
|
42
|
+
color-scheme: light;
|
|
43
|
+
--bg: oklch(96.5% 0.006 75);
|
|
44
|
+
--glow: oklch(52% 0.2 293 / 0.06);
|
|
45
|
+
--panel: oklch(99% 0.004 75);
|
|
46
|
+
--recessed: oklch(95% 0.008 75);
|
|
47
|
+
--ink: oklch(26% 0.014 75);
|
|
48
|
+
--muted: oklch(48% 0.01 75);
|
|
49
|
+
--subtle: oklch(42% 0.01 75);
|
|
50
|
+
--primary: oklch(52% 0.2 293);
|
|
51
|
+
--primary-content: oklch(98% 0.012 293);
|
|
52
|
+
--border: oklch(93% 0.008 75);
|
|
53
|
+
--shadow: 0 1px 2px oklch(28% 0.02 75 / 0.05), 0 18px 40px -12px oklch(28% 0.02 75 / 0.16);
|
|
54
|
+
--radius-box: 1rem;
|
|
55
|
+
--radius-field: 0.625rem;
|
|
56
|
+
--font: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
57
|
+
}
|
|
58
|
+
@media (prefers-color-scheme: dark) {
|
|
59
|
+
:root {
|
|
60
|
+
color-scheme: dark;
|
|
61
|
+
--bg: oklch(15.5% 0.009 75);
|
|
62
|
+
--glow: oklch(68% 0.18 293 / 0.1);
|
|
63
|
+
--panel: oklch(24% 0.01 75);
|
|
64
|
+
--recessed: oklch(20% 0.01 75);
|
|
65
|
+
--ink: oklch(93% 0.006 75);
|
|
66
|
+
--muted: oklch(72% 0.01 75);
|
|
67
|
+
--subtle: oklch(80% 0.008 75);
|
|
68
|
+
--primary: oklch(68% 0.18 293);
|
|
69
|
+
--primary-content: oklch(20% 0.04 293);
|
|
70
|
+
--border: oklch(30% 0.014 75);
|
|
71
|
+
--shadow: 0 1px 2px oklch(0% 0 0 / 0.35), 0 18px 40px -12px oklch(0% 0 0 / 0.55);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
* { box-sizing: border-box; }
|
|
75
|
+
body {
|
|
76
|
+
margin: 0;
|
|
77
|
+
min-height: 100vh;
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
padding: 1.5rem;
|
|
82
|
+
font-family: var(--font);
|
|
83
|
+
color: var(--ink);
|
|
84
|
+
background-color: var(--bg);
|
|
85
|
+
background-image: radial-gradient(80rem 50rem at 50% -20%, var(--glow), transparent 60%);
|
|
86
|
+
-webkit-font-smoothing: antialiased;
|
|
87
|
+
-moz-osx-font-smoothing: grayscale;
|
|
88
|
+
line-height: 1.55;
|
|
89
|
+
}
|
|
90
|
+
main {
|
|
91
|
+
width: 100%;
|
|
92
|
+
max-width: 30rem;
|
|
93
|
+
background: var(--panel);
|
|
94
|
+
border: 1px solid var(--border);
|
|
95
|
+
border-radius: var(--radius-box);
|
|
96
|
+
box-shadow: var(--shadow);
|
|
97
|
+
padding: 2.25rem;
|
|
98
|
+
}
|
|
99
|
+
.brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem; }
|
|
100
|
+
.brand .tile {
|
|
101
|
+
display: grid;
|
|
102
|
+
place-items: center;
|
|
103
|
+
width: 2rem;
|
|
104
|
+
height: 2rem;
|
|
105
|
+
border-radius: 0.75rem;
|
|
106
|
+
background: var(--primary);
|
|
107
|
+
color: var(--primary-content);
|
|
108
|
+
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.12);
|
|
109
|
+
}
|
|
110
|
+
.brand .tile svg { width: 1.25rem; height: 1.25rem; }
|
|
111
|
+
.brand .word {
|
|
112
|
+
font-weight: 700;
|
|
113
|
+
font-size: 1.25rem;
|
|
114
|
+
letter-spacing: -0.01em;
|
|
115
|
+
}
|
|
116
|
+
.eyebrow {
|
|
117
|
+
display: inline-flex;
|
|
118
|
+
align-items: center;
|
|
119
|
+
gap: 0.4rem;
|
|
120
|
+
font-size: 0.6875rem;
|
|
121
|
+
font-weight: 600;
|
|
122
|
+
text-transform: uppercase;
|
|
123
|
+
letter-spacing: 0.08em;
|
|
124
|
+
color: var(--muted);
|
|
125
|
+
margin-bottom: 0.6rem;
|
|
126
|
+
}
|
|
127
|
+
.eyebrow svg { width: 0.85rem; height: 0.85rem; }
|
|
128
|
+
h1 {
|
|
129
|
+
margin: 0 0 0.75rem;
|
|
130
|
+
font-size: 1.6rem;
|
|
131
|
+
font-weight: 800;
|
|
132
|
+
letter-spacing: -0.02em;
|
|
133
|
+
line-height: 1.15;
|
|
134
|
+
}
|
|
135
|
+
p { margin: 0 0 1rem; color: var(--subtle); }
|
|
136
|
+
.cta {
|
|
137
|
+
display: inline-flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
gap: 0.5rem;
|
|
140
|
+
margin: 0.25rem 0 0.5rem;
|
|
141
|
+
padding: 0.7rem 1.15rem;
|
|
142
|
+
border-radius: var(--radius-field);
|
|
143
|
+
background: var(--primary);
|
|
144
|
+
color: var(--primary-content);
|
|
145
|
+
font-weight: 600;
|
|
146
|
+
font-size: 0.95rem;
|
|
147
|
+
text-decoration: none;
|
|
148
|
+
box-shadow: 0 4px 14px -4px oklch(52% 0.2 293 / 0.5);
|
|
149
|
+
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
|
150
|
+
}
|
|
151
|
+
.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px oklch(52% 0.2 293 / 0.55); }
|
|
152
|
+
.cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
|
|
153
|
+
.cta svg { width: 1rem; height: 1rem; }
|
|
154
|
+
.fix {
|
|
155
|
+
margin-top: 1.75rem;
|
|
156
|
+
padding: 1.1rem 1.2rem;
|
|
157
|
+
background: var(--recessed);
|
|
158
|
+
border: 1px solid var(--border);
|
|
159
|
+
border-radius: var(--radius-field);
|
|
160
|
+
}
|
|
161
|
+
.fix h2 {
|
|
162
|
+
margin: 0 0 0.5rem;
|
|
163
|
+
font-size: 0.8125rem;
|
|
164
|
+
font-weight: 700;
|
|
165
|
+
letter-spacing: 0.01em;
|
|
166
|
+
}
|
|
167
|
+
.fix p { margin: 0 0 0.65rem; font-size: 0.875rem; }
|
|
168
|
+
.fix p:last-child { margin-bottom: 0; }
|
|
169
|
+
.path {
|
|
170
|
+
display: block;
|
|
171
|
+
font-size: 0.8125rem;
|
|
172
|
+
font-weight: 600;
|
|
173
|
+
color: var(--ink);
|
|
174
|
+
letter-spacing: 0.01em;
|
|
175
|
+
margin: 0 0 0.65rem;
|
|
176
|
+
}
|
|
177
|
+
.path .arrow { color: var(--muted); padding: 0 0.35rem; font-weight: 400; }
|
|
178
|
+
.foot {
|
|
179
|
+
margin-top: 1.75rem;
|
|
180
|
+
text-align: center;
|
|
181
|
+
font-size: 0.75rem;
|
|
182
|
+
color: var(--muted);
|
|
183
|
+
}
|
|
184
|
+
</style>
|
|
185
|
+
</head>
|
|
186
|
+
<body>
|
|
187
|
+
<main>
|
|
188
|
+
<div class="brand">
|
|
189
|
+
<span class="tile"><svg viewBox="0 0 15 15" fill="currentColor" aria-hidden="true">${CAIRN_GLYPH}</svg></span>
|
|
190
|
+
<span class="word">Cairn</span>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<span class="eyebrow">
|
|
194
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
|
195
|
+
Secure connection required
|
|
196
|
+
</span>
|
|
197
|
+
<h1>This admin needs a secure connection</h1>
|
|
198
|
+
<p>You opened this page over http. Sign-in only works over https, so open the secure version to continue.</p>
|
|
199
|
+
|
|
200
|
+
<a class="cta" href="${href}">
|
|
201
|
+
Open over HTTPS
|
|
202
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
203
|
+
</a>
|
|
204
|
+
|
|
205
|
+
<div class="fix">
|
|
206
|
+
<h2>If you run this site</h2>
|
|
207
|
+
<p>Turn on Always Use HTTPS in Cloudflare. It upgrades every request to https before it reaches the site:</p>
|
|
208
|
+
<span class="path">SSL/TLS<span class="arrow">›</span>Edge Certificates<span class="arrow">›</span>Always Use HTTPS</span>
|
|
209
|
+
<p>Keep HSTS on too. The browser then stays on https and sign-in works.</p>
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<p class="foot">Powered by Cairn</p>
|
|
213
|
+
</main>
|
|
214
|
+
</body>
|
|
215
|
+
</html>`;
|
|
216
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@glw907/cairn-cms",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.34.0",
|
|
4
4
|
"description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"check:package": "npm run package && publint --strict && attw --pack . --ignore-rules no-resolution cjs-resolves-to-esm internal-resolution-error",
|
|
31
31
|
"check:reference": "npm run package && node scripts/reference-coverage.mjs",
|
|
32
32
|
"check:docs": "node scripts/docs-links.mjs",
|
|
33
|
+
"check:prose": "node scripts/check-admin-prose.mjs",
|
|
33
34
|
"prepare": "npm run package",
|
|
34
35
|
"check": "svelte-check --tsconfig ./tsconfig.json",
|
|
35
36
|
"test": "vitest run",
|
|
@@ -43,7 +43,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
|
|
|
43
43
|
</div>
|
|
44
44
|
|
|
45
45
|
<h1 class="text-lg font-semibold">Sign in to {data.siteName}</h1>
|
|
46
|
-
<p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email
|
|
46
|
+
<p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email. We'll send a one-time sign-in link.</p>
|
|
47
47
|
|
|
48
48
|
{#if form?.sent}
|
|
49
49
|
<div role="status" class="alert alert-success text-sm">
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import { redirect, error } from '@sveltejs/kit';
|
|
5
5
|
import { resolveSession } from '../auth/store.js';
|
|
6
6
|
import { sessionCookieName } from '../auth/crypto.js';
|
|
7
|
+
import { httpsRequiredPage } from './https-required-page.js';
|
|
7
8
|
import type { Editor } from '../auth/types.js';
|
|
8
9
|
import type { HandleInput, RequestContext } from './types.js';
|
|
9
10
|
|
|
@@ -16,6 +17,22 @@ function isAdminPath(pathname: string): boolean {
|
|
|
16
17
|
return pathname === '/admin' || pathname.startsWith('/admin/');
|
|
17
18
|
}
|
|
18
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Local development (`wrangler dev`) legitimately speaks http; a deployed host does not. The hostname
|
|
22
|
+
* comes from the client `Host` header, so this is UX only: it decides whether to show the help page,
|
|
23
|
+
* never whether to grant access. The session gate below runs regardless. Do not make it an auth check.
|
|
24
|
+
*/
|
|
25
|
+
function isLocalHost(hostname: string): boolean {
|
|
26
|
+
return (
|
|
27
|
+
hostname === 'localhost' ||
|
|
28
|
+
hostname === '127.0.0.1' ||
|
|
29
|
+
hostname === '0.0.0.0' ||
|
|
30
|
+
hostname === '::1' ||
|
|
31
|
+
hostname === '[::1]' ||
|
|
32
|
+
hostname.endsWith('.localhost')
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
19
36
|
/**
|
|
20
37
|
* Attach the baseline security headers to an admin response. No full CSP; see the auth-hardening
|
|
21
38
|
* design. frame-ancestors is the modern clickjacking control and the one CSP directive included.
|
|
@@ -29,11 +46,30 @@ function applySecurityHeaders(headers: Headers): void {
|
|
|
29
46
|
headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
|
|
30
47
|
}
|
|
31
48
|
|
|
49
|
+
/** The hardened 400 help page for a deployed admin request that arrived over http. */
|
|
50
|
+
function httpsRequiredResponse(url: URL): Response {
|
|
51
|
+
const httpsUrl = new URL(url);
|
|
52
|
+
httpsUrl.protocol = 'https:';
|
|
53
|
+
const headers = new Headers({
|
|
54
|
+
'Content-Type': 'text/html; charset=utf-8',
|
|
55
|
+
'Cache-Control': 'no-store',
|
|
56
|
+
});
|
|
57
|
+
applySecurityHeaders(headers);
|
|
58
|
+
return new Response(httpsRequiredPage(httpsUrl.toString()), { status: 400, headers });
|
|
59
|
+
}
|
|
60
|
+
|
|
32
61
|
/** The SvelteKit `Handle` that guards `/admin/**` and hardens admin responses. */
|
|
33
62
|
export function createAuthGuard() {
|
|
34
63
|
return async function handle({ event, resolve }: HandleInput): Promise<Response> {
|
|
35
64
|
const { pathname } = event.url;
|
|
36
65
|
if (!isAdminPath(pathname)) return resolve(event);
|
|
66
|
+
// A deployed admin request over http never works: the magic-link form POST would fail the
|
|
67
|
+
// framework's CSRF guard with an opaque 403. Serve the help page instead, before resolve()
|
|
68
|
+
// runs that check. This covers the public login/auth paths too, since that is where the form
|
|
69
|
+
// posts. Local http (wrangler dev) is exempt.
|
|
70
|
+
if (event.url.protocol === 'http:' && !isLocalHost(event.url.hostname)) {
|
|
71
|
+
return httpsRequiredResponse(event.url);
|
|
72
|
+
}
|
|
37
73
|
if (!isPublicAdminPath(pathname)) {
|
|
38
74
|
const env = event.platform?.env ?? {};
|
|
39
75
|
const id = event.cookies.get(sessionCookieName(event.url.protocol === 'https:'));
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
// The standalone "this admin needs HTTPS" page. The auth guard serves it when a request reaches a
|
|
2
|
+
// deployed Worker over http, which is the one case that makes the magic-link sign-in fail: the
|
|
3
|
+
// JS-free login form posts over http, and the framework's CSRF guard rejects a form POST whose
|
|
4
|
+
// origin scheme does not match, so the editor would otherwise hit an opaque 403. This page names
|
|
5
|
+
// the problem, says why https is needed, and gives the exact Cloudflare fix.
|
|
6
|
+
//
|
|
7
|
+
// It is served raw from the edge, before SvelteKit renders anything, so it carries no external
|
|
8
|
+
// request: the Warm Stone tokens are inlined for both colour schemes and the type falls back to the
|
|
9
|
+
// system stack (the shipped admin fonts are not reachable from here). The cairn glyph is the same
|
|
10
|
+
// public-domain Temaki mark the admin chrome uses. See docs/internal/admin-design-system.md.
|
|
11
|
+
|
|
12
|
+
/** Escape a string for safe interpolation into HTML text and double-quoted attributes. */
|
|
13
|
+
function escapeHtml(value: string): string {
|
|
14
|
+
return value
|
|
15
|
+
.replace(/&/g, '&')
|
|
16
|
+
.replace(/</g, '<')
|
|
17
|
+
.replace(/>/g, '>')
|
|
18
|
+
.replace(/"/g, '"');
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// The cairn stone-stack glyph (Temaki, CC0), drawn in currentColor like CairnLogo.svelte.
|
|
22
|
+
const CAIRN_GLYPH =
|
|
23
|
+
'<path d="M6.28 14C5.56 14 1 13.89 1 12.91C1 11.46 2.16 11.07 3.2 10.81C4.36 10.51 13.18 9.77 ' +
|
|
24
|
+
'13.76 10.07C14.46 10.43 13.52 12.49 12.44 12.77C11.28 13.07 10.21 14 8.48 14C7.05 14 9.69 14 ' +
|
|
25
|
+
'6.28 14ZM6.92 4.5C6.67 4.5 5 4.43 5 3.88C5 3.07 5.75 2.51 5.96 2.35C6.36 2.03 6.32 1.62 6.54 ' +
|
|
26
|
+
'1.27C6.84 0.79 7.61 0.5 7.88 0.5C8.1 0.5 8.75 0.9 9.23 1.42C9.45 1.66 10 2.77 10 3.12C10 4.22 ' +
|
|
27
|
+
'9.36 4.5 8.85 4.5C8.33 4.5 8.15 4.5 6.92 4.5ZM3.68 8.22C3 7.73 3.67 6.86 4.57 6.21C5.38 5.63 ' +
|
|
28
|
+
'5.92 5.96 6.79 5.7C8.33 5.24 9.02 5.72 9.02 5.72L10.9 6.82C12.03 7.63 10.99 7.67 10.38 8.56C9.79 ' +
|
|
29
|
+
'9.42 8.18 9.11 7.42 9.33C6.78 9.53 5.75 9.71 4.62 8.9L3.68 8.22Z"/>';
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Render the full HTML document for the HTTPS-required page.
|
|
33
|
+
* @param httpsUrl The same request rebuilt over https, offered as the one-click recovery link.
|
|
34
|
+
*/
|
|
35
|
+
export function httpsRequiredPage(httpsUrl: string): string {
|
|
36
|
+
const href = escapeHtml(httpsUrl);
|
|
37
|
+
return `<!doctype html>
|
|
38
|
+
<html lang="en">
|
|
39
|
+
<head>
|
|
40
|
+
<meta charset="utf-8" />
|
|
41
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
42
|
+
<meta name="robots" content="noindex, nofollow" />
|
|
43
|
+
<title>HTTPS required · Cairn</title>
|
|
44
|
+
<style>
|
|
45
|
+
:root {
|
|
46
|
+
color-scheme: light;
|
|
47
|
+
--bg: oklch(96.5% 0.006 75);
|
|
48
|
+
--glow: oklch(52% 0.2 293 / 0.06);
|
|
49
|
+
--panel: oklch(99% 0.004 75);
|
|
50
|
+
--recessed: oklch(95% 0.008 75);
|
|
51
|
+
--ink: oklch(26% 0.014 75);
|
|
52
|
+
--muted: oklch(48% 0.01 75);
|
|
53
|
+
--subtle: oklch(42% 0.01 75);
|
|
54
|
+
--primary: oklch(52% 0.2 293);
|
|
55
|
+
--primary-content: oklch(98% 0.012 293);
|
|
56
|
+
--border: oklch(93% 0.008 75);
|
|
57
|
+
--shadow: 0 1px 2px oklch(28% 0.02 75 / 0.05), 0 18px 40px -12px oklch(28% 0.02 75 / 0.16);
|
|
58
|
+
--radius-box: 1rem;
|
|
59
|
+
--radius-field: 0.625rem;
|
|
60
|
+
--font: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
61
|
+
}
|
|
62
|
+
@media (prefers-color-scheme: dark) {
|
|
63
|
+
:root {
|
|
64
|
+
color-scheme: dark;
|
|
65
|
+
--bg: oklch(15.5% 0.009 75);
|
|
66
|
+
--glow: oklch(68% 0.18 293 / 0.1);
|
|
67
|
+
--panel: oklch(24% 0.01 75);
|
|
68
|
+
--recessed: oklch(20% 0.01 75);
|
|
69
|
+
--ink: oklch(93% 0.006 75);
|
|
70
|
+
--muted: oklch(72% 0.01 75);
|
|
71
|
+
--subtle: oklch(80% 0.008 75);
|
|
72
|
+
--primary: oklch(68% 0.18 293);
|
|
73
|
+
--primary-content: oklch(20% 0.04 293);
|
|
74
|
+
--border: oklch(30% 0.014 75);
|
|
75
|
+
--shadow: 0 1px 2px oklch(0% 0 0 / 0.35), 0 18px 40px -12px oklch(0% 0 0 / 0.55);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
* { box-sizing: border-box; }
|
|
79
|
+
body {
|
|
80
|
+
margin: 0;
|
|
81
|
+
min-height: 100vh;
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
padding: 1.5rem;
|
|
86
|
+
font-family: var(--font);
|
|
87
|
+
color: var(--ink);
|
|
88
|
+
background-color: var(--bg);
|
|
89
|
+
background-image: radial-gradient(80rem 50rem at 50% -20%, var(--glow), transparent 60%);
|
|
90
|
+
-webkit-font-smoothing: antialiased;
|
|
91
|
+
-moz-osx-font-smoothing: grayscale;
|
|
92
|
+
line-height: 1.55;
|
|
93
|
+
}
|
|
94
|
+
main {
|
|
95
|
+
width: 100%;
|
|
96
|
+
max-width: 30rem;
|
|
97
|
+
background: var(--panel);
|
|
98
|
+
border: 1px solid var(--border);
|
|
99
|
+
border-radius: var(--radius-box);
|
|
100
|
+
box-shadow: var(--shadow);
|
|
101
|
+
padding: 2.25rem;
|
|
102
|
+
}
|
|
103
|
+
.brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem; }
|
|
104
|
+
.brand .tile {
|
|
105
|
+
display: grid;
|
|
106
|
+
place-items: center;
|
|
107
|
+
width: 2rem;
|
|
108
|
+
height: 2rem;
|
|
109
|
+
border-radius: 0.75rem;
|
|
110
|
+
background: var(--primary);
|
|
111
|
+
color: var(--primary-content);
|
|
112
|
+
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.12);
|
|
113
|
+
}
|
|
114
|
+
.brand .tile svg { width: 1.25rem; height: 1.25rem; }
|
|
115
|
+
.brand .word {
|
|
116
|
+
font-weight: 700;
|
|
117
|
+
font-size: 1.25rem;
|
|
118
|
+
letter-spacing: -0.01em;
|
|
119
|
+
}
|
|
120
|
+
.eyebrow {
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
gap: 0.4rem;
|
|
124
|
+
font-size: 0.6875rem;
|
|
125
|
+
font-weight: 600;
|
|
126
|
+
text-transform: uppercase;
|
|
127
|
+
letter-spacing: 0.08em;
|
|
128
|
+
color: var(--muted);
|
|
129
|
+
margin-bottom: 0.6rem;
|
|
130
|
+
}
|
|
131
|
+
.eyebrow svg { width: 0.85rem; height: 0.85rem; }
|
|
132
|
+
h1 {
|
|
133
|
+
margin: 0 0 0.75rem;
|
|
134
|
+
font-size: 1.6rem;
|
|
135
|
+
font-weight: 800;
|
|
136
|
+
letter-spacing: -0.02em;
|
|
137
|
+
line-height: 1.15;
|
|
138
|
+
}
|
|
139
|
+
p { margin: 0 0 1rem; color: var(--subtle); }
|
|
140
|
+
.cta {
|
|
141
|
+
display: inline-flex;
|
|
142
|
+
align-items: center;
|
|
143
|
+
gap: 0.5rem;
|
|
144
|
+
margin: 0.25rem 0 0.5rem;
|
|
145
|
+
padding: 0.7rem 1.15rem;
|
|
146
|
+
border-radius: var(--radius-field);
|
|
147
|
+
background: var(--primary);
|
|
148
|
+
color: var(--primary-content);
|
|
149
|
+
font-weight: 600;
|
|
150
|
+
font-size: 0.95rem;
|
|
151
|
+
text-decoration: none;
|
|
152
|
+
box-shadow: 0 4px 14px -4px oklch(52% 0.2 293 / 0.5);
|
|
153
|
+
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
|
154
|
+
}
|
|
155
|
+
.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px oklch(52% 0.2 293 / 0.55); }
|
|
156
|
+
.cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
|
|
157
|
+
.cta svg { width: 1rem; height: 1rem; }
|
|
158
|
+
.fix {
|
|
159
|
+
margin-top: 1.75rem;
|
|
160
|
+
padding: 1.1rem 1.2rem;
|
|
161
|
+
background: var(--recessed);
|
|
162
|
+
border: 1px solid var(--border);
|
|
163
|
+
border-radius: var(--radius-field);
|
|
164
|
+
}
|
|
165
|
+
.fix h2 {
|
|
166
|
+
margin: 0 0 0.5rem;
|
|
167
|
+
font-size: 0.8125rem;
|
|
168
|
+
font-weight: 700;
|
|
169
|
+
letter-spacing: 0.01em;
|
|
170
|
+
}
|
|
171
|
+
.fix p { margin: 0 0 0.65rem; font-size: 0.875rem; }
|
|
172
|
+
.fix p:last-child { margin-bottom: 0; }
|
|
173
|
+
.path {
|
|
174
|
+
display: block;
|
|
175
|
+
font-size: 0.8125rem;
|
|
176
|
+
font-weight: 600;
|
|
177
|
+
color: var(--ink);
|
|
178
|
+
letter-spacing: 0.01em;
|
|
179
|
+
margin: 0 0 0.65rem;
|
|
180
|
+
}
|
|
181
|
+
.path .arrow { color: var(--muted); padding: 0 0.35rem; font-weight: 400; }
|
|
182
|
+
.foot {
|
|
183
|
+
margin-top: 1.75rem;
|
|
184
|
+
text-align: center;
|
|
185
|
+
font-size: 0.75rem;
|
|
186
|
+
color: var(--muted);
|
|
187
|
+
}
|
|
188
|
+
</style>
|
|
189
|
+
</head>
|
|
190
|
+
<body>
|
|
191
|
+
<main>
|
|
192
|
+
<div class="brand">
|
|
193
|
+
<span class="tile"><svg viewBox="0 0 15 15" fill="currentColor" aria-hidden="true">${CAIRN_GLYPH}</svg></span>
|
|
194
|
+
<span class="word">Cairn</span>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<span class="eyebrow">
|
|
198
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
|
199
|
+
Secure connection required
|
|
200
|
+
</span>
|
|
201
|
+
<h1>This admin needs a secure connection</h1>
|
|
202
|
+
<p>You opened this page over http. Sign-in only works over https, so open the secure version to continue.</p>
|
|
203
|
+
|
|
204
|
+
<a class="cta" href="${href}">
|
|
205
|
+
Open over HTTPS
|
|
206
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
207
|
+
</a>
|
|
208
|
+
|
|
209
|
+
<div class="fix">
|
|
210
|
+
<h2>If you run this site</h2>
|
|
211
|
+
<p>Turn on Always Use HTTPS in Cloudflare. It upgrades every request to https before it reaches the site:</p>
|
|
212
|
+
<span class="path">SSL/TLS<span class="arrow">›</span>Edge Certificates<span class="arrow">›</span>Always Use HTTPS</span>
|
|
213
|
+
<p>Keep HSTS on too. The browser then stays on https and sign-in works.</p>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<p class="foot">Powered by Cairn</p>
|
|
217
|
+
</main>
|
|
218
|
+
</body>
|
|
219
|
+
</html>`;
|
|
220
|
+
}
|