feat: use error page instead of redirections, prevent arbitrary URLs

Author: WarningImHack3r

src/app.d.ts

@@ -1,10 +1,27 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
+import type { ResolvedPathname } from "$app/types";
 import type { PostHog } from "posthog-node";
 
 declare global {
 	namespace App {
-		// interface Error {}
+		interface Error {
+			/**
+			 * A description, going in pair with a custom message.
+			 * When provided, the error code is shown much more subtly
+			 * and the description is shown where the title used to be.
+			 */
+			description?: string;
+			/**
+			 * A link to suggest going to in a button on the error page.
+			 * Internal links must be `resolve`d for safety purposes, while
+			 * external links can also be provided.
+			 */
+			link?: {
+				text: string;
+				href: ResolvedPathname | `https://${string}`;
+			};
+		}
 		interface Locals {
 			posthog: PostHog;
 		}

src/routes/+error.svelte

@@ -1,14 +1,37 @@
 <script lang="ts">
 	import { page } from "$app/state";
+	import { Button } from "$lib/components/ui/button";
 </script>
 
 <svelte:head>
 	<title>Error {page.status} | Svelte Changelog</title>
 </svelte:head>
 
-<div class="flex h-[75vh] w-full flex-col items-center justify-center">
-	<h1 class="text-[15rem] leading-none">{page.status}</h1>
-	{#if page.error}
-		<h3 class="text-2xl font-semibold text-muted-foreground">{page.error.message}</h3>
+<div
+	class={[
+		"flex h-[75vh] w-full flex-col justify-center",
+		page.error?.description ? "items-start gap-2" : "items-center"
+	]}
+>
+	{#if page.error?.description}
+		<div class="relative w-full">
+			<h1 class="text-5xl leading-none">{page.error.message}</h1>
+			<h3 class="max-w-prose text-xl font-semibold text-muted-foreground">
+				{page.error.description}
+			</h3>
+			<span
+				class="absolute inset-y-0 right-0 -translate-y-4 font-display text-9xl text-muted-foreground opacity-20"
+			>
+				{page.status}
+			</span>
+		</div>
+	{:else}
+		<h1 class="text-[15rem] leading-none">{page.status}</h1>
+		{#if page.error}
+			<h3 class="text-2xl font-semibold text-muted-foreground">{page.error.message}</h3>
+		{/if}
+	{/if}
+	{#if page.error?.link}
+		<Button href={page.error.link.href} class="mt-8">{page.error.link.text}</Button>
 	{/if}
 </div>

src/routes/[...host=gh]/[org]/+page.server.ts

@@ -1,6 +1,13 @@
-import { redirect } from "@sveltejs/kit";
+import { error } from "@sveltejs/kit";
 import { resolve } from "$app/paths";
 
 export function load() {
-	redirect(308, resolve("/"));
+	error(403, {
+		message: "Unable to visit an organization/user",
+		description: "Paste a whole PR/issue/discussion link to display it in Svelte Changelog.",
+		link: {
+			text: "Go home",
+			href: resolve("/")
+		}
+	});
 }

src/routes/[...host=gh]/[org]/[repo]/+page.server.ts

@@ -1,6 +1,13 @@
-import { redirect } from "@sveltejs/kit";
+import { error } from "@sveltejs/kit";
 import { resolve } from "$app/paths";
 
 export function load() {
-	redirect(308, resolve("/"));
+	error(403, {
+		message: "Unable to visit a repository",
+		description: "Paste a whole PR/issue/discussion link to display it in Svelte Changelog.",
+		link: {
+			text: "Go home",
+			href: resolve("/")
+		}
+	});
 }

src/routes/[...host=gh]/[org]/[repo]/[pid=pid]/+page.server.ts

@@ -1,6 +1,15 @@
-import { redirect } from "@sveltejs/kit";
+import { error } from "@sveltejs/kit";
 import { resolve } from "$app/paths";
 
-export function load() {
-	redirect(308, resolve("/"));
+export function load({ params: { pid: type } }) {
+	const element =
+		type === "issues" ? "issue" : type === "discussions" ? "discussion" : "pull request";
+	error(403, {
+		message: `Unable to determine the ${element} to visit`,
+		description: `Please specify the exact ${element} link to display in Svelte Changelog.`,
+		link: {
+			text: "Go home",
+			href: resolve("/")
+		}
+	});
 }

src/routes/[pid=pid]/[org]/[repo]/[id=number]/+page.server.ts

@@ -1,12 +1,25 @@
 import { error, redirect } from "@sveltejs/kit";
 import { resolve } from "$app/paths";
-import { publicRepos } from "$lib/repositories";
+import { publicRepos, uniqueRepos } from "$lib/repositories";
 import { githubCache } from "$lib/server/github-cache";
 import type { BranchCommit } from "$lib/types";
 
 type Type = "pull" | "issue" | "discussion";
 
 export async function load({ params: { pid: type, org, repo, id }, fetch }) {
+	const isKnownRepo = uniqueRepos.some(({ owner, name }) => org === owner && repo === name);
+	if (!isKnownRepo) {
+		error(403, {
+			message: "Unknown repository",
+			description:
+				"Svelte Changelog can only display the details of known repositories. Is this a mistake? Open an issue from the GitHub link in the navigation bar!",
+			link: {
+				text: "Go home",
+				href: resolve("/")
+			}
+		});
+	}
+
 	const item = await githubCache.getItemDetails(org, repo, +id);
 	if (!item) {
 		error(404, `${type} #${id} doesn't exist in repo ${org}/${repo}`);

src/routes/tracker/[org]/[repo]/+page.server.ts

@@ -1,4 +1,6 @@
 import { error } from "@sveltejs/kit";
+import { resolve } from "$app/paths";
+import { uniqueRepos } from "$lib/repositories";
 import { githubCache } from "$lib/server/github-cache";
 
 // source: https://docs.github.com/en/issues/tracking-your-work-with-issues/using-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword
@@ -15,6 +17,21 @@ const closingKeywords = [
 ];
 
 export async function load({ params }) {
+	const isKnownRepo = uniqueRepos.some(
+		({ owner, name }) => params.org === owner && params.repo === name
+	);
+	if (!isKnownRepo) {
+		error(403, {
+			message: "Unknown repository",
+			description:
+				"Svelte Changelog can only track known repositories. Is this a mistake? Open an issue from the GitHub link in the navigation bar!",
+			link: {
+				text: "Tracker home page",
+				href: resolve("/tracker")
+			}
+		});
+	}
+
 	const members = await githubCache.getOrganizationMembers(params.org);
 	if (!members.length) error(404, `Organization ${params.org} not found or empty`);