Compare commits
1 Commits
feat/front
...
chore/reve
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0a3877be51 |
@@ -51,3 +51,8 @@ MAX_FILE_BYTES=20971520
|
|||||||
# internal docker network. Override only if you're running the
|
# internal docker network. Override only if you're running the
|
||||||
# frontend container against a backend somewhere else.
|
# frontend container against a backend somewhere else.
|
||||||
BACKEND_URL=http://backend:8080
|
BACKEND_URL=http://backend:8080
|
||||||
|
# Per-request wall-clock cap for the /api/* reverse proxy (milliseconds).
|
||||||
|
# Default 300000 (5 min) covers a typical 200 MiB chapter upload over
|
||||||
|
# 25 Mbps; raise for users on slower upstream links or lower if a
|
||||||
|
# tighter front proxy already bounds the request lifetime.
|
||||||
|
BACKEND_PROXY_TIMEOUT_MS=300000
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
[package]
|
[package]
|
||||||
name = "mangalord"
|
name = "mangalord"
|
||||||
version = "0.35.0"
|
version = "0.34.0"
|
||||||
edition = "2021"
|
edition = "2021"
|
||||||
default-run = "mangalord"
|
default-run = "mangalord"
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "mangalord-frontend",
|
"name": "mangalord-frontend",
|
||||||
"version": "0.35.0",
|
"version": "0.34.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -118,4 +118,77 @@ describe('hooks.server proxy', () => {
|
|||||||
expect(body.error.code).toBe('upstream_unavailable');
|
expect(body.error.code).toBe('upstream_unavailable');
|
||||||
expect(errSpy).toHaveBeenCalled();
|
expect(errSpy).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('strips every hop-by-hop header listed in RFC 7230 §6.1', async () => {
|
||||||
|
// Defence in depth: axum doesn't emit these, but a future
|
||||||
|
// middleware that did would otherwise leak per-connection
|
||||||
|
// state across the proxy boundary.
|
||||||
|
fetchSpy.mockResolvedValueOnce(new Response('[]', { status: 200 }));
|
||||||
|
const resolve = vi.fn();
|
||||||
|
await handle({
|
||||||
|
event: makeEvent('/api/v1/health', {
|
||||||
|
headers: {
|
||||||
|
host: 'app.example.com',
|
||||||
|
'content-length': '0',
|
||||||
|
connection: 'keep-alive',
|
||||||
|
'keep-alive': 'timeout=5',
|
||||||
|
'proxy-authenticate': 'Basic realm=x',
|
||||||
|
'proxy-authorization': 'Basic xyz',
|
||||||
|
te: 'trailers',
|
||||||
|
trailer: 'Expires',
|
||||||
|
'transfer-encoding': 'chunked',
|
||||||
|
upgrade: 'websocket',
|
||||||
|
// A non-hop-by-hop header to ensure non-targets
|
||||||
|
// aren't accidentally stripped.
|
||||||
|
'x-custom': 'pass-through'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
resolve
|
||||||
|
});
|
||||||
|
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||||
|
const headers = init.headers as Headers;
|
||||||
|
for (const h of [
|
||||||
|
'host',
|
||||||
|
'content-length',
|
||||||
|
'connection',
|
||||||
|
'keep-alive',
|
||||||
|
'proxy-authenticate',
|
||||||
|
'proxy-authorization',
|
||||||
|
'te',
|
||||||
|
'trailer',
|
||||||
|
'transfer-encoding',
|
||||||
|
'upgrade'
|
||||||
|
]) {
|
||||||
|
expect(headers.get(h), `${h} should be stripped`).toBeNull();
|
||||||
|
}
|
||||||
|
expect(headers.get('x-custom')).toBe('pass-through');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('aborts and returns 502 when the upstream stalls past the timeout', async () => {
|
||||||
|
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||||
|
// Simulate an aborted fetch (AbortController.abort() raises a
|
||||||
|
// DOMException with name 'AbortError' on Node's fetch). The
|
||||||
|
// handler should treat it as the same upstream_unavailable
|
||||||
|
// 502 it uses for any other network failure.
|
||||||
|
const abortErr = new DOMException('aborted', 'AbortError');
|
||||||
|
fetchSpy.mockRejectedValueOnce(abortErr);
|
||||||
|
|
||||||
|
const resolve = vi.fn();
|
||||||
|
const resp = await handle({ event: makeEvent('/api/v1/slow'), resolve });
|
||||||
|
expect(resp.status).toBe(502);
|
||||||
|
const body = await resp.json();
|
||||||
|
expect(body.error.code).toBe('upstream_unavailable');
|
||||||
|
expect(errSpy).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('attaches an AbortSignal to the upstream fetch so it can time out', async () => {
|
||||||
|
fetchSpy.mockResolvedValueOnce(new Response('[]', { status: 200 }));
|
||||||
|
const resolve = vi.fn();
|
||||||
|
await handle({ event: makeEvent('/api/v1/health'), resolve });
|
||||||
|
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||||
|
expect(init.signal).toBeInstanceOf(AbortSignal);
|
||||||
|
// The signal hasn't fired (handler returned in time), but its
|
||||||
|
// presence is the contract this test is pinning.
|
||||||
|
expect(init.signal?.aborted).toBe(false);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -12,20 +12,66 @@ import type { Handle } from '@sveltejs/kit';
|
|||||||
|
|
||||||
const BACKEND_URL = process.env.BACKEND_URL ?? 'http://localhost:8080';
|
const BACKEND_URL = process.env.BACKEND_URL ?? 'http://localhost:8080';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hop-by-hop headers per RFC 7230 §6.1. These are scoped to a single
|
||||||
|
* transport-level connection and must not be forwarded by a proxy.
|
||||||
|
* Plus `host` and `content-length`: `host` would mislead the backend
|
||||||
|
* about its origin, and `content-length` is recomputed by the upstream
|
||||||
|
* fetch from the body stream.
|
||||||
|
*/
|
||||||
|
const HOP_BY_HOP_HEADERS = [
|
||||||
|
'host',
|
||||||
|
'content-length',
|
||||||
|
'connection',
|
||||||
|
'keep-alive',
|
||||||
|
'proxy-authenticate',
|
||||||
|
'proxy-authorization',
|
||||||
|
'te',
|
||||||
|
'trailer',
|
||||||
|
'transfer-encoding',
|
||||||
|
'upgrade'
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cap each proxied request at 5 minutes. The bound exists to surface
|
||||||
|
* a wedged backend (stuck on a slow DB query, deadlocked, etc.) as a
|
||||||
|
* 502 rather than letting the browser request hang indefinitely.
|
||||||
|
*
|
||||||
|
* The default leans toward the slow-upload end of the spectrum: at a
|
||||||
|
* 1 Mbps upstream, a 200 MiB chapter upload (the default
|
||||||
|
* `MAX_REQUEST_BYTES` cap) needs ~27 minutes; 300 s covers the more
|
||||||
|
* realistic 25 Mbps urban-broadband case (~64 s for the same upload)
|
||||||
|
* with comfortable headroom. Operators serving very slow clients
|
||||||
|
* should raise `BACKEND_PROXY_TIMEOUT_MS`; operators behind a
|
||||||
|
* tighter upstream proxy may want to lower it. A future improvement
|
||||||
|
* is an idle-based timeout (reset per chunk) instead of this
|
||||||
|
* wall-clock budget — that's a fair bit more code, deferred.
|
||||||
|
*/
|
||||||
|
const PROXY_TIMEOUT_MS = (() => {
|
||||||
|
const raw = process.env.BACKEND_PROXY_TIMEOUT_MS;
|
||||||
|
const n = raw ? Number(raw) : 300_000;
|
||||||
|
return Number.isFinite(n) && n > 0 ? n : 300_000;
|
||||||
|
})();
|
||||||
|
|
||||||
export const handle: Handle = async ({ event, resolve }) => {
|
export const handle: Handle = async ({ event, resolve }) => {
|
||||||
if (event.url.pathname.startsWith('/api/')) {
|
if (event.url.pathname.startsWith('/api/')) {
|
||||||
const target = `${BACKEND_URL}${event.url.pathname}${event.url.search}`;
|
const target = `${BACKEND_URL}${event.url.pathname}${event.url.search}`;
|
||||||
|
|
||||||
// Strip hop-by-hop headers — `host` would mislead the backend
|
|
||||||
// about the origin, and `content-length` will be recomputed.
|
|
||||||
const headers = new Headers(event.request.headers);
|
const headers = new Headers(event.request.headers);
|
||||||
headers.delete('host');
|
for (const h of HOP_BY_HOP_HEADERS) headers.delete(h);
|
||||||
headers.delete('content-length');
|
|
||||||
|
// AbortController times the upstream fetch out so a backend
|
||||||
|
// wedged on a slow DB query doesn't keep the browser request
|
||||||
|
// hanging forever. The `signal` is also wired into the
|
||||||
|
// RequestInit so the body stream is cancelled cleanly.
|
||||||
|
const ctrl = new AbortController();
|
||||||
|
const timeoutHandle = setTimeout(() => ctrl.abort(), PROXY_TIMEOUT_MS);
|
||||||
|
|
||||||
const init: RequestInit & { duplex?: 'half' } = {
|
const init: RequestInit & { duplex?: 'half' } = {
|
||||||
method: event.request.method,
|
method: event.request.method,
|
||||||
headers,
|
headers,
|
||||||
redirect: 'manual'
|
redirect: 'manual',
|
||||||
|
signal: ctrl.signal
|
||||||
};
|
};
|
||||||
if (event.request.method !== 'GET' && event.request.method !== 'HEAD') {
|
if (event.request.method !== 'GET' && event.request.method !== 'HEAD') {
|
||||||
init.body = event.request.body;
|
init.body = event.request.body;
|
||||||
@@ -39,11 +85,13 @@ export const handle: Handle = async ({ event, resolve }) => {
|
|||||||
upstream = await fetch(target, init);
|
upstream = await fetch(target, init);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Network-layer failure (DNS / connection refused / TLS
|
// Network-layer failure (DNS / connection refused / TLS
|
||||||
// handshake) — most commonly "backend container restarting".
|
// handshake / abort by timeout) — most commonly "backend
|
||||||
// SvelteKit's default 500 would be an HTML page that
|
// container restarting". SvelteKit's default 500 would be
|
||||||
// client.ts can't .json(), which masks the real cause. Emit
|
// an HTML page that client.ts can't .json(), which masks
|
||||||
// the standard envelope with a dedicated code instead.
|
// the real cause. Emit the standard envelope with a
|
||||||
|
// dedicated code instead.
|
||||||
console.error('Proxy to backend failed:', e);
|
console.error('Proxy to backend failed:', e);
|
||||||
|
clearTimeout(timeoutHandle);
|
||||||
return new Response(
|
return new Response(
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
error: {
|
error: {
|
||||||
@@ -58,6 +106,7 @@ export const handle: Handle = async ({ event, resolve }) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
clearTimeout(timeoutHandle);
|
||||||
return new Response(upstream.body, {
|
return new Response(upstream.body, {
|
||||||
status: upstream.status,
|
status: upstream.status,
|
||||||
statusText: upstream.statusText,
|
statusText: upstream.statusText,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { describe, it, expect, vi, beforeEach, afterEach, type MockInstance } from 'vitest';
|
import { describe, it, expect, vi, beforeEach, afterEach, type MockInstance } from 'vitest';
|
||||||
import { ApiError, request, setOn401Hook } from './client';
|
import { ApiError, request } from './client';
|
||||||
import { getManga } from './mangas';
|
import { getManga } from './mangas';
|
||||||
|
|
||||||
describe('request error envelope parsing', () => {
|
describe('request error envelope parsing', () => {
|
||||||
@@ -73,88 +73,3 @@ describe('request error envelope parsing', () => {
|
|||||||
expect(err.code).toBe('http_error');
|
expect(err.code).toBe('http_error');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('on401 hook', () => {
|
|
||||||
let fetchSpy: MockInstance<typeof globalThis.fetch>;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fetchSpy = vi.spyOn(globalThis, 'fetch');
|
|
||||||
});
|
|
||||||
afterEach(() => {
|
|
||||||
vi.restoreAllMocks();
|
|
||||||
// Critical: reset the module-level hook between tests so a
|
|
||||||
// hook installed by one test doesn't leak into the next.
|
|
||||||
setOn401Hook(null);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('invokes the hook exactly once on a 401 response and re-throws', async () => {
|
|
||||||
const hook = vi.fn();
|
|
||||||
setOn401Hook(hook);
|
|
||||||
fetchSpy.mockResolvedValueOnce(
|
|
||||||
new Response(
|
|
||||||
JSON.stringify({ error: { code: 'unauthenticated', message: 'no auth' } }),
|
|
||||||
{ status: 401, headers: { 'content-type': 'application/json' } }
|
|
||||||
)
|
|
||||||
);
|
|
||||||
await expect(getManga('x')).rejects.toMatchObject({
|
|
||||||
status: 401,
|
|
||||||
code: 'unauthenticated'
|
|
||||||
});
|
|
||||||
expect(hook).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('does not invoke the hook on non-401 errors', async () => {
|
|
||||||
const hook = vi.fn();
|
|
||||||
setOn401Hook(hook);
|
|
||||||
fetchSpy.mockResolvedValueOnce(
|
|
||||||
new Response(
|
|
||||||
JSON.stringify({ error: { code: 'not_found', message: 'no' } }),
|
|
||||||
{ status: 404, headers: { 'content-type': 'application/json' } }
|
|
||||||
)
|
|
||||||
);
|
|
||||||
await expect(getManga('x')).rejects.toMatchObject({ status: 404 });
|
|
||||||
expect(hook).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('does not invoke the hook on successful responses', async () => {
|
|
||||||
const hook = vi.fn();
|
|
||||||
setOn401Hook(hook);
|
|
||||||
fetchSpy.mockResolvedValueOnce(
|
|
||||||
new Response(
|
|
||||||
JSON.stringify({
|
|
||||||
id: 'm1',
|
|
||||||
title: 't',
|
|
||||||
status: 'ongoing',
|
|
||||||
alt_titles: [],
|
|
||||||
description: null,
|
|
||||||
cover_image_path: null,
|
|
||||||
created_at: '2026-01-01T00:00:00Z',
|
|
||||||
updated_at: '2026-01-01T00:00:00Z',
|
|
||||||
authors: [],
|
|
||||||
genres: [],
|
|
||||||
tags: []
|
|
||||||
}),
|
|
||||||
{ status: 200, headers: { 'content-type': 'application/json' } }
|
|
||||||
)
|
|
||||||
);
|
|
||||||
await getManga('m1');
|
|
||||||
expect(hook).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('swallows hook exceptions so the original ApiError still propagates', async () => {
|
|
||||||
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
|
|
||||||
setOn401Hook(() => {
|
|
||||||
throw new Error('hook boom');
|
|
||||||
});
|
|
||||||
fetchSpy.mockResolvedValueOnce(
|
|
||||||
new Response(
|
|
||||||
JSON.stringify({ error: { code: 'unauthenticated', message: 'x' } }),
|
|
||||||
{ status: 401, headers: { 'content-type': 'application/json' } }
|
|
||||||
)
|
|
||||||
);
|
|
||||||
await expect(getManga('x')).rejects.toMatchObject({ status: 401 });
|
|
||||||
// The original ApiError won — the hook's panic was logged but
|
|
||||||
// didn't replace the API error.
|
|
||||||
expect(consoleSpy).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -25,21 +25,6 @@ export class ApiError extends Error {
|
|||||||
|
|
||||||
type ErrorEnvelope = { error?: { code?: unknown; message?: unknown } };
|
type ErrorEnvelope = { error?: { code?: unknown; message?: unknown } };
|
||||||
|
|
||||||
/**
|
|
||||||
* Optional hook fired the first moment `request()` observes a 401 on
|
|
||||||
* any endpoint. Used by the session store to clear the cached user
|
|
||||||
* when the server reports the session is no longer valid (expired
|
|
||||||
* cookie, rotated server-side, password changed on another device).
|
|
||||||
*
|
|
||||||
* Set to `null` (or `undefined`) to disable. Tests that don't want
|
|
||||||
* the side effect should leave it unset.
|
|
||||||
*/
|
|
||||||
let on401Hook: (() => void) | null = null;
|
|
||||||
|
|
||||||
export function setOn401Hook(handler: (() => void) | null): void {
|
|
||||||
on401Hook = handler;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
export async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||||
// Forward credentials (session cookie) explicitly so cross-origin
|
// Forward credentials (session cookie) explicitly so cross-origin
|
||||||
// deployments — those configured via CORS_ALLOWED_ORIGINS — keep
|
// deployments — those configured via CORS_ALLOWED_ORIGINS — keep
|
||||||
@@ -69,16 +54,6 @@ export async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
|||||||
} catch {
|
} catch {
|
||||||
// Body wasn't parseable; keep the http_error fallback.
|
// Body wasn't parseable; keep the http_error fallback.
|
||||||
}
|
}
|
||||||
if (res.status === 401 && on401Hook) {
|
|
||||||
// Fire before throwing so the session store updates even
|
|
||||||
// if the caller swallows the ApiError (e.g. the *OrEmpty
|
|
||||||
// wrappers used by guest-rendering pages).
|
|
||||||
try {
|
|
||||||
on401Hook();
|
|
||||||
} catch (e) {
|
|
||||||
console.error('on401 hook threw:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
throw new ApiError(res.status, code, message);
|
throw new ApiError(res.status, code, message);
|
||||||
}
|
}
|
||||||
// Any empty body (not just 204) returns undefined — the manga-add
|
// Any empty body (not just 204) returns undefined — the manga-add
|
||||||
|
|||||||
@@ -3,17 +3,7 @@
|
|||||||
// Only mutated client-side (onMount / form submits) so the module-level
|
// Only mutated client-side (onMount / form submits) so the module-level
|
||||||
// instance can't leak across SSR requests — SSR always renders the
|
// instance can't leak across SSR requests — SSR always renders the
|
||||||
// `loaded === false` state, and the client refreshes after hydration.
|
// `loaded === false` state, and the client refreshes after hydration.
|
||||||
//
|
|
||||||
// IMPORTANT: do not call any `api/*` helper from `+page.server.ts` /
|
|
||||||
// `+layout.server.ts`. The `setOn401Hook` below is registered at
|
|
||||||
// module load (gated on `browser`, so it only fires in the client
|
|
||||||
// bundle), so a 401 from a server-side fetch would mutate this
|
|
||||||
// module-level `session.user` across SvelteKit requests — a real
|
|
||||||
// cross-request state leak. The `if (browser)` guard makes that
|
|
||||||
// failure mode mechanical rather than convention-based.
|
|
||||||
|
|
||||||
import { browser } from '$app/environment';
|
|
||||||
import { setOn401Hook } from './api/client';
|
|
||||||
import { me, type User } from './api/auth';
|
import { me, type User } from './api/auth';
|
||||||
|
|
||||||
class SessionStore {
|
class SessionStore {
|
||||||
@@ -41,16 +31,3 @@ class SessionStore {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const session = new SessionStore();
|
export const session = new SessionStore();
|
||||||
|
|
||||||
// When any backend call returns 401, drop the cached user. Before this
|
|
||||||
// hook, the `*OrEmpty` wrappers silently returned empty pages on 401
|
|
||||||
// — so a mid-session expiry left the UI rendering as "logged in but
|
|
||||||
// no bookmarks/collections/etc." until the user manually reloaded.
|
|
||||||
// With the hook the session.user reactive store flips to null on the
|
|
||||||
// first 401, so the layout re-renders the login affordance.
|
|
||||||
//
|
|
||||||
// Gated on `browser` so it's only installed in the client bundle.
|
|
||||||
// See the module-level comment above for the SSR rationale.
|
|
||||||
if (browser) {
|
|
||||||
setOn401Hook(() => session.setUser(null));
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user