Replace ParamFerry component with safer ParamFerryLink component

Author: cursoragent

URL_PARAMETER_FERRYING.md

@@ -38,23 +38,19 @@ The parameter syncing patterns in `src/utils.ts` have been updated to focus on:
 - Navigation links now automatically include ferried parameters
 - Maintains the existing Button styling and behavior
 
-### 4. Automatic Parameter Ferrying Component
+### 4. Safe Parameter Ferrying Link Component
 
-**ParamFerry Component** (`src/components/paramFerry.tsx`):
-- A client-side component that automatically processes all links on the page
-- Uses MutationObserver to handle dynamically added links
-- Skips external links, anchors, mailto, and tel links
-- Marks processed links to avoid duplicate processing
-
-**Added to Layout** (`app/layout.tsx`):
-- The ParamFerry component is included in the root layout
-- Works automatically across all pages without additional setup
+**ParamFerryLink Component** (`src/components/paramFerryLink.tsx`):
+- A safe Link component that handles parameter ferrying at the component level
+- No DOM manipulation - parameters are ferried during rendering
+- Only processes internal links (starting with `/` or `#`)
+- Can be used as a drop-in replacement for Next.js Link component
 
 ## How It Works
 
-1. **Page Load**: When a page loads with URL parameters matching the patterns, the ParamFerry component identifies them
-2. **Link Processing**: All internal links on the page are processed to include the relevant parameters
-3. **Dynamic Updates**: New links added to the page (via JavaScript) are automatically processed
+1. **Component Rendering**: When link components render, they check for matching URL parameters in the current page
+2. **Parameter Extraction**: Parameters matching the specified patterns are extracted from the current URL
+3. **URL Construction**: Parameters are safely appended to internal link URLs during component rendering
 4. **Navigation**: When users click internal links, they carry forward the tracked parameters
 
 ## Examples
@@ -99,14 +95,22 @@ import {NavLink} from 'sentry-docs/components/navlink';
 <NavLink href="/docs/guides/">Guides</NavLink>
 ```
 
+### Using ParamFerryLink
+```tsx
+import {ParamFerryLink} from 'sentry-docs/components/paramFerryLink';
+
+// Safe component-level parameter ferrying
+<ParamFerryLink href="/docs/getting-started/">Get Started</ParamFerryLink>
+```
+
 ## Security Features
 
 The implementation includes comprehensive security measures:
-- **URL Scheme Validation**: Blocks dangerous URL schemes (`javascript:`, `data:`, `vbscript:`, `file:`, `about:`)
-- **Parameter Sanitization**: Sanitizes parameter keys and values to prevent injection attacks
-- **Length Limits**: Parameter values are limited to 500 characters
-- **Control Character Filtering**: Removes control characters from parameters
-- **Multiple Validation Layers**: URLs are validated at multiple stages of processing
+- **Same-Origin Policy**: Only processes URLs from the same origin to prevent cross-site attacks
+- **Internal Links Only**: Component-level ferrying only applies to internal links (starting with `/` or `#`)
+- **No DOM Manipulation**: Avoids security risks associated with modifying existing DOM elements
+- **Parameter Length Limits**: Parameter values are limited to 200 characters
+- **Type Validation**: Ensures all parameters are strings before processing
 
 ## Browser Compatibility
 

app/layout.tsx

@@ -7,7 +7,6 @@ import Script from 'next/script';
 import PlausibleProvider from 'next-plausible';
 
 import {ThemeProvider} from 'sentry-docs/components/theme-provider';
-import ParamFerry from 'sentry-docs/components/paramFerry';
 
 const rubik = Rubik({
   weight: ['400', '500', '700'],
@@ -45,7 +44,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
         >
           <Theme accentColor="iris" grayColor="sand" radius="large" scaling="95%">
             {children}
-            <ParamFerry />
           </Theme>
         </ThemeProvider>
         <Script

src/components/paramFerry.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import Link from 'next/link';
+import {ferryUrlParams} from 'sentry-docs/utils';
+
+interface ParamFerryLinkProps {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  target?: string;
+  title?: string;
+  [key: string]: any;
+}
+
+/**
+ * A Link component that automatically ferries URL parameters
+ * This is a safer alternative to DOM manipulation
+ */
+export function ParamFerryLink({href, children, ...props}: ParamFerryLinkProps) {
+  // Only ferry parameters for internal links
+  const shouldFerry = href && (href.startsWith('/') || href.startsWith('#'));
+  const finalHref = shouldFerry ? ferryUrlParams(href) : href;
+
+  return (
+    <Link href={finalHref} {...props}>
+      {children}
+    </Link>
+  );
+}
+
+export default ParamFerryLink;

src/components/paramFerryLink.tsx

@@ -91,28 +91,6 @@ export const marketingUrlParams = (): URLQueryObject => {
   return marketingParams;
 };
 
-/**
- * Validate URL is safe to process (blocks dangerous schemes)
- * @param url - The URL to validate
- * @returns true if URL is safe, false otherwise
- */
-const isSafeUrl = (url: string): boolean => {
-  // Block dangerous schemes
-  const dangerousSchemes = ['javascript:', 'data:', 'vbscript:', 'file:', 'about:'];
-  const lowerUrl = url.toLowerCase().trim();
-  
-  if (dangerousSchemes.some(scheme => lowerUrl.startsWith(scheme))) {
-    return false;
-  }
-  
-  // Only allow http, https, and relative URLs
-  if (lowerUrl.startsWith('http://') || lowerUrl.startsWith('https://') || lowerUrl.startsWith('/') || !lowerUrl.includes(':')) {
-    return true;
-  }
-  
-  return false;
-};
-
 /**
  * Ferry URL parameters from current page to target URL
  * @param targetUrl - The URL to append parameters to
@@ -124,8 +102,8 @@ export const ferryUrlParams = (targetUrl: string, additionalParams: URLQueryObje
     return targetUrl;
   }
 
-  // Validate URL safety first
-  if (!isSafeUrl(targetUrl)) {
+  // Only process relative URLs and same-origin URLs for security
+  if (targetUrl.includes('://') && !targetUrl.startsWith(window.location.origin)) {
     return targetUrl;
   }
 
@@ -139,32 +117,19 @@ export const ferryUrlParams = (targetUrl: string, additionalParams: URLQueryObje
   try {
     const url = new URL(targetUrl, window.location.origin);
 
-    // Double-check the constructed URL is safe
-    if (!isSafeUrl(url.toString())) {
+    // Only add parameters to same-origin URLs
+    if (url.origin !== window.location.origin) {
       return targetUrl;
     }
 
-    // Add parameters to the URL with validation
+    // Add parameters to the URL
     Object.entries(allParams).forEach(([key, value]) => {
-      if (value && typeof value === 'string') {
-        // Sanitize parameter key and value
-        const sanitizedKey = key.replace(/[^\w\-._~]/g, '');
-        const sanitizedValue = value.replace(/[\r\n\t]/g, '').substring(0, 500); // Limit length and remove control characters
-        
-        if (sanitizedKey && sanitizedValue) {
-          url.searchParams.set(sanitizedKey, sanitizedValue);
-        }
+      if (value && typeof value === 'string' && key && value.length < 200) {
+        url.searchParams.set(key, value);
       }
     });
 
-    const result = url.toString();
-    
-    // Final safety check
-    if (!isSafeUrl(result)) {
-      return targetUrl;
-    }
-
-    return result;
+    return url.toString();
   } catch (error) {
     console.warn('Error ferrying parameters:', error);
     return targetUrl;