Merge pull request #76 from bigcommerce/DATA-13050

fix(analytics): DATA-13050 Generate text correctly when product name has number sign in name

Author: bc-facundo-yuffrida

jest.config.ts

@@ -1,6 +1,9 @@
 import type { Config } from 'jest'
 import nextJest from 'next/jest.js'
 
+// Allow unit tests to run without requiring full runtime env vars.
+process.env.SKIP_ENV_VALIDATION ??= '1';
+
 const createJestConfig = nextJest({
   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
   dir: './',

src/app/api/app/load/route.ts

@@ -3,6 +3,7 @@ import { z } from 'zod';
 import { NextResponse, type NextRequest } from 'next/server';
 import { env } from '~/env.mjs';
 import * as db from '~/lib/db';
+import { sanitizeQueryParamValueInPath } from '~/utils/sanitizeQueryParam';
 
 const queryParamSchema = z.object({
   signed_payload_jwt: z.string(),
@@ -30,12 +31,6 @@ const jwtSchema = z.object({
 });
 
 export async function GET(request: NextRequest) {
-  function appendExchangeToken(url: string, token: string): string {
-    const delimiter = new URL(url, env.APP_ORIGIN).search ? '&' : '?';
-
-    return `${url}${delimiter}exchangeToken=${token}`;
-  }
-
   const parsedParams = queryParamSchema.safeParse(
     Object.fromEntries(request.nextUrl.searchParams)
   );
@@ -64,8 +59,14 @@ export async function GET(request: NextRequest) {
   });
 
   const exchangeToken = await db.saveClientToken(clientToken);
+  const safePath = sanitizeQueryParamValueInPath(
+    sanitizeQueryParamValueInPath(path, 'product_name'),
+    'productName'
+  );
+  const redirectUrl = new URL(safePath, env.APP_ORIGIN);
+  redirectUrl.searchParams.set('exchangeToken', exchangeToken);
 
-  return NextResponse.redirect(new URL(appendExchangeToken(path, exchangeToken), env.APP_ORIGIN), {
+  return NextResponse.redirect(redirectUrl, {
     status: 302,
     statusText: 'Found',
   });

src/utils/sanitizeQueryParam.spec.ts

@@ -0,0 +1,74 @@
+import {
+  sanitizeQueryParamValue,
+  sanitizeQueryParamValueInPath,
+} from './sanitizeQueryParam';
+
+describe('sanitizeQueryParamValue', () => {
+  it('encodes reserved characters that break parsing (#, &, +, space)', () => {
+    expect(sanitizeQueryParamValue('Widget #2')).toBe('Widget%20%232');
+    expect(sanitizeQueryParamValue('AT&T')).toBe('AT%26T');
+    expect(sanitizeQueryParamValue('plus+sign')).toBe('plus%2Bsign');
+    expect(sanitizeQueryParamValue('has space')).toBe('has%20space');
+  });
+
+  it('preserves valid percent-escapes but encodes stray %', () => {
+    expect(sanitizeQueryParamValue('already%23encoded')).toBe(
+      'already%23encoded'
+    );
+    expect(sanitizeQueryParamValue('100% legit')).toBe('100%25%20legit');
+  });
+});
+
+describe('sanitizeQueryParamValueInPath', () => {
+  const origin = 'https://example.com';
+
+  it('keeps full product_name when it contains #', () => {
+    const safePath = sanitizeQueryParamValueInPath(
+      '/p?product_name=Widget #2',
+      'product_name'
+    );
+    const url = new URL(safePath, origin);
+
+    expect(url.searchParams.get('product_name')).toBe('Widget #2');
+    expect(url.hash).toBe('');
+  });
+
+  it('keeps full product_name when it contains &', () => {
+    const safePath = sanitizeQueryParamValueInPath(
+      '/p?product_name=AT&T',
+      'product_name'
+    );
+    const url = new URL(safePath, origin);
+
+    expect(url.searchParams.get('product_name')).toBe('AT&T');
+    // Ensure it didn't accidentally create an extra param
+    expect(Array.from(url.searchParams.keys())).toEqual(['product_name']);
+  });
+
+  it('keeps plus sign as literal + (not space)', () => {
+    const safePath = sanitizeQueryParamValueInPath(
+      '/p?product_name=plus+sign',
+      'product_name'
+    );
+    const url = new URL(safePath, origin);
+
+    expect(url.searchParams.get('product_name')).toBe('plus+sign');
+  });
+
+  it('does not modify other params while sanitizing the target param', () => {
+    const safePath = sanitizeQueryParamValueInPath(
+      '/p?exchangeToken=abc&product_name=Widget #2',
+      'product_name'
+    );
+    const url = new URL(safePath, origin);
+
+    expect(url.searchParams.get('exchangeToken')).toBe('abc');
+    expect(url.searchParams.get('product_name')).toBe('Widget #2');
+  });
+
+  it('returns the original path if param is missing', () => {
+    expect(sanitizeQueryParamValueInPath('/p?foo=bar', 'product_name')).toBe(
+      '/p?foo=bar'
+    );
+  });
+});

src/utils/sanitizeQueryParam.ts

@@ -0,0 +1,43 @@
+/**
+ * BigCommerce can provide URLs where a query param value contains raw reserved characters
+ * (e.g. `product_name=Widget #2`, `product_name=AT&T`, `product_name=plus+sign`).
+ *
+ * These can be interpreted as URL delimiters:
+ * - `#` fragment delimiter (truncates the query string)
+ * - `&` query separator (splits into new params)
+ * - `+` is treated as space in x-www-form-urlencoded semantics
+ *
+ * We sanitize values in-place so URL parsing retains the full intended value.
+ */
+export function sanitizeQueryParamValue(value: string): string {
+  const withSafePercents = value.replace(/%(?![0-9A-Fa-f]{2})/g, '%25');
+
+  return withSafePercents
+    .replaceAll('+', '%2B')
+    .replaceAll('#', '%23')
+    .replaceAll('&', '%26')
+    .replaceAll(' ', '%20');
+}
+
+export function sanitizeQueryParamValueInPath(
+  path: string,
+  paramName: string
+): string {
+  const key = `${paramName}=`;
+  const keyIdx = path.indexOf(key);
+  if (keyIdx === -1) return path;
+
+  const valueStart = keyIdx + key.length;
+  const remainder = path.slice(valueStart);
+  const delimiterMatch = remainder.match(/&[A-Za-z0-9_.~-]+=/);
+  const endIdx =
+    delimiterMatch && typeof delimiterMatch.index === 'number'
+      ? valueStart + delimiterMatch.index
+      : path.length;
+
+  const before = path.slice(0, valueStart);
+  const value = path.slice(valueStart, endIdx);
+  const after = path.slice(endIdx);
+
+  return `${before}${sanitizeQueryParamValue(value)}${after}`;
+}