Migrate from cookies to headers for scam tokens and bypassing rate li… (#3118)

Migrate from cookies to headers for scam tokens and bypassing rate limits

Resolves #3092

Author: tom2drum

configs/app/app.ts

@@ -10,11 +10,13 @@ const baseUrl = [
   appPort && ':' + appPort,
 ].filter(Boolean).join('');
 const isDev = getEnvValue('NEXT_PUBLIC_APP_ENV') === 'development';
+const isReview = getEnvValue('NEXT_PUBLIC_APP_ENV') === 'review';
 const isPw = getEnvValue('NEXT_PUBLIC_APP_INSTANCE') === 'pw';
 const spriteHash = getEnvValue('NEXT_PUBLIC_ICON_SPRITE_HASH');
 
 const app = Object.freeze({
   isDev,
+  isReview,
   isPw,
   protocol: appSchema,
   host: appHost,

lib/api/isNeedProxy.ts

@@ -1,13 +1,12 @@
 import config from 'configs/app';
 
-// FIXME
-// I was not able to figure out how to send CORS with credentials from localhost
-// unsuccessfully tried different ways, even custom local dev domain
-// so for local development we have to use next.js api as proxy server
 export default function isNeedProxy() {
   if (config.app.useProxy) {
     return true;
   }
 
-  return config.app.host === 'localhost' && config.app.host !== config.apis.general.host;
+  // ONLY FOR DEV OR REVIEW ENVIRONMENTS (NOT PRODUCTION)
+  // because we have some resources that require credentials, we need to use the proxy
+  // otherwise the cross-origin requests with "credentials: include" will be blocked
+  return config.app.isDev || config.app.isReview;
 }

lib/api/useApiFetch.tsx

@@ -2,11 +2,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import { omit, pickBy } from 'es-toolkit';
 import React from 'react';
 
-import type { ApiName } from './types';
 import type { CsrfData } from 'types/client/account';
 import type { ChainConfig } from 'types/multichain';
 
-import config from 'configs/app';
 import isBodyAllowed from 'lib/api/isBodyAllowed';
 import isNeedProxy from 'lib/api/isNeedProxy';
 import { getResourceKey } from 'lib/api/useApiQuery';
@@ -18,22 +16,6 @@ import buildUrl from './buildUrl';
 import getResourceParams from './getResourceParams';
 import type { ResourceName, ResourcePathParams } from './resources';
 
-function needCredentials(apiName: ApiName) {
-  if (![ 'general' ].includes(apiName)) {
-    return false;
-  }
-
-  // currently, the cookies are used only for the following features
-  if (
-    config.features.account.isEnabled ||
-    config.UI.views.token.hideScamTokensEnabled
-  ) {
-    return true;
-  }
-
-  return false;
-}
-
 export interface Params<R extends ResourceName> {
   pathParams?: ResourcePathParams<R>;
   queryParams?: Record<string, string | Array<string> | number | boolean | undefined | null>;
@@ -53,21 +35,46 @@ export default function useApiFetch() {
     { pathParams, queryParams, fetchParams, logError, chain }: Params<R> = {},
   ) => {
     const apiToken = cookies.get(cookies.NAMES.API_TOKEN);
+    const apiTempToken = cookies.get(cookies.NAMES.API_TEMP_TOKEN);
+    const showScamTokens = cookies.get(cookies.NAMES.SHOW_SCAM_TOKENS) === 'true';
+
     const { api, apiName, resource } = getResourceParams(resourceName, chain);
     const url = buildUrl(resourceName, pathParams, queryParams, undefined, chain);
     const withBody = isBodyAllowed(fetchParams?.method);
     const headers = pickBy({
       'x-endpoint': isNeedProxy() ? api.endpoint : undefined,
       Authorization: [ 'admin', 'contractInfo' ].includes(apiName) ? apiToken : undefined,
-      'x-csrf-token': withBody && csrfToken ? csrfToken : undefined,
+      ...(apiName === 'general' ? {
+        'api-v2-temp-token': apiTempToken,
+        'show-scam-tokens': showScamTokens ? 'true' : undefined,
+        'x-csrf-token': withBody && csrfToken ? csrfToken : undefined,
+      } : {}),
       ...resource.headers,
       ...fetchParams?.headers,
     }, Boolean) as HeadersInit;
 
     return fetch<SuccessType, ErrorType>(
       url,
       {
-        credentials: needCredentials(apiName) ? 'include' : 'same-origin',
+        // Things to remember:
+        //
+        // A: Currently, we use only one API-related cookie, "_explorer_key," which is for the account feature.
+        // We include credentials only for core API requests.
+        // Note that some APIs may share the same origin with the core API, but they don't require credentials (e.g the Stats API).
+        //
+        // B: We cannot limit the routes for which credentials should be sent exclusively to the "/account/**" routes.
+        // This is because the watchlist names and private tags preloading will not function on the API side.
+        // Therefore, we include credentials for all core API routes.
+        //
+        // C: We cannot include credentials in cross-origin requests.
+        // In this case, we must explicitly list all the origins allowed to make requests in the "Access-Control-Allow-Origin" header,
+        // which is challenging for our devops and backend teams. Thus, we do not use the "include" option here.
+        // And because of this, the account feature in cross-origin setup will not work.
+        //
+        // Considering all of the above, we use:
+        //   -  The "same-origin" option for all core API requests
+        //   -  The "omit" option for all other requests
+        credentials: apiName === 'general' ? 'same-origin' : 'omit',
         headers,
         ...(fetchParams ? omit(fetchParams, [ 'headers' ]) : {}),
       },

lib/cookies.ts

@@ -5,6 +5,7 @@ import { isBrowser } from 'toolkit/utils/isBrowser';
 export enum NAMES {
   NAV_BAR_COLLAPSED = 'nav_bar_collapsed',
   API_TOKEN = '_explorer_key',
+  API_TEMP_TOKEN = 'api_temp_token',
   REWARDS_API_TOKEN = 'rewards_api_token',
   REWARDS_REFERRAL_CODE = 'rewards_ref_code',
   TXS_SORT = 'txs_sort',

nextjs/getServerSideProps/guards.ts

@@ -6,7 +6,6 @@ import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps/handlers';
 
 import config from 'configs/app';
-import isNeedProxy from 'lib/api/isNeedProxy';
 
 export type Guard = (chainConfig: typeof config) => <Pathname extends Route['pathname'] = never>(context: GetServerSidePropsContext) =>
 Promise<GetServerSidePropsResult<Props<Pathname>> | undefined>;
@@ -159,8 +158,8 @@ export const dataAvailability: Guard = (chainConfig: typeof config) => async() =
   }
 };
 
-export const login: Guard = () => async() => {
-  if (!isNeedProxy()) {
+export const login: Guard = (chainConfig: typeof config) => async() => {
+  if (!chainConfig.app.isReview && !chainConfig.app.isDev) {
     return {
       notFound: true,
     };

nextjs/utils/fetchProxy.ts

@@ -27,6 +27,8 @@ export default function fetchFactory(
         'user-agent',
         'Authorization', // the old value, just in case
         'authorization', // Node.js automatically lowercases headers
+        'show-scam-tokens',
+        'api-v2-temp-token',
         // feature flags
         'updated-gas-oracle',
       ]) as Record<string, string | undefined>,

pages/api/proxy.ts

@@ -28,6 +28,7 @@ const handler = async(nextReq: NextApiRequest, nextRes: NextApiResponse) => {
     'x-ratelimit-limit',
     'x-ratelimit-remaining',
     'x-ratelimit-reset',
+    'api-v2-temp-token',
   ];
 
   HEADERS_TO_PROXY.forEach((header) => {

ui/shared/AppError/custom/AppErrorTooManyRequests.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 
 import config from 'configs/app';
 import buildUrl from 'lib/api/buildUrl';
-import useFetch from 'lib/hooks/useFetch';
+import * as cookies from 'lib/cookies';
 import { Button } from 'toolkit/chakra/button';
 import { toaster } from 'toolkit/chakra/toaster';
-import { SECOND } from 'toolkit/utils/consts';
+import { DAY, SECOND } from 'toolkit/utils/consts';
 import { apos } from 'toolkit/utils/htmlEntities';
 import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
 import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
@@ -31,7 +31,6 @@ const AppErrorTooManyRequests = ({ bypassOptions, reset }: Props) => {
 
   const [ timeLeft, setTimeLeft ] = React.useState(reset ? Math.ceil(Number(reset) / SECOND) : undefined);
 
-  const fetch = useFetch();
   const recaptcha = useReCaptcha();
 
   const handleSubmit = React.useCallback(async() => {
@@ -42,17 +41,28 @@ const AppErrorTooManyRequests = ({ bypassOptions, reset }: Props) => {
         throw new Error('ReCaptcha is not solved');
       }
 
-      const url = buildUrl('general:api_v2_key');
+      const url = buildUrl('general:api_v2_key', undefined, { in_header: true });
 
-      await fetch(url, {
+      const response = await fetch(url, {
         method: 'POST',
-        body: { recaptcha_response: token },
+        body: JSON.stringify({ recaptcha_response: token }),
         headers: {
           'recaptcha-v2-response': token,
         },
-        credentials: 'include',
-      }, {
-        resource: 'general:api_v2_key',
+      });
+
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+
+      const apiTempToken = response.headers.get('api-v2-temp-token');
+
+      if (!apiTempToken) {
+        throw new Error('API temp token is not found');
+      }
+
+      cookies.set(cookies.NAMES.API_TEMP_TOKEN, apiTempToken, {
+        expires: reset ? Number(reset) / DAY : 1 / 24,
       });
 
       window.location.reload();
@@ -64,7 +74,7 @@ const AppErrorTooManyRequests = ({ bypassOptions, reset }: Props) => {
         type: 'error',
       });
     }
-  }, [ recaptcha, fetch ]);
+  }, [ recaptcha, reset ]);
 
   React.useEffect(() => {
     if (reset === undefined) {