fix: TokenIcon runtime type enforcement (#155)

* fix: TokenIcon runtime type enforcement

Author: mj-kiwi

packages/gator-permissions-snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snap-7715-permissions.git"
   },
   "source": {
-    "shasum": "DK0xWacmpY2VdHt48Tn5iw8Rpivla7dufa88PvDvPCw=",
+    "shasum": "VduGx+y+jERmJB9UXFPLYo4xfSv4HDOCX9091+ueuqU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/gator-permissions-snap/src/ui/components/TokenIcon.tsx

@@ -1,5 +1,10 @@
+import {
+  extractZodError,
+  logger,
+} from '@metamask/7715-permissions-shared/utils';
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import { Image, Text } from '@metamask/snaps-sdk/jsx';
+import { z } from 'zod';
 
 export type TokenIconParams = {
   imageDataBase64: string | null;
@@ -8,17 +13,39 @@ export type TokenIconParams = {
   height?: number;
 };
 
-export const TokenIcon: SnapComponent<TokenIconParams> = ({
-  imageDataBase64,
-  altText,
-  width = 24,
-  height = 24,
-}) => {
-  if (!imageDataBase64) {
+const MAX_ICON_SIZE = 512;
+
+// zod schema for runtime validation
+const TokenIconParamsSchema = z.object({
+  imageDataBase64: z
+    .string()
+    .regex(
+      /^data:image\/png;base64,[A-Za-z0-9+/=]+$/u,
+      'Must be a valid PNG base64 data URI',
+    ),
+  altText: z.string().default(''),
+  width: z.number().int().positive().max(MAX_ICON_SIZE).default(24),
+  height: z.number().int().positive().max(MAX_ICON_SIZE).default(24),
+});
+
+export const TokenIcon: SnapComponent<TokenIconParams> = (props) => {
+  if (!props.imageDataBase64) {
     return <Text> </Text>;
   }
 
-  const imageSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  const parseResult = TokenIconParamsSchema.safeParse(props);
+
+  if (!parseResult.success) {
+    logger.warn(
+      'TokenIcon: Invalid parameters',
+      extractZodError(parseResult.error.errors),
+    );
+    return <Text> </Text>;
+  }
+
+  const { imageDataBase64, altText, width, height } = parseResult.data;
+
+  const imageSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
     <image href="${imageDataBase64}" width="${width}" height="${height}" />
   </svg>`;
 

packages/gator-permissions-snap/test/ui/components/TokenIcon.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it, jest } from '@jest/globals';
+
+import { TokenIcon } from '../../../src/ui/components/TokenIcon';
+
+// Mock the logger and extractZodError utilities
+jest.mock('@metamask/7715-permissions-shared/utils', () => ({
+  logger: {
+    warn: jest.fn(),
+  },
+  extractZodError: jest.fn((errors) => errors),
+}));
+
+describe('TokenIcon', () => {
+  const validBase64Image =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';
+
+  it('should return empty Text when imageDataBase64 is null', () => {
+    const result = TokenIcon({
+      imageDataBase64: null,
+      altText: 'Test Alt Text',
+    });
+
+    expect(result).toStrictEqual(
+      expect.objectContaining({
+        type: 'Text',
+        props: { children: ' ' },
+      }),
+    );
+  });
+
+  it('should render Image with valid base64 PNG data URI', () => {
+    const result = TokenIcon({
+      imageDataBase64: validBase64Image,
+      altText: 'Test PNG',
+    });
+
+    const expectedSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <image href="${validBase64Image}" width="24" height="24" />
+  </svg>`;
+
+    expect(result).toStrictEqual(
+      expect.objectContaining({
+        type: 'Image',
+        props: { src: expectedSvg, alt: 'Test PNG' },
+      }),
+    );
+  });
+
+  it('should use custom width and height when provided', () => {
+    const result = TokenIcon({
+      imageDataBase64: validBase64Image,
+      altText: 'Custom Size',
+      width: 48,
+      height: 48,
+    });
+
+    const expectedSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <image href="${validBase64Image}" width="48" height="48" />
+  </svg>`;
+
+    expect(result).toStrictEqual(
+      expect.objectContaining({
+        type: 'Image',
+        props: { src: expectedSvg, alt: 'Custom Size' },
+      }),
+    );
+  });
+
+  it('should return empty Text for invalid data URI format', () => {
+    const result = TokenIcon({
+      imageDataBase64: 'invalid-data-uri',
+      altText: 'Invalid',
+    });
+
+    expect(result).toStrictEqual(
+      expect.objectContaining({
+        type: 'Text',
+        props: { children: ' ' },
+      }),
+    );
+  });
+
+  it('should return empty Text for non-PNG image types', () => {
+    const jpegImage =
+      'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8A8A';
+
+    const result = TokenIcon({
+      imageDataBase64: jpegImage,
+      altText: 'JPEG',
+    });
+
+    expect(result).toStrictEqual(
+      expect.objectContaining({
+        type: 'Text',
+        props: { children: ' ' },
+      }),
+    );
+  });
+
+  it('should return empty Text when dimensions exceed maximum', () => {
+    const result = TokenIcon({
+      imageDataBase64: validBase64Image,
+      altText: 'Too Large',
+      width: 1000,
+      height: 1000,
+    });
+
+    expect(result).toStrictEqual(
+      expect.objectContaining({
+        type: 'Text',
+        props: { children: ' ' },
+      }),
+    );
+  });
+});

packages/permissions-kernel-snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snap-7715-permissions.git"
   },
   "source": {
-    "shasum": "BbJKtMNO27QngXRYsexD21RKiiRxDrtS+/XoFXjBEjA=",
+    "shasum": "NScg2w2IdLkNq/HcCtnPtp/EFpn/QCTCfwgurVyI/kg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",