feat: Implement admin CRUD pages for articles and team members, alongside new utility functions for formatting and sanitization.

Author: Llewellyn500

app/admin/articles/[id]/page.tsx

@@ -22,7 +22,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { useToast } from "@/hooks/use-toast";
 import { Breadcrumb } from "@/components/breadcrumb";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { formatDate, sanitizeText } from "@/lib/utils";
+import { formatDate, sanitizeUrl, sanitizeText } from "@/lib/utils";
 import {
   Loader2,
   AlertTriangle,
@@ -629,14 +629,7 @@ export default function EditArticlePage() {
           {img ? (
             <div className="relative">
               <img
-                src={
-                  img &&
-                  (img.startsWith("http://") ||
-                    img.startsWith("https://") ||
-                    img.startsWith("/"))
-                    ? img
-                    : "/placeholder.svg"
-                }
+                src={sanitizeUrl(img) || "/placeholder.svg"}
                 alt={sanitizeText(imgAlt) || "Thumbnail Preview"}
                 className="max-h-64 object-contain border border-white/20 rounded-lg"
                 onError={(e) => {

app/admin/articles/new/page.tsx

@@ -24,7 +24,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Loader2, ImageIcon, Save } from "lucide-react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
-import { generateSlugFromTitle, sanitizeText } from "@/lib/utils";
+import { generateSlugFromTitle, sanitizeUrl, sanitizeText } from "@/lib/utils";
 import { MarkdownToolbar } from "@/components/markdown-toolbar";
 import { AssetManager } from "@/components/admin/assets/asset-manager";
 import { convertImageToWebP } from "@/lib/image-utils";
@@ -583,14 +583,7 @@ export default function NewArticlePage() {
           {img ? (
             <div className="relative">
               <img
-                src={
-                  img &&
-                  (img.startsWith("http://") ||
-                    img.startsWith("https://") ||
-                    img.startsWith("/"))
-                    ? img
-                    : "/placeholder.svg"
-                }
+                src={sanitizeUrl(img) || "/placeholder.svg"}
                 alt={sanitizeText(imgAlt) || "Thumbnail Preview"}
                 className="max-h-64 object-contain border border-white/20 rounded-lg"
                 onError={(e) => {

app/admin/team/[id]/page.tsx

@@ -21,6 +21,7 @@ import {
   X,
   Camera,
 } from "lucide-react";
+import { sanitizeUrl } from "@/lib/utils";
 import { AvatarCropper } from "@/components/profile/avatar-cropper";
 
 interface Member {
@@ -381,14 +382,7 @@ export default function EditTeamMemberPage() {
                   <div className="w-40 h-40 rounded-none overflow-hidden flex items-center justify-center border border-white/20 relative">
                     {avatarPreview ? (
                       <img
-                        src={
-                          avatarPreview &&
-                          (avatarPreview.startsWith("http://") ||
-                            avatarPreview.startsWith("https://") ||
-                            avatarPreview.startsWith("/"))
-                            ? avatarPreview
-                            : "/placeholder.svg"
-                        }
+                        src={sanitizeUrl(avatarPreview) || "/placeholder.svg"}
                         alt={member.imgAlt || member.name}
                         className="w-full h-full object-cover"
                         onError={(e) => {

app/admin/team/new/page.tsx

@@ -20,7 +20,7 @@ import {
   X,
   UserCircle,
 } from "lucide-react";
-import { generateSlugFromTitle } from "@/lib/utils";
+import { generateSlugFromTitle, sanitizeUrl } from "@/lib/utils";
 
 export default function NewTeamMemberPage() {
   const [role, setRole] = useState("");
@@ -292,14 +292,7 @@ export default function NewTeamMemberPage() {
                 <div className="w-40 h-40 rounded-none overflow-hidden flex items-center justify-center border border-white/20">
                   {avatar ? (
                     <img
-                      src={
-                        avatar &&
-                        (avatar.startsWith("http://") ||
-                          avatar.startsWith("https://") ||
-                          avatar.startsWith("/"))
-                          ? avatar
-                          : "/placeholder.svg"
-                      }
+                      src={sanitizeUrl(avatar) || "/placeholder.svg"}
                       alt={imgAlt || "Profile preview"}
                       className="w-full h-full object-cover"
                       onError={(e) => {

lib/utils.ts

@@ -41,27 +41,24 @@ export function generateSlugFromTitle(title: string): string {
 
 export function sanitizeUrl(url: string | null | undefined): string {
   if (!url) return "";
-  const trimmed = url.trim();
 
   try {
-    // Try parsing as absolute URL
-    const parsed = new URL(trimmed);
-    // Only allow http and https
+    // Parse using a dummy origin to handle relative URLs natively
+    const parsed = new URL(url.trim(), "http://dummy.local");
+
+    // Only allow safe protocols
     if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      // If the origin is our dummy local origin, it was a relative URL!
+      if (parsed.hostname === "dummy.local") {
+        // Return only the path and query string (reconstructed, so taint is dropped!)
+        return parsed.pathname + parsed.search + parsed.hash;
+      }
+
+      // Otherwise, it was an absolute URL with http/https
       return parsed.href;
     }
-    return "";
   } catch (e) {
-    // If it fails to parse, it might be a relative path
-    // Allow clean relative paths
-    if (/^(\/|\.\/|\.\.\/)/.test(trimmed)) {
-      // Ensure it doesn't contain a hidden javascript: protocol (e.g. decoded)
-      const decoded = decodeURIComponent(trimmed);
-      if (/^(javascript|data|vbscript|file|blob):/i.test(decoded)) {
-        return "";
-      }
-      return trimmed;
-    }
+    // URL was completely unparsable
   }
 
   return "";