Add test and fix some linting issues

Author: FrederikBolding

packages/snaps-controllers/src/interface/SnapInterfaceController.test.tsx

@@ -524,6 +524,39 @@ describe('SnapInterfaceController', () => {
       ).toThrow('A Snap interface context may not be larger than 5 MB');
     });
 
+    it('throws if the Snap attempts to use external images without permission', async () => {
+      const rootMessenger = getRootSnapInterfaceControllerMessenger();
+      const controllerMessenger =
+        getRestrictedSnapInterfaceControllerMessenger(rootMessenger);
+
+      rootMessenger.registerActionHandler(
+        'PermissionController:hasPermission',
+        () => false,
+      );
+
+      // eslint-disable-next-line no-new
+      new SnapInterfaceController({
+        messenger: controllerMessenger,
+      });
+
+      const element = (
+        <Box>
+          <Image src="https://metamask.io/foo.png" />
+        </Box>
+      );
+
+      expect(() =>
+        rootMessenger.call(
+          'SnapInterfaceController:createInterface',
+          MOCK_SNAP_ID,
+          element,
+          {},
+        ),
+      ).toThrow(
+        'Using external images is only permitted with the network access endowment',
+      );
+    });
+
     it('throws if a link is on the phishing list', async () => {
       const rootMessenger = getRootSnapInterfaceControllerMessenger();
       const controllerMessenger = getRestrictedSnapInterfaceControllerMessenger(

packages/snaps-controllers/src/interface/SnapInterfaceController.ts

@@ -8,6 +8,7 @@ import type {
 } from '@metamask/base-controller';
 import { BaseController } from '@metamask/base-controller';
 import type { Messenger } from '@metamask/messenger';
+import type { HasPermission } from '@metamask/permission-controller';
 import type { TestOrigin } from '@metamask/phishing-controller';
 import type {
   InterfaceState,
@@ -41,7 +42,6 @@ import {
   validateInterfaceContext,
 } from './utils';
 import type { GetSnap } from '../snaps';
-import { HasPermission } from '@metamask/permission-controller';
 
 const MAX_UI_CONTENT_SIZE = 10_000_000; // 10 mb
 

packages/snaps-controllers/src/test-utils/controller.tsx

@@ -768,6 +768,7 @@ export const getRestrictedSnapInterfaceControllerMessenger = (
       'SnapController:get',
       'AccountsController:getSelectedMultichainAccount',
       'AccountsController:listMultichainAccounts',
+      'PermissionController:hasPermission',
     ],
     events: ['NotificationServicesController:notificationsListUpdated'],
     messenger: snapInterfaceControllerMessenger,

packages/snaps-utils/src/ui.tsx

@@ -3,7 +3,6 @@ import { NodeType } from '@metamask/snaps-sdk';
 import type {
   BoldChildren,
   GenericSnapElement,
-  ImageElement,
   ItalicChildren,
   JSXElement,
   LinkElement,
@@ -42,8 +41,8 @@ import type { Token, Tokens } from 'marked';
 
 import type { InternalAccount } from './account';
 import type { Snap } from './snaps';
-import { parseMetaMaskUrl } from './url';
 import { isValidUrl } from './types';
+import { parseMetaMaskUrl } from './url';
 
 const MAX_TEXT_LENGTH = 50_000; // 50 kb
 const ALLOWED_PROTOCOLS = ['https:', 'mailto:', 'metamask:'];
@@ -467,7 +466,7 @@ export function validateJsxElements(
         );
         break;
       case 'Image': {
-        const { src } = (childNode as ImageElement).props;
+        const { src } = childNode.props;
         const isUrl = isValidUrl(src);
         assert(
           !isUrl || (isUrl && hasPermission('endowment:network-access')),