fix: validate URL protocols in data-driven href attributes to prevent XSS

URL fields from JSON data files (testimonials.json, testimonials-extra.json,
community-builds.json, press.json) are rendered directly in <a href={...}>
attributes. Astro auto-escapes HTML entities but does not block dangerous
protocols like javascript:, data:, or vbscript:.

If a crafted URL like javascript:alert(document.cookie) were merged via a
community PR, it would render as a clickable XSS link on the homepage,
shoutouts, showcase, and press pages.

This adds a sanitizeUrl() utility that validates URL protocols at build time,
allowing only http:, https:, and mailto:. Dangerous protocols are replaced
with #. All existing URLs are https:// so there is no behavioral change.

Follows up on openclaw#140 and openclaw#142 which fixed related XSS vectors.

Signed-off-by: Sebastien Tardif <sebtardif@ncf.ca>

Author: SebTardif

src/lib/sanitize-url.ts

@@ -0,0 +1,15 @@
+const allowedProtocols = new Set(['http:', 'https:', 'mailto:']);
+
+/**
+ * Validate that a URL string uses an allowed protocol (http, https, mailto).
+ * Returns the URL unchanged when valid, or "#" for dangerous protocols
+ * like javascript: or data: that could enable XSS via crafted data files.
+ */
+export function sanitizeUrl(url: string): string {
+  try {
+    const parsed = new URL(url, 'https://placeholder.invalid');
+    return allowedProtocols.has(parsed.protocol) ? url : '#';
+  } catch {
+    return '#';
+  }
+}

src/pages/index.astro

@@ -7,6 +7,7 @@ import communityBuilds from '../data/community-builds.json';
 import pressArticles from '../data/press.json';
 import { getPublishedBlogPosts } from '../lib/blog';
 import { getCachedXAvatarSrc, getInitialsAvatarSrc } from '../lib/avatars';
+import { sanitizeUrl } from '../lib/sanitize-url';
 
 // Get latest blog post
 const [latestPost] = await getPublishedBlogPosts();
@@ -120,7 +121,7 @@ const featuredPress = pressArticles.slice(0, 4);
       <div class="testimonials-track">
         <div class="testimonials-row row-1" style={`--duration: ${duration1}s`}>
           {row1.map((t) => (
-            <a href={t.url} target="_blank" rel="noopener" class="testimonial-card" tabindex="-1">
+            <a href={sanitizeUrl(t.url)} target="_blank" rel="noopener" class="testimonial-card" tabindex="-1">
               <img
                 src={getCachedXAvatarSrc(t.author, t.author, 88)}
                 alt={t.author}
@@ -137,7 +138,7 @@ const featuredPress = pressArticles.slice(0, 4);
         </div>
         <div class="testimonials-row row-2" style={`--duration: ${duration2}s`}>
           {row2.map((t) => (
-            <a href={t.url} target="_blank" rel="noopener" class="testimonial-card">
+            <a href={sanitizeUrl(t.url)} target="_blank" rel="noopener" class="testimonial-card">
               <img
                 src={getCachedXAvatarSrc(t.author, t.author, 88)}
                 alt={t.author}
@@ -632,7 +633,7 @@ const featuredPress = pressArticles.slice(0, 4);
       />
       <div class="builds-grid">
         {featuredBuilds.map((build) => (
-          <a href={build.href} target="_blank" rel="noopener" class="build-card">
+          <a href={sanitizeUrl(build.href)} target="_blank" rel="noopener" class="build-card">
             <div class="build-card-header">
               <span class="build-source">{build.source}</span>
               <span class="build-open">Open →</span>
@@ -660,7 +661,7 @@ const featuredPress = pressArticles.slice(0, 4);
       <div class="press-grid">
         {featuredPress.map((article) => (
           <a
-            href={article.url}
+            href={sanitizeUrl(article.url)}
             target="_blank"
             rel="noopener"
             class:list={['press-card', article.featured && 'press-featured']}

src/pages/press.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import pressArticles from '../data/press.json';
+import { sanitizeUrl } from '../lib/sanitize-url';
 ---
 
 <Layout
@@ -26,7 +27,7 @@ import pressArticles from '../data/press.json';
     <div class="press-grid">
       {pressArticles.map((article) => (
         <a
-          href={article.url}
+          href={sanitizeUrl(article.url)}
           target="_blank"
           rel="noopener"
           class:list={['press-card', article.featured && 'press-featured']}

src/pages/shoutouts.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
 import testimonials from '../data/testimonials.json';
 import extraTestimonials from '../data/testimonials-extra.json';
 import { getCachedXAvatarSrc, getInitialsAvatarSrc } from '../lib/avatars';
+import { sanitizeUrl } from '../lib/sanitize-url';
 
 // Combine all testimonials - strongest first, then extras (no randomization)
 const allTestimonials = [...testimonials, ...extraTestimonials];
@@ -23,7 +24,7 @@ const allTestimonials = [...testimonials, ...extraTestimonials];
 
     <div class="shoutouts-grid">
       {allTestimonials.map((t) => (
-        <a href={t.url} target="_blank" rel="noopener" class="shoutout-card">
+        <a href={sanitizeUrl(t.url)} target="_blank" rel="noopener" class="shoutout-card">
           <img
             src={t.avatar || getCachedXAvatarSrc(t.author, t.author, 96)}
             alt={t.author}

src/pages/showcase.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
 import showcaseData from '../data/showcase.json';
 import featuredBuilds from '../data/community-builds.json';
 import { getCachedXAvatarSrc, getInitialsAvatarSrc } from '../lib/avatars';
+import { sanitizeUrl } from '../lib/sanitize-url';
 
 const featuredIds = new Set(featuredBuilds.map((item) => item.id));
 const sortedShowcase = showcaseData.filter((item) => !featuredIds.has(item.id));
@@ -41,7 +42,7 @@ const categoryLabels: Record<string, string> = {
       </div>
       <div class="featured-grid">
         {featuredBuilds.map((build) => (
-          <a href={build.href} target="_blank" rel="noopener" class="featured-card">
+          <a href={sanitizeUrl(build.href)} target="_blank" rel="noopener" class="featured-card">
             <div class="featured-topline">
               <span class="featured-source">{build.source}</span>
               <span class="featured-likes">❤️ {build.likes}</span>