From 1202a5d0c6290c823b2cc55baec5327b8d0f7892 Mon Sep 17 00:00:00 2001
From: rajk93 <raj@blockdeep.io>
Date: Thu, 26 Jun 2025 22:24:01 +0530
Subject: [PATCH] Fixed missing checkmark for connected accounts (website
 access) (#1567)

* fix: missing checkmark for connected accounts

* fix: lint

* chore: sanitize raw ip while considering localhost urls/ip

* fix: connect accounts for authorization
---
 .../Popup/AuthManagement/AccountManagement.tsx  | 17 +++++++++--------
 .../src/Popup/AuthManagement/WebsiteEntry.tsx   |  2 +-
 packages/extension-ui/src/partials/Header.tsx   |  2 +-
 .../extension-ui/src/util/sanitizeOrigin.ts     | 12 +++++++++---
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx b/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx
index 136cdd26..2b09d77e 100644
--- a/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx
+++ b/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx
@@ -16,6 +16,7 @@ interface Props {
 
 function AccountManagement ({ className }: Props): React.ReactElement<Props> {
   const { url } = useParams<{url: string}>();
+  const decodedUrl = decodeURIComponent(url);
   const { selectedAccounts = [], setSelectedAccounts } = useContext(AccountContext);
   const { t } = useTranslation();
   const onAction = useContext(ActionContext);
@@ -23,22 +24,22 @@ function AccountManagement ({ className }: Props): React.ReactElement<Props> {
   useEffect(() => {
     getAuthList()
       .then(({ list }) => {
-        if (!list[url]) {
+        if (!list[decodedUrl]) {
           return;
         }
 
-        setSelectedAccounts && setSelectedAccounts(list[url].authorizedAccounts);
+        setSelectedAccounts && setSelectedAccounts(list[decodedUrl].authorizedAccounts);
       })
       .catch(console.error);
-  }, [setSelectedAccounts, url]);
+  }, [setSelectedAccounts, decodedUrl]);
 
   const _onApprove = useCallback(
     (): void => {
-      updateAuthorization(selectedAccounts, url)
+      updateAuthorization(selectedAccounts, decodedUrl)
         .then(() => onAction('../index.js'))
         .catch(console.error);
     },
-    [onAction, selectedAccounts, url]
+    [onAction, selectedAccounts, decodedUrl]
   );
 
   return (
@@ -46,13 +47,13 @@ function AccountManagement ({ className }: Props): React.ReactElement<Props> {
       <Header
         showBackArrow
         smallMargin={true}
-        text={t('Accounts connected to {{url}}', { replace: { url } })}
+        text={t('Accounts connected to {{url}}', { replace: { url: decodedUrl } })}
       />
       <div className='content'>
         <AccountSelection
-          origin={url}
+          origin={decodedUrl}
           showHidden={true}
-          url={url}
+          url={decodedUrl}
           withWarning={false}
         />
         <div className='footer'>
diff --git a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx
index 23348a76..5a9c0fb6 100644
--- a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx
+++ b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx
@@ -33,7 +33,7 @@ function WebsiteEntry ({ className = '', info: { authorizedAccounts, isAllowed }
       </div>
       <Link
         className='connectedAccounts'
-        to={`/url/manage/${url}`}
+        to={`/url/manage/${encodeURIComponent(url)}`}
       >{
           authorizedAccounts?.length
             ? t('{{total}} accounts', {
diff --git a/packages/extension-ui/src/partials/Header.tsx b/packages/extension-ui/src/partials/Header.tsx
index a99f54ab..bacece6a 100644
--- a/packages/extension-ui/src/partials/Header.tsx
+++ b/packages/extension-ui/src/partials/Header.tsx
@@ -121,7 +121,7 @@ function Header ({ children, className = '', onFilter, showAdd, showBackArrow, s
               <div className='connectedAccountsWrapper'>
                 <Link
                   className='connectedAccounts'
-                  to={connectedTabsUrl.length === 1 ? `/url/manage/${connectedTabsUrl[0]}` : '/auth-list'}
+                  to={connectedTabsUrl.length === 1 ? `/url/manage/${encodeURIComponent(connectedTabsUrl[0])}` : '/auth-list'}
                 >
                   <span className='greenDot'>•</span>Connect Accounts
                 </Link>
diff --git a/packages/extension-ui/src/util/sanitizeOrigin.ts b/packages/extension-ui/src/util/sanitizeOrigin.ts
index 56e8d62f..0d00cce9 100644
--- a/packages/extension-ui/src/util/sanitizeOrigin.ts
+++ b/packages/extension-ui/src/util/sanitizeOrigin.ts
@@ -46,12 +46,18 @@ export const sanitizeOrigin = (origin: string): string => {
 export const validateOrigin = (origin: string): boolean => {
   const sanitized = sanitizeOrigin(origin);
 
+  // Special case: always allow localhost URLs
+  if (/^https?:\/\/(?:localhost|127\.0\.0\.1|0\.0\.0\.0|::1)(?::\d+)?(?:\/|$)/.test(sanitized)) {
+    return true;
+  }
+
   // Check for suspicious patterns
   const suspiciousPatterns = [
-    /https?:\/\//i, // URLs in origin name
-    /[<>]/, // Remaining HTML characters
+    /[<>]/, // HTML characters
     /^\s*$/, // Empty or whitespace only
-    /.{50,}/ // Extremely long names
+    /.{50,}/, // Extremely long names
+    /^(?!https?:\/\/).*:\/\//, // Any protocol other than http/https
+    /^https?:\/\/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}(?::\d+)?(?:\/|$)/ // Raw IP addresses (except localhost)
   ];
 
   return !suspiciousPatterns.some((pattern) => pattern.test(sanitized));