Refactor token media-type API to be token-scoped and safer (#3190)

* refactor media-type next.js API resource to mitigate request forgery attack

* fix typescript

Author: tom2drum

lib/metadata/getPageOgType.ts

@@ -90,7 +90,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/api/metrics': 'Regular page',
   '/api/monitoring/invalid-api-schema': 'Regular page',
   '/api/log': 'Regular page',
-  '/api/media-type': 'Regular page',
+  '/api/tokens/[hash]/instances/[id]/media-type': 'Regular page',
   '/api/proxy': 'Regular page',
   '/api/csrf': 'Regular page',
   '/api/healthz': 'Regular page',

lib/metadata/templates/description.ts

@@ -93,7 +93,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/api/metrics': DEFAULT_TEMPLATE,
   '/api/monitoring/invalid-api-schema': DEFAULT_TEMPLATE,
   '/api/log': DEFAULT_TEMPLATE,
-  '/api/media-type': DEFAULT_TEMPLATE,
+  '/api/tokens/[hash]/instances/[id]/media-type': DEFAULT_TEMPLATE,
   '/api/proxy': DEFAULT_TEMPLATE,
   '/api/csrf': DEFAULT_TEMPLATE,
   '/api/healthz': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -94,7 +94,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/api/metrics': '%network_name% node API prometheus metrics',
   '/api/monitoring/invalid-api-schema': '%network_name% node API prometheus metrics',
   '/api/log': '%network_name% node API request log',
-  '/api/media-type': '%network_name% node API media type',
+  '/api/tokens/[hash]/instances/[id]/media-type': '%network_name% node API token instance media type',
   '/api/proxy': '%network_name% node API proxy',
   '/api/csrf': '%network_name% node API CSRF token',
   '/api/healthz': '%network_name% node API health check',

lib/mixpanel/getPageType.ts

@@ -88,7 +88,7 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/api/metrics': 'Node API: Prometheus metrics',
   '/api/monitoring/invalid-api-schema': 'Node API: Prometheus metrics',
   '/api/log': 'Node API: Request log',
-  '/api/media-type': 'Node API: Media type',
+  '/api/tokens/[hash]/instances/[id]/media-type': 'Node API: Token instance media type',
   '/api/proxy': 'Node API: Proxy',
   '/api/csrf': 'Node API: CSRF token',
   '/api/healthz': 'Node API: Health check',

mocks/tokens/tokenInstance.ts

@@ -2,8 +2,10 @@
 import type { TokenInstance } from 'types/api/token';
 
 import * as addressMock from '../address/address';
+import * as tokenInfoMock from './tokenInfo';
 
 export const base: TokenInstance = {
+  token: tokenInfoMock.tokenInfoERC721a,
   animation_url: null,
   external_app_url: 'https://duck.nft/get-your-duck-today',
   id: '32925298983216553915666621415831103694597106215670571463977478984525997408266',

nextjs/nextjs-routes.d.ts

@@ -22,10 +22,10 @@ declare module "nextjs-routes" {
     | StaticRoute<"/api/csrf">
     | StaticRoute<"/api/healthz">
     | StaticRoute<"/api/log">
-    | StaticRoute<"/api/media-type">
     | StaticRoute<"/api/metrics">
     | StaticRoute<"/api/monitoring/invalid-api-schema">
     | StaticRoute<"/api/proxy">
+    | DynamicRoute<"/api/tokens/[hash]/instances/[id]/media-type", { "hash": string; "id": string }>
     | StaticRoute<"/api-docs">
     | DynamicRoute<"/apps/[id]", { "id": string }>
     | StaticRoute<"/apps">

pages/api/csrf.ts

@@ -4,7 +4,14 @@ import buildUrl from 'nextjs/utils/buildUrl';
 import fetchFactory from 'nextjs/utils/fetchProxy';
 import { httpLogger } from 'nextjs/utils/logger';
 
+import isNeedProxy from 'lib/api/isNeedProxy';
+
 export default async function csrfHandler(_req: NextApiRequest, res: NextApiResponse) {
+  if (!isNeedProxy()) {
+    res.status(404).json({ error: 'Not found' });
+    return;
+  }
+
   httpLogger(_req, res);
 
   const url = buildUrl('general:csrf');

pages/api/media-type.ts

@@ -6,6 +6,11 @@ const isEnabled = process.env.PROMETHEUS_METRICS_ENABLED === 'true';
 isEnabled && promClient.collectDefaultMetrics({ prefix: 'frontend_' });
 
 export default async function metricsHandler(req: NextApiRequest, res: NextApiResponse) {
+  if (!isEnabled) {
+    res.status(404).json({ error: 'Not found' });
+    return;
+  }
+
   const metrics = await promClient.register.metrics();
   res.setHeader('Content-type', promClient.register.contentType);
   res.send(metrics);

pages/api/metrics.ts

@@ -0,0 +1,69 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import nodeFetch from 'node-fetch';
+
+import fetchApi from 'nextjs/utils/fetchApi';
+import { httpLogger } from 'nextjs/utils/logger';
+
+import metrics from 'lib/monitoring/metrics';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { SECOND } from 'toolkit/utils/consts';
+
+export default async function tokenInstanceMediaTypeHandler(req: NextApiRequest, res: NextApiResponse) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => {
+    controller.abort('Request to media asset timed out');
+  }, 10 * SECOND);
+
+  try {
+    const field = getQueryParamString(req.query.field) as 'animation_url' | 'image_url';
+    if (![ 'animation_url', 'image_url' ].includes(field)) {
+      throw new Error('Invalid field parameter');
+    }
+
+    const apiData = await fetchApi({
+      resource: 'general:token_instance',
+      pathParams: { hash: getQueryParamString(req.query.hash), id: getQueryParamString(req.query.id) },
+      timeout: SECOND,
+    });
+    if (!apiData) {
+      throw new Error('Failed to fetch token instance');
+    }
+
+    const mediaUrl = apiData[field];
+    if (!mediaUrl) {
+      throw new Error('No media URL found');
+    }
+
+    const mediaRequestEndTime = metrics?.apiRequestDuration.startTimer();
+    const mediaResponse = await nodeFetch(mediaUrl, { method: 'HEAD', signal: controller.signal });
+    const mediaRequestDuration = mediaRequestEndTime?.({ route: '/media-type', code: mediaResponse.status });
+
+    if (mediaResponse.status === 200) {
+      httpLogger.logger.info({ message: 'API fetch', url: mediaUrl, code: mediaResponse.status, duration: mediaRequestDuration });
+    } else {
+      httpLogger.logger.error({ message: 'API fetch', url: mediaUrl, code: mediaResponse.status, duration: mediaRequestDuration });
+      throw new Error();
+    }
+
+    const contentType = mediaResponse.headers.get('content-type');
+    const mediaType = (() => {
+      if (contentType?.startsWith('video')) {
+        return 'video';
+      }
+
+      if (contentType?.startsWith('image')) {
+        return 'image';
+      }
+
+      if (contentType?.startsWith('text/html')) {
+        return 'html';
+      }
+    })();
+
+    res.status(200).json({ type: mediaType });
+  } catch (error) {
+    res.status(200).json({ type: undefined });
+  } finally {
+    clearTimeout(timeout);
+  }
+}