From acf01304678e3a7c8cf405ec3d8787e714b117ce Mon Sep 17 00:00:00 2001
From: plebeius <tom@plebbit.com>
Date: Fri, 3 Oct 2025 18:08:08 +0200
Subject: [PATCH] fix(challenge-modal): tighten iframe handling, fix styling

---
 .../challenge-modal.module.css                |  6 ++--
 .../challenge-modal/challenge-modal.tsx       | 35 +++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/challenge-modal/challenge-modal.module.css b/src/components/challenge-modal/challenge-modal.module.css
index 2ca8d6bd..f8067636 100644
--- a/src/components/challenge-modal/challenge-modal.module.css
+++ b/src/components/challenge-modal/challenge-modal.module.css
@@ -8,7 +8,7 @@
 }
 
 .container {
-  width: 400px;
+  width: min(90vw, 560px);
   max-height: 90vh;
   color: var(--text);
   font-size: large;
@@ -121,7 +121,7 @@
   width: 100%;
   height: 100%;
   border: 1px solid var(--border-text);
-  background-color: white;
+  background-color: var(--background, transparent);
 }
 
 .iframeFooter {
@@ -137,5 +137,5 @@
 }
 
 .iframeCloseButton {
-  align-self: flex-end;
+  align-self: flex-start;
 }
\ No newline at end of file
diff --git a/src/components/challenge-modal/challenge-modal.tsx b/src/components/challenge-modal/challenge-modal.tsx
index e6970101..b773ba9d 100644
--- a/src/components/challenge-modal/challenge-modal.tsx
+++ b/src/components/challenge-modal/challenge-modal.tsx
@@ -176,24 +176,37 @@ const IframeChallengeContent = ({ iframeUrl, publication, closeModal }: IframeCh
   }, [closeModal]);
 
   const handleLoadIframe = () => {
-    const userAddress = account?.author?.address || '';
-    const encodedAddress = encodeURIComponent(userAddress);
+    const rawUserAddress = account?.author?.address?.trim();
+    const requiresUserAddress = iframeUrl.includes('{userAddress}');
 
-    let processedUrl = iframeUrl;
-
-    if (iframeUrl.includes('{userAddress}')) {
-      processedUrl = userAddress ? iframeUrl.replace(/\{userAddress\}/g, encodedAddress) : iframeUrl.replace(/\{userAddress\}/g, '');
+    if (requiresUserAddress && !rawUserAddress) {
+      alert(
+        t('iframe_challenge_missing_user_address', {
+          defaultValue: 'Error: Unable to load challenge without your address. Please sign in and try again.',
+        }),
+      );
+      return;
     }
 
-    processedUrl += processedUrl.includes('?') ? `&theme=${theme}` : `?theme=${theme}`;
+    const encodedAddress = rawUserAddress ? encodeURIComponent(rawUserAddress) : undefined;
+    const replacedUrl = requiresUserAddress && encodedAddress ? iframeUrl.replace(/\{userAddress\}/g, encodedAddress) : iframeUrl;
 
     try {
-      const validatedUrl = new URL(processedUrl);
-      setIframeUrl(validatedUrl.toString());
+      const validatedUrl = new URL(replacedUrl);
+
+      if (validatedUrl.protocol !== 'https:') {
+        throw new Error('Only HTTPS iframe challenges are supported');
+      }
+
+      validatedUrl.pathname = validatedUrl.pathname.replace(/\/{2,}/g, '/');
+      validatedUrl.searchParams.set('theme', theme);
+
+      const finalUrl = validatedUrl.toString();
+      setIframeUrl(finalUrl);
       setIframeOrigin(validatedUrl.origin);
       setShowConfirmation(false);
     } catch (error) {
-      console.error('Invalid URL constructed for iframe:', processedUrl, error);
+      console.error('Invalid URL constructed for iframe:', replacedUrl, error);
       alert('Error: Invalid URL for authentication challenge');
       closeModal();
     }
@@ -263,7 +276,7 @@ const IframeChallengeContent = ({ iframeUrl, publication, closeModal }: IframeCh
             <iframe
               ref={iframeRef}
               src={iframeUrlState}
-              sandbox='allow-scripts allow-forms allow-same-origin allow-popups allow-top-navigation-by-user-activation'
+              sandbox='allow-scripts allow-forms allow-popups allow-top-navigation-by-user-activation'
               onLoad={handleIframeLoad}
               className={styles.iframe}
               title={t('challenge_iframe', { defaultValue: 'Challenge authentication' })}