Implement Base64 encoding for URL parameters with backward compatibility

Co-authored-by: sensslen <3428860+sensslen@users.noreply.github.com>

Author: Copilot

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
 
 # Editor directories and files
 .vscode/*

src/App.tsx

@@ -4,6 +4,7 @@ import i18n from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 import localizationsEn from '../locales/en.json';
 import localizationsDe from '../locales/de.json';
+import { encodeUrlToBase64, decodeBase64ToUrl } from './utils/urlEncoding';
 
 i18n.use(initReactI18next).init({
   resources: {
@@ -21,24 +22,43 @@ i18n.use(initReactI18next).init({
 });
 
 const App: React.FC = () => {
-  const [url, setUrl] = useState<string>('');
+  // Initialize URL from query parameter at component creation
+  const getInitialUrl = () => {
+    const params = new URLSearchParams(window.location.search);
+    const urlParam = params.get('url');
+    if (urlParam) {
+      try {
+        // Try to decode as Base64 first (new format)
+        return decodeBase64ToUrl(urlParam);
+      } catch {
+        // Fallback to decodeURIComponent for backward compatibility
+        try {
+          return decodeURIComponent(urlParam);
+        } catch {
+          console.warn('Failed to decode URL parameter');
+          return '';
+        }
+      }
+    }
+    return '';
+  };
+
+  const [url, setUrl] = useState<string>(getInitialUrl);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
   const { t } = useTranslation();
 
   const handleUrlChange = (newUrl: string) => {
     setUrl(newUrl);
     // Update the URL in the address bar without reloading
-    window.history.pushState(null, '', `?url=${encodeURIComponent(newUrl)}`);
-  };
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const initialUrl = params.get('url');
-    if (initialUrl) {
-      setUrl(decodeURIComponent(initialUrl));
+    // Encode the URL in Base64 for better security and readability
+    if (newUrl) {
+      const encodedUrl = encodeUrlToBase64(newUrl);
+      window.history.pushState(null, '', `?url=${encodedUrl}`);
+    } else {
+      window.history.pushState(null, '', window.location.pathname);
     }
-  }, []);
+  };
 
   useEffect(() => {
     const lng = navigator.language;

src/api/proPresenter.ts

@@ -6,7 +6,7 @@ import { Message, TriggerPayload } from '../types/proPresenter';
       // Use URL constructor for basic format validation
       new URL(inputUrl);
       return true;
-    } catch (e) {
+    } catch {
       return false;
     }
   };

src/utils/urlEncoding.ts

@@ -0,0 +1,34 @@
+/**
+ * Encodes a URL string to Base64 format for safe URL parameter usage
+ * @param url - The URL string to encode
+ * @returns Base64 encoded string
+ */
+export const encodeUrlToBase64 = (url: string): string => {
+  try {
+    // Use btoa for browser-compatible Base64 encoding
+    // First encode to handle UTF-8 characters properly
+    const utf8Bytes = new TextEncoder().encode(url);
+    const binaryString = Array.from(utf8Bytes, byte => String.fromCharCode(byte)).join('');
+    return btoa(binaryString);
+  } catch (error) {
+    console.error('Error encoding URL to Base64:', error);
+    throw new Error('Failed to encode URL to Base64');
+  }
+};
+
+/**
+ * Decodes a Base64 encoded URL string
+ * @param encodedUrl - The Base64 encoded URL string
+ * @returns Decoded URL string
+ */
+export const decodeBase64ToUrl = (encodedUrl: string): string => {
+  try {
+    // Use atob for browser-compatible Base64 decoding
+    const binaryString = atob(encodedUrl);
+    const bytes = Uint8Array.from(binaryString, char => char.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+  } catch (error) {
+    console.error('Error decoding Base64 to URL:', error);
+    throw new Error('Failed to decode Base64 to URL');
+  }
+};