fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(security): medium/low — event-lock, atomic config, a11y, diashow, hygiene

Browse Source 
- social: likes/comments rejected on a closed event (e2e proven).
- admin: patch_config validates-then-writes atomically; char-based length.
- hashtag/comment models: atomic tag writes in edit + comment paths.
- Modal: inert the background (modal-inert action) for screen readers.
- sse.ts: idempotent visibilitychange listener (no duplicate reconnects).
- diashow: videos advance on `ended` (transitions + page wiring).
- docs/hygiene: README clone-case fix; removed stale committed .env.test and
  gitignored it; docker-compose.dev.yml tidy.

Left documented as accepted-risk per plan: PIN-persist-after-logout,
UUID-reachable hidden uploads, DECISION-media-auth.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
fabi
2026-07-01 21:25:58 +02:00
parent f08d858281
commit 91ff961850
15 changed files with 188 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/lib/actions/modal-inert.ts Normal file
View File

@@ -0,0 +1,29 @@
// Make everything *outside* a modal's subtree inert while it's open, so screen
// readers and tab order can't reach the background (focus-trap only covers
// keyboard focus; `inert` also hides the content from assistive tech).
//
// Walks from the node up to <body> and marks every sibling along the path as
// inert, then restores exactly those it changed on teardown. Applying it to a
// `display: contents` wrapper keeps the modal's own backdrop + dialog interactive.
export function modalInert(node: HTMLElement) {
const changed: HTMLElement[] = [];
let el: HTMLElement | null = node;
while (el && el !== document.body) {
const parent: HTMLElement | null = el.parentElement;
if (!parent) break;
for (const sib of Array.from(parent.children)) {
if (sib !== el && sib instanceof HTMLElement && !sib.hasAttribute('inert')) {
sib.setAttribute('inert', '');
changed.push(sib);
}
}
el = parent;
}
return {
destroy() {
for (const sib of changed) sib.removeAttribute('inert');
}
};
}

42
frontend/src/lib/components/Modal.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { focusTrap } from '$lib/actions/focus-trap';
import { scrollLock } from '$lib/actions/scroll-lock';
import { modalInert } from '$lib/actions/modal-inert';
import type { Snippet } from 'svelte';
// Accessible name is REQUIRED. Pass `titleId` when the dialog renders its own
@@ -35,24 +36,29 @@
</script>
{#if open}
<button
type="button"
class="fixed inset-0 z-50 bg-black/50"
aria-label="Schließen"
tabindex="-1"
onclick={closeOnBackdrop ? onClose : () => {}}
></button>
<div
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4"
role="dialog"
aria-modal="true"
aria-labelledby={titleId}
aria-label={titleId ? undefined : ariaLabel}
use:focusTrap={{ onclose: onClose }}
use:scrollLock
>
<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
{@render children()}
<!-- display:contents wrapper: keeps the backdrop + dialog visually unchanged
while giving `modalInert` a single node whose siblings (the background
page, nav, etc.) get inerted for assistive tech. -->
<div class="contents" use:modalInert>
<button
type="button"
class="fixed inset-0 z-50 bg-black/50"
aria-label="Schließen"
tabindex="-1"
onclick={closeOnBackdrop ? onClose : () => {}}
></button>
<div
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4"
role="dialog"
aria-modal="true"
aria-labelledby={titleId}
aria-label={titleId ? undefined : ariaLabel}
use:focusTrap={{ onclose: onClose }}
use:scrollLock
>
<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
{@render children()}
</div>
</div>
</div>
{/if}

5
frontend/src/lib/diashow/transitions/crossfade.svelte
View File

@@ -7,9 +7,11 @@
src: string;
isVideo: boolean;
durationMs: number;
/** Fired when a video slide finishes so the parent can advance early. */
onended?: () => void;
}
let { src, isVideo, durationMs }: Props = $props();
let { src, isVideo, durationMs, onended }: Props = $props();
</script>
<div
@@ -23,6 +25,7 @@
autoplay
muted
playsinline
{onended}
class="h-full w-full object-contain"
></video>
{:else}

2
frontend/src/lib/diashow/transitions/index.ts
View File

@@ -25,6 +25,8 @@ export interface TransitionProps {
src: string;
isVideo: boolean;
durationMs: number;
/** Fired when a video slide finishes so the parent can advance early. */
onended?: () => void;
}
export const transitions: SlideTransition[] = [

5
frontend/src/lib/diashow/transitions/kenburns.svelte
View File

@@ -6,9 +6,11 @@
src: string;
isVideo: boolean;
durationMs: number;
/** Fired when a video slide finishes so the parent can advance early. */
onended?: () => void;
}
let { src, isVideo, durationMs }: Props = $props();
let { src, isVideo, durationMs, onended }: Props = $props();
// Mild random pan so each slide feels different. Range chosen so the image never
// pans out of frame given the object-fit: cover.
@@ -27,6 +29,7 @@
autoplay
muted
playsinline
{onended}
class="h-full w-full object-contain"
></video>
{:else}

38
frontend/src/lib/sse.ts
View File

@@ -174,15 +174,31 @@ async function deltaFetchAndFan(since: string): Promise<void> {
// Page Visibility API: close while hidden, reopen on focus. On reopen `connectSse`'s
// `onopen` runs the delta fetch.
if (typeof document !== 'undefined') {
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
disconnectSse();
} else {
// User-initiated reconnect — clear backoff so we don't wait out a long
// retry delay that was scheduled from a prior background error.
reconnectAttempt = 0;
connectSse();
}
});
function handleVisibilityChange() {
if (document.hidden) {
disconnectSse();
} else {
// User-initiated reconnect — clear backoff so we don't wait out a long
// retry delay that was scheduled from a prior background error.
reconnectAttempt = 0;
connectSse();
}
}
let visibilityBound = false;
/** Idempotent: safe to call more than once; only the first registration sticks. */
function bindVisibility() {
if (visibilityBound || typeof document === 'undefined') return;
document.addEventListener('visibilitychange', handleVisibilityChange);
visibilityBound = true;
}
/** Remove the visibility listener (e.g. on teardown / test cleanup). */
export function teardownVisibility() {
if (!visibilityBound || typeof document === 'undefined') return;
document.removeEventListener('visibilitychange', handleVisibilityChange);
visibilityBound = false;
}
bindVisibility();

8
frontend/src/routes/diashow/+page.svelte
View File

@@ -52,6 +52,13 @@
if (current) scheduleNext();
}
// A video finished before its dwell/12s cap — advance immediately (unless paused).
// The {#key current.id} block destroys the old <video> on advance, so a fallback
// timer that already fired can't trigger this handler for a stale slide.
function handleVideoEnded() {
if (!paused) advance();
}
async function loadInitial() {
try {
const feed = await api.get<FeedResponse>('/feed?limit=200');
@@ -163,6 +170,7 @@
src={mediaSrc}
{isVideo}
durationMs={transitionDef.defaultDurationMs}
onended={handleVideoEnded}
/>
{/key}
{:else if isEmpty()}