Add permission check

Author: FrederikBolding

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

@@ -41,6 +41,7 @@ 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
 
@@ -114,7 +115,8 @@ export type SnapInterfaceControllerAllowedActions =
   | MultichainAssetsControllerGetStateAction
   | AccountsControllerGetSelectedMultichainAccountAction
   | AccountsControllerGetAccountByAddressAction
-  | AccountsControllerListMultichainAccountsAction;
+  | AccountsControllerListMultichainAccountsAction
+  | HasPermission;
 
 export type SnapInterfaceControllerActions =
   | CreateInterface
@@ -282,7 +284,7 @@ export class SnapInterfaceController extends BaseController<
     contentType?: ContentType,
   ) {
     const element = getJsxInterface(content);
-    this.#validateContent(element);
+    this.#validateContent(snapId, element);
     validateInterfaceContext(context);
 
     const id = nanoid();
@@ -339,7 +341,7 @@ export class SnapInterfaceController extends BaseController<
   ) {
     this.#validateArgs(snapId, id);
     const element = getJsxInterface(content);
-    this.#validateContent(element);
+    this.#validateContent(snapId, element);
     validateInterfaceContext(context);
 
     const oldState = this.state.interfaces[id].state;
@@ -530,13 +532,22 @@ export class SnapInterfaceController extends BaseController<
     return this.messenger.call('SnapController:get', id);
   }
 
+  #hasPermission(snapId: SnapId, permission: string) {
+    return this.messenger.call(
+      'PermissionController:hasPermission',
+      snapId,
+      permission,
+    );
+  }
+
   /**
    * Utility function to validate the components of an interface.
    * Throws if something is invalid.
    *
+   * @param snapId - The Snap ID.
    * @param element - The JSX element to verify.
    */
-  #validateContent(element: JSXElement) {
+  #validateContent(snapId: SnapId, element: JSXElement) {
     // We assume the validity of this JSON to be validated by the caller.
     // E.g., in the RPC method implementation.
     const size = getJsonSizeUnsafe(element);
@@ -549,6 +560,7 @@ export class SnapInterfaceController extends BaseController<
       isOnPhishingList: this.#checkPhishingList.bind(this),
       getSnap: this.#getSnap.bind(this),
       getAccountByAddress: this.#getAccountByAddress.bind(this),
+      hasPermission: this.#hasPermission.bind(this, snapId),
     });
   }
 

packages/snaps-utils/src/ui.tsx

@@ -3,6 +3,7 @@ import { NodeType } from '@metamask/snaps-sdk';
 import type {
   BoldChildren,
   GenericSnapElement,
+  ImageElement,
   ItalicChildren,
   JSXElement,
   LinkElement,
@@ -42,6 +43,7 @@ import type { Token, Tokens } from 'marked';
 import type { InternalAccount } from './account';
 import type { Snap } from './snaps';
 import { parseMetaMaskUrl } from './url';
+import { isValidUrl } from './types';
 
 const MAX_TEXT_LENGTH = 50_000; // 50 kb
 const ALLOWED_PROTOCOLS = ['https:', 'mailto:', 'metamask:'];
@@ -433,19 +435,22 @@ export function validateAssetSelector(
  * phishing list.
  * @param hooks.getSnap - The function that returns a snap if installed, undefined otherwise.
  * @param hooks.getAccountByAddress - The function that returns an account by address.
+ * @param hooks.hasPermission - A function that checks whether the Snap has a given permission.
  */
 export function validateJsxElements(
   node: JSXElement,
   {
     isOnPhishingList,
     getSnap,
     getAccountByAddress,
+    hasPermission,
   }: {
     isOnPhishingList: (url: string) => boolean;
     getSnap: (id: string) => Snap | undefined;
     getAccountByAddress: (
       address: CaipAccountId,
     ) => InternalAccount | undefined;
+    hasPermission: (permission: string) => boolean;
   },
 ) {
   walkJsx(node, (childNode) => {
@@ -461,6 +466,15 @@ export function validateJsxElements(
           getAccountByAddress,
         );
         break;
+      case 'Image': {
+        const { src } = (childNode as ImageElement).props;
+        const isUrl = isValidUrl(src);
+        assert(
+          !isUrl || (isUrl && hasPermission('endowment:network-access')),
+          'Using external images is only permitted with the network access endowment.',
+        );
+        break;
+      }
       default:
         break;
     }