fix: Disallow images and icons in footers (#2676)

Disallow images and icons in buttons that are present in the footer of a confirmation. --------- Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com> Co-authored-by: Maarten Zuidhoorn <maarten@zuidhoorn.com>
MetaMask · Aug 29, 2024 · f9dd736 · f9dd736
1 parent 51c1db1
commit f9dd736
Show file tree

Hide file tree

Showing 31 changed files with 79 additions and 31 deletions.
diff --git a/packages/examples/packages/bip32/snap.manifest.json b/packages/examples/packages/bip32/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "JOwxvU/zickgUrCb6Vsa03osvS8h8Or0ssN5WAEYqgQ=",
+    "shasum": "GbmehTlU9X4g3UMU45wYvXmrBOYvw7ZasSLqv+53Nns=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/bip44/snap.manifest.json b/packages/examples/packages/bip44/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "sY6KE/5G0d6g8v9+saFlVfjJB+r6kg+f4jySqEqj0zA=",
+    "shasum": "HmWhgl33p7o+8CG/3ruAyD/WV2StJeAbCRHOTP8uWBM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "zeHY6l18y/lxNkWb5Layo4y2KbJ5ZRaDOz8PoP6AUUM=",
+    "shasum": "ZSJcR5i7BnqYGVgYgiymAsGA6yFACB8v6MUET5s2Lqs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "92cIjIH4LfT5grYiEa+/6nOuUkJU3SR4qUTfUnQ7nKA=",
+    "shasum": "PL155AJO6V96BkeWIhXoTj2GQ2XyEP0ztvxG/0KN+78=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/client-status/snap.manifest.json b/packages/examples/packages/client-status/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "LIEfTJkmBerzzNgD7VVfFzhxjjunEc4l6EKz9cxvzuo=",
+    "shasum": "RyfP3PohgYvw/TCoBI/lJ5mdKXqho4LqYzabLf6R+AM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/cronjobs/snap.manifest.json b/packages/examples/packages/cronjobs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jBSm0Pd1EcloSf/lr+K64/a/TPN7oI6+49et6cJXFJI=",
+    "shasum": "ZaOHlT36JUnF25cMzfyyiBIjqYSTdUNVC+5mgoPwCgA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/dialogs/snap.manifest.json b/packages/examples/packages/dialogs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "z7HF9NygYAgyVReMBWQiPG5akcFLFcIDbiJIp5RKjpk=",
+    "shasum": "As3ssI9Gu5PU32xKAOD9ZoWhkBvbf5P6Et6DXKMkLkA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethereum-provider/snap.manifest.json b/packages/examples/packages/ethereum-provider/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "MQnui43vhpY3B+dRXqWSss/c6fgxiAKn49ubcricdZ4=",
+    "shasum": "7PIS0vGwKMrlfHYSQHhtL/J0KXgb5qhnGr7QsHcmKvY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethers-js/snap.manifest.json b/packages/examples/packages/ethers-js/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "WXXLk/VebRcuzw6MmNYKipycvgucYk8Ue7ouWTzSWnE=",
+    "shasum": "bbwNk/q9g+Z+whJJXWfczhoFDFLrNAffkde0GMwF6JY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/file-upload/snap.manifest.json b/packages/examples/packages/file-upload/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "kwXrElRAEQp7uAYR3FiLcTL6cFgDouSz+7mFeapPNvM=",
+    "shasum": "91aBAN3+hhOLmWAePb2NmLLRDQC1Ur59umbfIDua9xM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-entropy/snap.manifest.json b/packages/examples/packages/get-entropy/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "TqW6Vqbg+AnLOtcUO/CYrOkmEiblLAfA0tQgGB1GBas=",
+    "shasum": "q6RDjjj6/fg5cZNC+G/OLiXKU9sMLFElSfjBorMOisA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-file/snap.manifest.json b/packages/examples/packages/get-file/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "l2wz+7FX6NJlQzn5FTRnGWbjcKWHYz7bHZlhT/aDy/U=",
+    "shasum": "Co3rcGN/ARi0bGtmYjPIE11CCVcba3XxgPhJTTFiPGQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/home-page/snap.manifest.json b/packages/examples/packages/home-page/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Z68vDlz95cA8kLP1RLS4kVri20UGqg46iwYWEMx0iwg=",
+    "shasum": "7ll/TIMYZbTMRP3tAQ6BHhmJ+R7BaJxxpOrtkKstsiI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/images/snap.manifest.json b/packages/examples/packages/images/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Fj92CH4apRpr5Ov1cS64QKZKx473XCcaAlGeQom2r8c=",
+    "shasum": "EezGMG87ArZdCX1nbFCfjvHE55Xu0ZVkrKekJwkuwO8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/interactive-ui/snap.manifest.json b/packages/examples/packages/interactive-ui/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ZjuGd/nFHLF5iAzqOC07a4n2e1lj7c5YDlLf1xTBXiM=",
+    "shasum": "o/X/c8mP0nNKvKydaXjc7W9y+uKv/kh1Vw6/+tLngUM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "waQIHo3IV3Is3QwzZTlY2+HJawI/FIbOpIZpYTbYvcw=",
+    "shasum": "Ij3KlRc15ny+LSL52jH7KIeJePg+axhilW2NPX20JrY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "8pktGn0Ft/wATrNFg8IVH85DvmMO6fuU/6EQg5s+Aio=",
+    "shasum": "rInwrjNmBYR4bxgfTP0f+p//FlbiyQMxEQl80yr5kpM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/json-rpc/snap.manifest.json b/packages/examples/packages/json-rpc/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "7hkIg1lbb5FHNDPBgEwwlpUmyPaYl1XkUASXJ7xCOCo=",
+    "shasum": "njyJHrr7HWT/KToiFrf7LfBywSGkumOb8kplU3T3gjU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/jsx/snap.manifest.json b/packages/examples/packages/jsx/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "GsfsvX0Rtni/n0O5cBV2lHiB4NKcew1jqJUgwOdJPr4=",
+    "shasum": "XPvN5/oviIhUNVxED2eq5OZeeUmiGvj4KCnfAD4ucY4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/lifecycle-hooks/snap.manifest.json b/packages/examples/packages/lifecycle-hooks/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "6n5QAtB6dz2x4AcuayWf0EAbRUCXjaeMsD0JKOJ5KOo=",
+    "shasum": "vgw0c/jJAWmXDi6QSLoIJJLcEthYYXKPw3JuyMmoM9s=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/localization/snap.manifest.json b/packages/examples/packages/localization/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "h1wTfQqs+0KKrXzWCNGjf7/4Ocd6Uit49pZspWTt5Ys=",
+    "shasum": "1yd8MCzzaBIdolBYlB0bxTDFNJ2dmu39OAofLAs3/Ms=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/manage-state/snap.manifest.json b/packages/examples/packages/manage-state/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "zo2YoNg+9LOJyQ3pIl0c7N9UURcdJ4KYEM2a09v4lu0=",
+    "shasum": "mIpKNjFiKI5GTdxCj/tZ9PbQdrYvkcMGDTErr7zY2bE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/network-access/snap.manifest.json b/packages/examples/packages/network-access/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "nLLIiMjtrVekCZ07IJUm5esGuBOZ64M2ZaNnyLtoWR0=",
+    "shasum": "hrqp7wKbKBeSSzNBXUFUm5U8mlYaeJ25kyDugU/2TrE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/notifications/snap.manifest.json b/packages/examples/packages/notifications/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "8QtkpiMxeIxiEEqorF1ZniCwIYImx+eer4rnA17ytG4=",
+    "shasum": "ZD5nXqrLM0fClCnGzK6puk6xcj+yCmgbpVvUvrf/flg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/rollup-plugin/snap.manifest.json b/packages/examples/packages/rollup-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "MNgIiJCENwqwiLtGr1olZRi2R/NdNRjdi1i60z5I718=",
+    "shasum": "bPnowt8txdXEwavxyPu3cNhXoaBmUCLRfytydykKBtU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/signature-insights/snap.manifest.json b/packages/examples/packages/signature-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "N0qkFYPSKpTCVzI6rZ+m4sMSq8pJP1bS8EkCQgirdas=",
+    "shasum": "aQht2hbGMgHtM7lfttXpz/NB1S8SwT4XR1QCxeil/dc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/transaction-insights/snap.manifest.json b/packages/examples/packages/transaction-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "6qpXWnnjXRJb1iMxJ+zSAk0K57vwB/MISvXHBc6vwT4=",
+    "shasum": "XKcopHy8xRx1KB6TytMei9JnZBMwiAYJvJ7MaOoI9Ao=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/wasm/snap.manifest.json b/packages/examples/packages/wasm/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "JMSRZlFEnhZl3VfvQLDEIFDVklKfsUygtH4urJWU6Uc=",
+    "shasum": "Y4EtmsCTVbz/KEg2OcOs3+UjZjkhGB0Wj1RI5Cs1kf0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/webpack-plugin/snap.manifest.json b/packages/examples/packages/webpack-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "CgeYAVUiVlBrxly2CUuvQm7QRvVoPlxS7EGRNulVmVs=",
+    "shasum": "2HG18Yu1w6v8lYput/lARDMpKZe7lF6O868gqjAGSFw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -518,6 +518,9 @@ describe('FooterStruct', () => {
       <Button name="cancel">Cancel</Button>
       <Button name="confirm">Confirm</Button>
     </Footer>,
+    <Footer>
+      <Button name="cancel">Cancel {true && 'foo'}</Button>
+    </Footer>,
   ])('validates a footer element', (value) => {
     expect(is(value, FooterStruct)).toBe(true);
   });
@@ -541,6 +544,25 @@ describe('FooterStruct', () => {
     <Row label="label">
       <Image src="<svg />" alt="alt" />
     </Row>,
+    <Footer>
+      <Button name="confirm">
+        <Icon name="warning" />
+      </Button>
+    </Footer>,
+    <Footer>
+      <Button name="cancel">
+        <Image src="<svg />" />
+      </Button>
+      <Button name="confirm">
+        <Image src="<svg />" />
+      </Button>
+    </Footer>,
+    <Footer>
+      <Button name="confirm">
+        <Icon name="warning" />
+        <Icon name="warning" />
+      </Button>
+    </Footer>,
   ])('does not validate "%p"', (value) => {
     expect(is(value, FooterStruct)).toBe(false);
   });

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -17,6 +17,7 @@ import {
   record,
   string,
   tuple,
+  refine,
 } from '@metamask/superstruct';
 import {
   hasProperty,
@@ -412,6 +413,31 @@ export const BoxStruct: Describe<BoxElement> = element('Box', {
   ),
 });
 
+const FooterButtonStruct = refine(ButtonStruct, 'FooterButton', (value) => {
+  if (
+    typeof value.props.children === 'string' ||
+    typeof value.props.children === 'boolean' ||
+    value.props.children === null
+  ) {
+    return true;
+  }
+
+  if (Array.isArray(value.props.children)) {
+    const hasNonTextElements = value.props.children.some(
+      (child) =>
+        typeof child !== 'string' &&
+        typeof child !== 'boolean' &&
+        child !== null,
+    );
+
+    if (!hasNonTextElements) {
+      return true;
+    }
+  }
+
+  return 'Footer buttons may only contain text.';
+});
+
 /**
  * A struct for the {@link SectionElement} type.
  */
@@ -434,8 +460,8 @@ export const SectionStruct: Describe<SectionElement> = element('Section', {
  * This set should include a single button or a tuple of two buttons.
  */
 export const FooterChildStruct = nullUnion([
-  tuple([ButtonStruct, ButtonStruct]),
-  ButtonStruct,
+  tuple([FooterButtonStruct, FooterButtonStruct]),
+  FooterButtonStruct,
 ]);
 
 /**