@akinon/next 2.0.16-rc.0 → 2.0.16

package/CHANGELOG.md

@@ -1,31 +1,12 @@
 # @akinon/next
 
-## 2.0.16-rc.0
+## 2.0.16
 
 ### Patch Changes
 
-- 0cf9ea23: BRDG-16491: Prevent redirect when iframe payment is active
-- 324f97d5: ZERO-4219: replace masterpass-rest-complete with masterpass-rest-callback
-- 51ea0688: ZERO-4377: Fix checkout card type state being cleared after valid bin number responses.
-- ZERO-4160: Enhance oauth-login middleware with improved request handling and logging
-- b55acb768: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
-- 760258c1: ZERO-4160: Enhance oauth-login middleware to handle fetch errors and improve response handling
-- 143be2b9d: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- 7889b08f: ZERO-4276: Enhance route generation by adding .env loading and custom skip segments support
-- 9f8cd3bc5: ZERO-3449: AI Search Active Filters & Crop Style changes have been implemented
-- d51fa68e: ZERO-4399: add card rewards to pz-masterpass-rest
-- bfafa3f4: ZERO-4160: Refactor oauth-login middleware to use fetchCommerce for API calls and improve cookie handling
-- 57d7eb30: ZERO-4276: Refactor route generation logic by removing environment loading and simplifying skip segments handling
-- d99a6a7d5: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
-- 9db81a71: ZERO-4365: Remove brand `@theme/*` alias imports from library packages
-- 591e345e: ZERO-3855: Enhance credit card payment handling in checkout middlewares
-- 4de5303c5: ZERO-2504: add cookie filter to api client request
-- 95b139dc1: ZERO-3795: Remove duplicate entry for SavedCard in PluginComponents map
-- 1d00f2d0: BRDG-16664: Set secure flag for CSRF token cookies in useCaptcha and default middleware
-- 4ac7b2a1: ZERO-4219: fix masterpass-rest callback route format and double-encoded error cookie
-- 4998a963: ZERO-4168: Add server-side payload optimization
-- 3909d3224: Edit the duplicate Plugin.SimilarProducts in the plugin-module.
-- e18836b2: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
+- 378607d1: ZERO-4430: Harden CSRF handling for the BFF proxy
+
+  When `settings.csrf.httpOnly` is enabled, the Django `csrftoken` cookie is set `HttpOnly` + `Secure` + `SameSite=Lax` and the token is never exposed to the browser. The Next.js proxy validates the request `Origin` and injects the `x-csrftoken` header server-side from the cookie before forwarding state-changing requests, instead of round-tripping the token through client JavaScript.
 
 ## 2.0.15
 

package/api/auth.ts

@@ -6,7 +6,10 @@ import Settings from 'settings';
 import { urlLocaleMatcherRegex } from '../utils';
 import logger from '@akinon/next/utils/log';
 import { AuthError } from '../types';
-import getRootHostname from '../utils/get-root-hostname';
+import getRootHostname, {
+  getRequestRootHostname
+} from '../utils/get-root-hostname';
+import { getCsrfCookieFlags } from '../utils/csrf';
 import { LocaleUrlStrategy } from '../localization';
 import { cookies, headers } from 'next/headers';
 
@@ -222,12 +225,17 @@ const getDefaultAuthConfig = () => {
           logger.debug(`Login/Register response: ${JSON.stringify(response)}`);
 
           let sessionId = '';
+          let rotatedCsrfToken = '';
           const setCookieHeader = apiRequest.headers.get('set-cookie');
           if (setCookieHeader) {
             sessionId =
               setCookieHeader
                 .match(/osessionid=\w+/)?.[0]
                 .replace(/osessionid=/, '') || '';
+            rotatedCsrfToken =
+              setCookieHeader
+                .match(/csrftoken=[^;,\s]+/)?.[0]
+                .replace(/csrftoken=/, '') || '';
 
             logger.debug(`Login/Register session id: ${sessionId}`);
           } else {
@@ -258,6 +266,14 @@ const getDefaultAuthConfig = () => {
 
             cookieStore.set('osessionid', sessionId, cookieOptions);
             cookieStore.set('sessionid', sessionId, cookieOptions);
+
+            if (rotatedCsrfToken) {
+              cookieStore.set('csrftoken', rotatedCsrfToken, {
+                path: '/',
+                ...getCsrfCookieFlags(),
+                ...(rootHostname ? { domain: rootHostname } : {})
+              });
+            }
           }
 
           if (!response.key) {
@@ -314,14 +330,16 @@ const getDefaultAuthConfig = () => {
       },
       signOut: async () => {
         const cookieStore = await cookies();
-        cookieStore.set('osessionid', '', {
-          path: '/',
-          maxAge: 0
-        });
-        cookieStore.set('sessionid', '', {
+        const rootHostname = getRequestRootHostname(await headers());
+        const expireOptions = {
           path: '/',
-          maxAge: 0
-        });
+          maxAge: 0,
+          ...(rootHostname ? { domain: rootHostname } : {})
+        };
+
+        cookieStore.set('osessionid', '', expireOptions);
+        cookieStore.set('sessionid', '', expireOptions);
+        cookieStore.set('csrftoken', '', expireOptions);
         logger.debug('Successfully signed out');
       }
     },
@@ -575,9 +593,19 @@ const defaultNextAuthOptionsV4 = (req: any, res: any) => {
         logger.debug('Successfully signed in');
       },
       signOut: () => {
+        const rootHostname = getRequestRootHostname({
+          get: (name) => {
+            const v = req.headers[name];
+            return Array.isArray(v) ? v[0] : (v ?? null);
+          }
+        });
+        const domainAttr = rootHostname ? `; Domain=${rootHostname}` : '';
+        const expiry = `Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT${domainAttr}`;
+
         res.setHeader('Set-Cookie', [
-          `osessionid=; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`,
-          `sessionid=; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`
+          `osessionid=; ${expiry}`,
+          `sessionid=; ${expiry}`,
+          `csrftoken=; ${expiry}`
         ]);
         logger.debug('Successfully signed out');
       }

package/api/client.ts

@@ -8,6 +8,64 @@ import { cookies } from 'next/headers';
 import getRootHostname from '../utils/get-root-hostname';
 import { LocaleUrlStrategy } from '../localization';
 import { fixtureManager, MockMode } from '../lib/fixture-manager';
+import { user } from '../data/urls';
+import { getCsrfCookieFlags, isCsrfHttpOnly } from '../utils/csrf';
+
+const CSRF_TOKEN_SLUG = user.csrfToken.replace(/^\//, '');
+
+const STATE_CHANGING_METHODS = ['POST', 'PUT', 'PATCH', 'DELETE'];
+
+function getProxyHosts(req: Request): string[] {
+  const hosts = new Set<string>();
+  const forwarded =
+    req.headers.get('x-forwarded-host') || req.headers.get('host');
+  if (forwarded) {
+    hosts.add(forwarded.split(':')[0].toLowerCase());
+  }
+  try {
+    if (process.env.NEXT_PUBLIC_URL) {
+      hosts.add(new URL(process.env.NEXT_PUBLIC_URL).hostname.toLowerCase());
+    }
+  } catch {
+    // ignore malformed NEXT_PUBLIC_URL
+  }
+  return Array.from(hosts);
+}
+
+/**
+ * Next.js-layer CSRF defense for the BFF proxy. State-changing requests must
+ * originate from our own app: when an `Origin` header is present it has to
+ * resolve to the proxy host (or, under the subdomain locale strategy, the
+ * same registrable domain). Requests without an `Origin` (non-browser
+ * clients, same-origin navigations) fall back to the `SameSite=Lax` cookie
+ * guarantee. Only enforced when CSRF hardening is enabled.
+ */
+function isOriginAllowed(req: Request): boolean {
+  const origin = req.headers.get('origin');
+  if (!origin) return true;
+
+  let originHost: string;
+  try {
+    originHost = new URL(origin).hostname.toLowerCase();
+  } catch {
+    return false;
+  }
+
+  const allowedHosts = getProxyHosts(req);
+  if (allowedHosts.includes(originHost)) return true;
+
+  if (settings.localization.localeUrlStrategy === LocaleUrlStrategy.Subdomain) {
+    const originRoot = getRootHostname(`https://${originHost}`);
+    return (
+      !!originRoot &&
+      allowedHosts.some(
+        (host) => getRootHostname(`https://${host}`) === originRoot
+      )
+    );
+  }
+
+  return false;
+}
 
 interface RouteParams {
   params: {
@@ -16,7 +74,10 @@ interface RouteParams {
 }
 
 async function proxyRequest(...args) {
-  const [req, routeContext] = args as [req: Request, { params: Promise<RouteParams['params']> }];
+  const [req, routeContext] = args as [
+    req: Request,
+    { params: Promise<RouteParams['params']> }
+  ];
   const params = await routeContext.params;
   const { searchParams } = new URL(req.url);
   const commerceUrl = settings.commerceUrl;
@@ -103,6 +164,28 @@ async function proxyRequest(...args) {
     });
   }
 
+  // CSRF hardening (BFF model): when the csrftoken cookie is HttpOnly the
+  // browser can no longer mirror it into the `x-csrftoken` header, so the
+  // proxy validates the request origin and injects the header server-side
+  // from the cookie that the browser sent with this request.
+  if (isCsrfHttpOnly() && STATE_CHANGING_METHODS.includes(req.method)) {
+    if (!isOriginAllowed(req)) {
+      logger.warn('Client Proxy Request - Blocked cross-origin request', {
+        url: req.url,
+        origin: req.headers.get('origin')
+      });
+      return NextResponse.json(
+        { detail: 'CSRF origin check failed.' },
+        { status: 403 }
+      );
+    }
+
+    const csrfToken = nextCookies.get('csrftoken')?.value;
+    if (csrfToken) {
+      fetchOptions.headers['x-csrftoken'] = csrfToken;
+    }
+  }
+
   if (options.contentType) {
     fetchOptions.headers['Content-Type'] = options.contentType;
   }
@@ -162,7 +245,11 @@ async function proxyRequest(...args) {
 
   // Replay mode: serve from fixtures
   if (mockMode === MockMode.REPLAY) {
-    const { found, fixture } = await fixtureManager.read(req.method, slug, fixtureBody);
+    const { found, fixture } = await fixtureManager.read(
+      req.method,
+      slug,
+      fixtureBody
+    );
 
     if (found) {
       return NextResponse.json(
@@ -179,6 +266,8 @@ async function proxyRequest(...args) {
     );
   }
 
+  console.log('FETCH OPTIONS', fetchOptions);
+
   try {
     const request = await fetch(url, fetchOptions);
 
@@ -240,11 +329,25 @@ async function proxyRequest(...args) {
           if (!cookie.domain && rootHostname) {
             cookie.domain = rootHostname;
           }
+          if (cookie.name === 'csrftoken') {
+            const flags = getCsrfCookieFlags();
+            if (flags.httpOnly) {
+              cookie.httpOnly = true;
+              cookie.secure = flags.secure;
+              cookie.sameSite = flags.sameSite;
+            }
+          }
           return formatCookieString(cookie);
         })
         .join(', ');
     }
 
+    if (slug === CSRF_TOKEN_SLUG) {
+      responseHeaders['Cache-Control'] =
+        'private, no-store, no-cache, must-revalidate';
+      responseHeaders['Pragma'] = 'no-cache';
+    }
+
     return NextResponse.json(
       options.responseType === 'text' ? { result: response } : response,
       { status: request.status, headers: responseHeaders }

package/bin/pz-generate-routes.js

@@ -6,7 +6,6 @@ const findBaseDir = require('../utils/find-base-dir');
 
 const generateRoutes = () => {
   const baseDir = findBaseDir();
-
   const srcDir = path.join(baseDir, 'src');
   const appDir = path.join(srcDir, 'app');
 
@@ -35,10 +34,8 @@ const generateRoutes = () => {
     '[segment]',
     '[url]',
     '[theme]',
-    '[member_type]',
-    '[clienttype]'
+    '[member_type]'
   ];
-
   const skipCatchAllRoutes = ['[...prettyurl]', '[...not_found]'];
 
   const walkDirectory = (dir, basePath = '') => {

package/components/plugin-module.tsx

@@ -116,6 +116,7 @@ const PluginComponents = new Map([
     ]
   ],
   [Plugin.SavedCard, [Component.SavedCard, Component.IyzicoSavedCard]],
+  [Plugin.SavedCard, [Component.SavedCard]],
   [Plugin.FlowPayment, [Component.FlowPayment]],
   [
     Plugin.VirtualTryOn,

package/data/client/checkout.ts

@@ -738,6 +738,7 @@ export const checkoutApi = api.injectEndpoints({
       },
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
+        dispatch(setCardType(arg));
         await queryFulfilled;
         dispatch(setPaymentStepBusy(false));
       }

package/data/server/category.ts

@@ -7,8 +7,6 @@ import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 import { headers as nHeaders } from 'next/headers';
 import { ServerVariables } from '../../utils/server-variables';
-import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
-import settings from 'settings';
 
 function getCategoryDataHandler(
   pk: number,
@@ -82,7 +80,7 @@ function getCategoryDataHandler(
   };
 }
 
-export const getCategoryData = async ({
+export const getCategoryData = ({
   pk,
   searchParams,
   headers,
@@ -95,7 +93,7 @@ export const getCategoryData = async ({
   searchParams?: SearchParams;
   headers?: Record<string, string>;
 }) => {
-  const result = await Cache.wrap(
+  return Cache.wrap(
     CacheKey.Category(pk, searchParams, headers),
     locale,
     getCategoryDataHandler(pk, locale, currency, searchParams, headers),
@@ -104,16 +102,6 @@ export const getCategoryData = async ({
       compressed: true
     }
   );
-
-  if (settings.payloadOptimization?.enabled && result?.data) {
-    try {
-      return { ...result, data: optimizeCategoryResponse(result.data, settings.payloadOptimization) };
-    } catch (e) {
-      logger.error('Payload optimization failed for category', { pk, error: (e as Error).message });
-    }
-  }
-
-  return result;
 };
 
 function getCategoryBySlugDataHandler(

package/data/server/list.ts

@@ -6,8 +6,6 @@ import appFetch, { FetchResponseType } from '../../utils/app-fetch';
 import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 import { ServerVariables } from '../../utils/server-variables';
-import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
-import settings from 'settings';
 
 const getListDataHandler = (
   locale,
@@ -68,7 +66,7 @@ export const getListData = async ({
   searchParams: SearchParams;
   headers?: Record<string, string>;
 }) => {
-  const result = await Cache.wrap(
+  return Cache.wrap(
     CacheKey.List(searchParams, headers),
     locale,
     getListDataHandler(locale, currency, searchParams, headers),
@@ -77,14 +75,4 @@ export const getListData = async ({
       compressed: true
     }
   );
-
-  if (settings.payloadOptimization?.enabled && result) {
-    try {
-      return optimizeCategoryResponse(result, settings.payloadOptimization);
-    } catch (e) {
-      logger.error('Payload optimization failed for list', { error: (e as Error).message });
-    }
-  }
-
-  return result;
 };

package/data/server/product.ts

@@ -4,8 +4,6 @@ import { ProductCategoryResult, ProductResult, SearchParams } from '../../types'
 import appFetch from '../../utils/app-fetch';
 import { ServerVariables } from '../../utils/server-variables';
 import logger from '../../utils/log';
-import { optimizeProductResponse } from '../../utils/payload-optimizer';
-import settings from 'settings';
 
 type GetProduct = {
   pk: number | string;
@@ -165,13 +163,5 @@ export const getProductData = async ({
     throw error;
   }
 
-  if (settings.payloadOptimization?.enabled && result?.data) {
-    try {
-      return { ...result, data: optimizeProductResponse(result.data, settings.payloadOptimization) };
-    } catch (e) {
-      logger.error('Payload optimization failed for product', { pk, error: (e as Error).message });
-    }
-  }
-
   return result;
 };

package/data/server/special-page.ts

@@ -4,9 +4,6 @@ import { GetCategoryResponse, SearchParams } from '../../types';
 import { generateCommerceSearchParams } from '../../utils';
 import appFetch from '../../utils/app-fetch';
 import { ServerVariables } from '../../utils/server-variables';
-import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
-import logger from '../../utils/log';
-import settings from 'settings';
 
 const getSpecialPageDataHandler = (
   pk: number,
@@ -48,7 +45,7 @@ export const getSpecialPageData = async ({
   searchParams: SearchParams;
   headers?: Record<string, string>;
 }) => {
-  const result = await Cache.wrap(
+  return Cache.wrap(
     CacheKey.SpecialPage(pk, searchParams, headers),
     locale,
     getSpecialPageDataHandler(pk, locale, currency, searchParams, headers),
@@ -57,14 +54,4 @@ export const getSpecialPageData = async ({
       compressed: true
     }
   );
-
-  if (settings.payloadOptimization?.enabled && result) {
-    try {
-      return optimizeCategoryResponse(result, settings.payloadOptimization);
-    } catch (e) {
-      logger.error('Payload optimization failed for special-page', { pk, error: (e as Error).message });
-    }
-  }
-
-  return result;
 };

package/data/server/widget.ts

@@ -4,9 +4,6 @@ import { CacheOptions, WidgetResultType, WidgetSchemaType } from '../../types';
 import appFetch from '../../utils/app-fetch';
 import { widgets } from '../urls';
 import { ServerVariables } from '../../utils/server-variables';
-import { optimizeWidgetResponse } from '../../utils/payload-optimizer';
-import logger from '../../utils/log';
-import settings from 'settings';
 
 const getWidgetDataHandler =
   (
@@ -56,7 +53,7 @@ export const getWidgetData = async <T>({
   cacheOptions?: CacheOptions;
   headers?: Record<string, string>;
 }): Promise<WidgetResultType<T>> => {
-  const result = await Cache.wrap(
+  return Cache.wrap(
     CacheKey.Widget(slug),
     locale,
     getWidgetDataHandler(slug, locale, currency, headers),
@@ -65,16 +62,6 @@ export const getWidgetData = async <T>({
       ...cacheOptions
     }
   );
-
-  if (settings.payloadOptimization?.enabled && result) {
-    try {
-      return optimizeWidgetResponse(result, settings.payloadOptimization) as WidgetResultType<T>;
-    } catch (e) {
-      logger.error('Payload optimization failed for widget', { slug, error: (e as Error).message });
-    }
-  }
-
-  return result as WidgetResultType<T>;
 };
 
 const getCollectionWidgetDataHandler =

package/data/urls.ts

@@ -183,11 +183,7 @@ export const product = {
   breadcrumbUrl: (menuitemmodel: string) =>
     `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`,
   bundleProduct: (productPk: string, queryString: string) =>
-    `/bundle-product/${productPk}/?${queryString}`,
-  similarProducts: (params?: string) =>
-    `/similar-products${params ? `?${params}` : ''}`,
-  similarProductsList: (params?: string) =>
-    `/similar-product-list${params ? `?${params}` : ''}`
+    `/bundle-product/${productPk}/?${queryString}`
 };
 
 export const wishlist = {

package/hooks/use-captcha.tsx

@@ -39,7 +39,7 @@ export const useCaptcha = () => {
   };
 
   if (csrfToken) {
-    setCookie('csrftoken', csrfToken, { secure: true });
+    setCookie('csrftoken', csrfToken);
   }
 
   const onCaptchaChange = useCallback(async (response) => {

package/middlewares/default.ts

@@ -17,7 +17,7 @@ import {
   withMasterpassRestCallback,
   withBfcacheHeaders
 } from '.';
-import { urlLocaleMatcherRegex } from '../utils';
+import { getCsrfCookieFlags, urlLocaleMatcherRegex } from '../utils';
 import { getPzSegmentsConfig, encodePzValue, isLegacyMode } from '../utils/pz-segments';
 import withCurrency from './currency';
 import withLocale from './locale';
@@ -547,8 +547,9 @@ const withPzDefault =
                                           'csrftoken',
                                           csrf_token,
                                           {
+                                            path: '/',
                                             domain: rootHostname,
-                                            secure: true
+                                            ...getCsrfCookieFlags()
                                           }
                                         );
                                       }