Fix runtime errors: wallet extension conflicts, null property access, and CSP violations

Copilot · 0xrinegade · Copilot · commit 52131dfc1504 · 2025-08-02T19:22:17.000Z
Co-authored-by: 0xrinegade &lt;101195284+0xrinegade@users.noreply.github.com&gt;
diff --git a/public/buffer-polyfill.js b/public/buffer-polyfill.js
@@ -183,6 +183,80 @@
       var global = window;
     }
     
+    // Add defensive handling for wallet extension conflicts
+    (function() {
+      try {
+        // Store reference to any existing ethereum provider
+        const existingEthereum = window.ethereum;
+        
+        // Add safe ethereum property handling to prevent conflicts
+        if (!window.ethereumHandlersInitialized) {
+          window.ethereumHandlersInitialized = true;
+          
+          // Create a non-conflicting ethereum property wrapper
+          Object.defineProperty(window, '_svmseekEthereumSafe', {
+            value: existingEthereum,
+            writable: false,
+            configurable: false
+          });
+          
+          // Override Object.defineProperty to handle ethereum property conflicts
+          const originalDefineProperty = Object.defineProperty;
+          Object.defineProperty = function(obj, prop, descriptor) {
+            if (obj === window && prop === 'ethereum') {
+              try {
+                // If ethereum already exists and is non-configurable, skip redefinition
+                const existingDescriptor = Object.getOwnPropertyDescriptor(window, 'ethereum');
+                if (existingDescriptor && !existingDescriptor.configurable) {
+                  console.warn('SVMSeek: Skipping ethereum property redefinition to prevent conflicts');
+                  return obj;
+                }
+                
+                // Allow the definition but catch any errors
+                return originalDefineProperty.call(this, obj, prop, descriptor);
+              } catch (error) {
+                console.warn('SVMSeek: Prevented ethereum property conflict:', error.message);
+                return obj;
+              }
+            }
+            return originalDefineProperty.call(this, obj, prop, descriptor);
+          };
+          
+          console.log('SVMSeek: Ethereum property conflict protection enabled');
+        }
+      } catch (error) {
+        console.warn('SVMSeek: Failed to setup ethereum conflict protection:', error);
+      }
+    })();
+    
+    // Add protection against custom element conflicts
+    (function() {
+      try {
+        if (!window.customElementConflictProtection) {
+          window.customElementConflictProtection = true;
+          
+          // Override customElements.define to prevent conflicts
+          const originalDefine = window.customElements.define;
+          window.customElements.define = function(name, constructor, options) {
+            try {
+              // Check if element is already defined
+              if (window.customElements.get(name)) {
+                console.warn('SVMSeek: Custom element already defined, skipping:', name);
+                return;
+              }
+              return originalDefine.call(this, name, constructor, options);
+            } catch (error) {
+              console.warn('SVMSeek: Custom element definition conflict prevented for:', name, error.message);
+            }
+          };
+          
+          console.log('SVMSeek: Custom element conflict protection enabled');
+        }
+      } catch (error) {
+        console.warn('SVMSeek: Failed to setup custom element protection:', error);
+      }
+    })();
+    
     // Add additional crypto polyfills that might be needed
     if (!window.crypto && !window.msCrypto) {
       console.warn('WebCrypto API not available');
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,22 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <!-- Enhanced Content Security Policy for better security and iframe compatibility -->
+    <meta http-equiv="Content-Security-Policy" content="
+      default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: https:;
+      script-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com https://fonts.gstatic.com https://www.googletagmanager.com https://cdn.jsdelivr.net;
+      style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://fonts.gstatic.com;
+      font-src 'self' data: https://fonts.googleapis.com https://fonts.gstatic.com;
+      img-src 'self' data: blob: https:;
+      connect-src 'self' https: wss: ws:;
+      frame-src 'self' https: blob: data:;
+      child-src 'self' https: blob: data:;
+      worker-src 'self' blob:;
+      media-src 'self' data: blob: https:;
+      object-src 'none';
+      base-uri 'self';
+      form-action 'self';
+    ">
     <meta
       name="description"
       content="Wallet™ with support for SPL tokens."
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,9 @@
 // CRITICAL: Import complete polyfills FIRST before any other modules
 import './polyfills/index.js';
 
+// Import global error handler early to catch initialization errors
+import './utils/globalErrorHandler';
+
 // Import React and other modules AFTER polyfills
 import React from 'react';
 import { createRoot } from 'react-dom/client';
diff --git a/src/services/WalletInjectionService.ts b/src/services/WalletInjectionService.ts
@@ -134,14 +134,30 @@ export class WalletInjectionService {
    */
   private setupMessageListener(): void {
     window.addEventListener('message', (event) => {
-      if (!this.iframe || event.source !== this.iframe.contentWindow) {
-        return;
-      }
+      try {
+        if (!this.iframe || event.source !== this.iframe.contentWindow) {
+          return;
+        }
 
-      const { type, id, method, params } = event.data;
-      
-      if (type === 'WALLET_REQUEST') {
-        this.handleWalletRequest(id, method, params);
+        // Safely check if event.data exists and has the expected structure
+        if (!event.data || typeof event.data !== 'object') {
+          logWarn('WalletInjectionService: Received invalid message data', event.data);
+          return;
+        }
+
+        const { type, id, method, params } = event.data;
+        
+        // Additional null/undefined checks
+        if (!type || typeof type !== 'string') {
+          logWarn('WalletInjectionService: Received message without valid type', event.data);
+          return;
+        }
+        
+        if (type === 'WALLET_REQUEST') {
+          this.handleWalletRequest(id, method, params);
+        }
+      } catch (error) {
+        logError('WalletInjectionService: Error processing message:', error, event.data);
       }
     });
   }
@@ -274,18 +290,34 @@ export class WalletInjectionService {
         
         // Handle responses from parent window
         window.addEventListener('message', (event) => {
-          if (event.source !== window.parent) return;
-          
-          const { type, id, result, error } = event.data;
-          
-          if (type === 'WALLET_RESPONSE' && pendingRequests.has(id)) {
-            const { resolve } = pendingRequests.get(id);
-            pendingRequests.delete(id);
-            resolve(result);
-          } else if (type === 'WALLET_ERROR' && pendingRequests.has(id)) {
-            const { reject } = pendingRequests.get(id);
-            pendingRequests.delete(id);
-            reject(new Error(error));
+          try {
+            if (event.source !== window.parent) return;
+            
+            // Safely check if event.data exists
+            if (!event.data || typeof event.data !== 'object') {
+              console.warn('SVMSeek: Received invalid message data in iframe', event.data);
+              return;
+            }
+            
+            const { type, id, result, error } = event.data;
+            
+            // Check if type is valid
+            if (!type || typeof type !== 'string') {
+              console.warn('SVMSeek: Received message without valid type in iframe', event.data);
+              return;
+            }
+            
+            if (type === 'WALLET_RESPONSE' && id && pendingRequests.has(id)) {
+              const { resolve } = pendingRequests.get(id);
+              pendingRequests.delete(id);
+              resolve(result);
+            } else if (type === 'WALLET_ERROR' && id && pendingRequests.has(id)) {
+              const { reject } = pendingRequests.get(id);
+              pendingRequests.delete(id);
+              reject(new Error(error || 'Unknown wallet error'));
+            }
+          } catch (err) {
+            console.error('SVMSeek: Error processing message in iframe:', err, event.data);
           }
         });
         
diff --git a/src/utils/globalErrorHandler.ts b/src/utils/globalErrorHandler.ts
