@akinon/projectzero 2.0.152-rc.0 → 2.0.152-rc.2

package/app-template/src/utils/__tests__/sanitize.test.ts

@@ -0,0 +1,127 @@
+import {
+  getSafeLinkProps,
+  toPlainText,
+  toSafeColor,
+  toSafeHtml
+} from '../sanitize';
+
+describe('toSafeHtml', () => {
+  it('returns an empty string for empty values', () => {
+    expect(toSafeHtml()).toBe('');
+    expect(toSafeHtml('')).toBe('');
+  });
+
+  it('keeps plain text and existing character references', () => {
+    expect(toSafeHtml('Kargo & İade garantisi ş')).toBe(
+      'Kargo & İade garantisi ş'
+    );
+    expect(toSafeHtml(`Tom & "Jerry's" <3`)).toBe(
+      'Tom &amp; &quot;Jerry&#39;s&quot; &lt;3'
+    );
+  });
+
+  it('keeps allowed tags and drops their attributes', () => {
+    expect(
+      toSafeHtml(
+        '<P style="text-align:center">Hızlı <strong>kargo</strong></P><br/><ul><li>a</li></ul><h3 class="x">Hakkımızda</h3>'
+      )
+    ).toBe(
+      '<p>Hızlı <strong>kargo</strong></p><br><ul><li>a</li></ul><h3>Hakkımızda</h3>'
+    );
+  });
+
+  it('removes other tags but keeps their text', () => {
+    expect(
+      toSafeHtml(
+        '<span style="color:red">kırmızı</span> <a href="https://x.com">Instagram</a>'
+      )
+    ).toBe('kırmızı Instagram');
+  });
+
+  it('removes scripts, styles and event handlers', () => {
+    expect(toSafeHtml('<script>alert(1)</script>ok<style>p{}</style>')).toBe(
+      'ok'
+    );
+    expect(toSafeHtml('<img src=x onerror=alert(1)>')).toBe('');
+    expect(toSafeHtml('<p onclick="alert(1)">x</p>')).toBe('<p>x</p>');
+    expect(toSafeHtml('<a href="javascript:alert(1)">x</a>')).toBe('x');
+    expect(toSafeHtml('<scr<script></script>ipt>alert(1)</script>')).toBe(
+      'alert(1)'
+    );
+  });
+
+  it('never turns malformed tags into markup', () => {
+    expect(toSafeHtml('<p/onclick=alert(1)>x')).toBe(
+      '&lt;p/onclick=alert(1)&gt;x'
+    );
+    expect(toSafeHtml('<p title="&gt;<script>">x</p>')).not.toMatch(
+      /<script|onclick|onerror/i
+    );
+  });
+
+  it('balances tags so nothing leaks out of the container', () => {
+    expect(toSafeHtml('<b>Kargo bedava')).toBe('<b>Kargo bedava</b>');
+    expect(toSafeHtml('</b>x')).toBe('x');
+    expect(toSafeHtml('<b/>x')).toBe('x');
+    expect(toSafeHtml('<b><i>x</b>y</i>')).toBe('<b><i>x</i></b>y');
+  });
+});
+
+describe('toPlainText', () => {
+  it('strips tags, decodes common entities and collapses whitespace', () => {
+    expect(
+      toPlainText(
+        '<p>Kargo &amp; İade</p>\n<script>x</script><p>Hızlı&nbsp;teslimat</p>'
+      )
+    ).toBe('Kargo & İade Hızlı teslimat');
+    expect(toPlainText()).toBe('');
+  });
+});
+
+describe('toSafeColor', () => {
+  it('accepts plain colors', () => {
+    expect(toSafeColor('#7b9d76', '#000')).toBe('#7b9d76');
+    expect(toSafeColor(' rgb(10, 20, 30) ', '#000')).toBe('rgb(10, 20, 30)');
+    expect(toSafeColor('rgba(0 0 0 / 50%)', '#000')).toBe('rgba(0 0 0 / 50%)');
+    expect(toSafeColor('white', '#000')).toBe('white');
+  });
+
+  it('falls back for anything that could add declarations', () => {
+    expect(toSafeColor('red;position:fixed;inset:0', '#000')).toBe('#000');
+    expect(toSafeColor('url(https://tracker.example/p.gif)', '#000')).toBe(
+      '#000'
+    );
+    expect(toSafeColor(undefined, '#fff')).toBe('#fff');
+  });
+});
+
+describe('getSafeLinkProps', () => {
+  const siteUrl = 'https://shop.example.com';
+
+  it('keeps site-relative paths and same-site urls', () => {
+    expect(getSafeLinkProps('/list/?seller_ids=17', siteUrl)).toEqual({
+      href: '/list/?seller_ids=17'
+    });
+    expect(getSafeLinkProps('https://shop.example.com/x/', siteUrl)).toEqual({
+      href: 'https://shop.example.com/x/'
+    });
+  });
+
+  it('opens other http(s) urls in a new tab without passing link equity', () => {
+    expect(getSafeLinkProps('https://instagram.com/ayse', siteUrl)).toEqual({
+      href: 'https://instagram.com/ayse',
+      target: '_blank',
+      rel: 'nofollow ugc noopener noreferrer'
+    });
+  });
+
+  it('drops empty, protocol-relative and non-http links', () => {
+    expect(getSafeLinkProps(undefined, siteUrl)).toBeNull();
+    expect(getSafeLinkProps('  ', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('//evil.example', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('/\\evil.example', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('javascript:alert(1)', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('data:text/html,x', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('list/', siteUrl)).toBeNull();
+  });
+});

package/app-template/src/utils/sanitize.ts

@@ -0,0 +1,167 @@
+// Helpers for rendering third-party (e.g. seller-entered) content.
+
+const ALLOWED_TAGS = [
+  'b',
+  'strong',
+  'i',
+  'em',
+  'u',
+  'br',
+  'p',
+  'ul',
+  'ol',
+  'li',
+  'h2',
+  'h3',
+  'h4'
+];
+
+const VOID_TAGS = ['br'];
+
+const ESCAPED_CHARACTERS: Record<string, string> = {
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;'
+};
+
+const DROPPED_ELEMENTS = /<(script|style)\b[\s\S]*?<\/\1\s*>/gi;
+
+// `&` is escaped only when it does not already start a character reference,
+// so entities written by an editor (&amp;, &nbsp;, &#351;) keep rendering.
+const BARE_AMPERSAND = /&(?!(?:#\d{1,7}|#x[\da-f]{1,6}|[a-z][a-z\d]{1,31});)/gi;
+
+const ESCAPED_TAG = /&lt;(\/?)([a-z][a-z\d]*)(?:\s[\s\S]*?)?(\/?)&gt;/gi;
+
+// Everything is escaped first; then only the allowed tags are turned back into
+// markup, without any attribute, and balanced so nothing leaks past the
+// container. Other tags are removed and their text is kept.
+export const toSafeHtml = (value?: string) => {
+  if (!value) {
+    return '';
+  }
+
+  const openTags: string[] = [];
+  const escaped = value
+    .replace(DROPPED_ELEMENTS, '')
+    .replace(BARE_AMPERSAND, '&amp;')
+    .replace(/[<>"']/g, (character) => ESCAPED_CHARACTERS[character]);
+
+  const html = escaped.replace(
+    ESCAPED_TAG,
+    (_match, closing: string, name: string, selfClosing: string) => {
+      const tag = name.toLowerCase();
+
+      if (!ALLOWED_TAGS.includes(tag)) {
+        return '';
+      }
+
+      if (VOID_TAGS.includes(tag)) {
+        return closing ? '' : `<${tag}>`;
+      }
+
+      if (selfClosing) {
+        return '';
+      }
+
+      if (!closing) {
+        openTags.push(tag);
+        return `<${tag}>`;
+      }
+
+      const index = openTags.lastIndexOf(tag);
+
+      if (index === -1) {
+        return '';
+      }
+
+      return openTags
+        .splice(index)
+        .reverse()
+        .map((openTag) => `</${openTag}>`)
+        .join('');
+    }
+  );
+
+  return (
+    html +
+    openTags
+      .reverse()
+      .map((openTag) => `</${openTag}>`)
+      .join('')
+  );
+};
+
+const TEXT_ENTITIES: Record<string, string> = {
+  '&nbsp;': ' ',
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'"
+};
+
+export const toPlainText = (value?: string) =>
+  (value ?? '')
+    .replace(DROPPED_ELEMENTS, ' ')
+    .replace(/<[^>]*>/g, ' ')
+    .replace(
+      /&(?:nbsp|amp|lt|gt|quot|#39);/gi,
+      (entity) => TEXT_ENTITIES[entity.toLowerCase()]
+    )
+    .replace(/\s+/g, ' ')
+    .trim();
+
+const SAFE_COLOR =
+  /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\(\s*[\d.%]+(?:\s*[,/\s]\s*[\d.%]+){2,3}\s*\)|[a-z]{3,20})$/i;
+
+// Inline styles are not escaped by React beyond HTML entities, so a value
+// like `red;position:fixed` would add declarations; only plain colors pass.
+export const toSafeColor = (value: string | undefined, fallback: string) => {
+  const color = value?.trim();
+
+  return color && SAFE_COLOR.test(color) ? color : fallback;
+};
+
+const EXTERNAL_LINK_REL = 'nofollow ugc noopener noreferrer';
+
+const getHost = (url?: string) => {
+  try {
+    return new URL(url).host;
+  } catch {
+    return '';
+  }
+};
+
+// Site-relative paths and same-site urls are kept as is; other http(s) urls
+// open in a new tab without passing link equity; anything else is dropped.
+export const getSafeLinkProps = (
+  href?: string,
+  siteUrl: string = process.env.NEXT_PUBLIC_URL
+): { href: string; target?: string; rel?: string } | null => {
+  const value = href?.trim();
+
+  if (!value) {
+    return null;
+  }
+
+  if (/^\/(?![/\\])/.test(value)) {
+    return { href: value };
+  }
+
+  if (!/^https?:\/\//i.test(value)) {
+    return null;
+  }
+
+  const host = getHost(value);
+
+  if (!host) {
+    return null;
+  }
+
+  if (host === getHost(siteUrl)) {
+    return { href: value };
+  }
+
+  return { href: value, target: '_blank', rel: EXTERNAL_LINK_REL };
+};

package/app-template/src/views/category/category-info.tsx

@@ -7,6 +7,7 @@ import { CategoryHeader } from './category-header';
 import { Filters } from './filters';
 import { Pagination } from '@theme/components';
 import { ProductItem } from '@theme/views/product-item';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { GetCategoryResponse } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { setFacets, setMenuOpen } from '@theme/redux/reducers/category';
@@ -119,15 +120,20 @@ export default function ListPage(props: ListPageProps) {
                   'lg:grid-cols-3': layoutSize === 3
                 })}
               >
-                {data?.products?.map((product, index) => (
-                  <ProductItem
-                    key={product.pk}
-                    product={product}
-                    width={itemDimensions.width}
-                    height={itemDimensions.height}
-                    index={index}
-                  />
-                ))}
+                <PluginModule
+                  component={Component.RateReviewPlpProvider}
+                  props={{ products: data?.products ?? [] }}
+                >
+                  {data?.products?.map((product, index) => (
+                    <ProductItem
+                      key={product.pk}
+                      product={product}
+                      width={itemDimensions.width}
+                      height={itemDimensions.height}
+                      index={index}
+                    />
+                  ))}
+                </PluginModule>
               </div>
             </FavouriteProductIdsProvider>
             {data?.products?.length > 0 && (

package/app-template/src/views/data-source-page/__tests__/header.test.tsx

@@ -0,0 +1,173 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Header } from '../header';
+
+const mockPush = jest.fn();
+
+jest.mock('@akinon/next/hooks', () => ({
+  useLocalization: () => ({ t: (key: string) => key }),
+  useRouter: () => ({ push: mockPush })
+}));
+
+jest.mock('@akinon/next/components/image', () => ({
+  Image: ({ alt, src }: { alt: string; src: string }) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img alt={alt} src={src} />
+  )
+}));
+
+// `@theme/components` resolves to this module; jest keys mocks by resolved path.
+jest.mock('../../../components', () => ({
+  Button: ({ children, ...props }) => <button {...props}>{children}</button>,
+  Icon: ({ name }) => <i data-icon={name} />,
+  Link: ({ children, href, ...props }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  )
+}));
+
+const dataSource = {
+  pk: 17,
+  name: 'ayse-ticaret',
+  slug: 'ayse-ticaret',
+  title: 'Ayşe Ticaret'
+};
+
+const header = {
+  value: {
+    logo_link: '/ayse-ticaret/',
+    menu_1_title: 'Yeni Gelenler',
+    menu_1_link: '/yeni-gelenler/',
+    menu_2_title: 'İndirim',
+    menu_2_link: '',
+    search_placeholder: 'Ayşe Ticaret’te ara',
+    follow_button_title: 'Takip Et',
+    follow_button_background: '#ff0000',
+    follow_button_title_color: '#000000'
+  },
+  kwargs: {
+    value: {
+      logo: { url: 'https://cdn.example.com/logo.png' }
+    }
+  }
+};
+
+describe('Data source page header', () => {
+  beforeEach(() => {
+    mockPush.mockClear();
+  });
+
+  it('renders the store logo as the page heading with its link', () => {
+    render(<Header data={header} dataSource={dataSource} />);
+
+    const heading = screen.getByRole('heading', { level: 1 });
+
+    expect(heading).toContainElement(screen.getByAltText('Ayşe Ticaret'));
+    expect(screen.getByAltText('Ayşe Ticaret').closest('a')).toHaveAttribute(
+      'href',
+      '/ayse-ticaret/'
+    );
+  });
+
+  it('renders only the menu items that have a usable link', () => {
+    render(<Header data={header} dataSource={dataSource} />);
+
+    expect(screen.getByText('Yeni Gelenler')).toHaveAttribute(
+      'href',
+      '/yeni-gelenler/'
+    );
+    expect(screen.queryByText('İndirim')).not.toBeInTheDocument();
+    expect(screen.getAllByRole('listitem')).toHaveLength(1);
+  });
+
+  it('applies valid follow button colors and drops unsafe ones', () => {
+    const { rerender } = render(
+      <Header data={header} dataSource={dataSource} />
+    );
+
+    expect(screen.getByText('Takip Et')).toHaveStyle({
+      backgroundColor: '#ff0000',
+      color: '#000000'
+    });
+
+    rerender(
+      <Header
+        data={{
+          ...header,
+          value: {
+            ...header.value,
+            follow_button_background: 'red;position:fixed;inset:0',
+            follow_button_title_color: 'url(https://tracker.example/p.gif)'
+          }
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    expect(screen.getByText('Takip Et')).toHaveStyle({
+      backgroundColor: '#000000',
+      color: '#ffffff'
+    });
+    expect(screen.getByText('Takip Et').getAttribute('style')).not.toMatch(
+      /position|url\(/
+    );
+  });
+
+  it('falls back to the store name and the default placeholder', () => {
+    render(<Header data={{ value: {} }} dataSource={dataSource} />);
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Ayşe Ticaret' })
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Takip Et')).not.toBeInTheDocument();
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('searchbox', {
+        name: 'common.data_source_page.search_placeholder'
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the logo without a link when the link is unusable', () => {
+    render(
+      <Header
+        data={{
+          ...header,
+          value: { ...header.value, logo_link: 'javascript:alert(1)' }
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    expect(screen.getByAltText('Ayşe Ticaret').closest('a')).toBeNull();
+  });
+
+  it('searches inside the store with an encoded query', () => {
+    render(<Header data={header} dataSource={dataSource} />);
+
+    fireEvent.change(
+      screen.getByRole('searchbox', { name: 'Ayşe Ticaret’te ara' }),
+      { target: { value: '  kırmızı elbise & ceket ' } }
+    );
+    fireEvent.submit(screen.getByRole('search'));
+
+    expect(mockPush).toHaveBeenCalledWith(
+      '/list/?search_text=k%C4%B1rm%C4%B1z%C4%B1+elbise+%26+ceket&seller_ids=17'
+    );
+  });
+
+  it('lists all store products for a blank query', () => {
+    render(<Header data={header} dataSource={dataSource} />);
+
+    fireEvent.change(screen.getByTestId('data-source-page-search-input'), {
+      target: { value: '   ' }
+    });
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'common.data_source_page.search_button'
+      })
+    );
+
+    expect(mockPush).toHaveBeenCalledWith('/list/?seller_ids=17');
+  });
+});

package/app-template/src/views/data-source-page/__tests__/layout.test.tsx

@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/react';
+import { getWidgetData } from '@akinon/next/data/server';
+import DataSourcePageLayout from '../layout';
+
+jest.mock('server-only', () => ({}));
+
+jest.mock('@akinon/next/data/server', () => ({
+  getWidgetData: jest.fn()
+}));
+
+jest.mock('@akinon/next/utils/server-translation', () => ({
+  t: (key: string) => key
+}));
+
+jest.mock('../banner', () => ({
+  Banner: ({ data }) => <div data-testid="banner">{data?.value?.title}</div>
+}));
+jest.mock('../header', () => ({
+  Header: ({ dataSource }) => <div data-testid="header">{dataSource.pk}</div>
+}));
+jest.mock('../stories', () => ({
+  Stories: ({ data, storeName }) => (
+    <div data-testid="stories">
+      {data?.length} {storeName}
+    </div>
+  )
+}));
+jest.mock('../products', () => ({
+  Products: ({ data, dataSourcePk, allProductsText }) => (
+    <div data-testid="products">
+      {data?.products?.length} {dataSourcePk} {allProductsText}
+    </div>
+  )
+}));
+jest.mock('../footer', () => ({
+  Footer: ({ data }) => <div data-testid="footer">{data?.value?.title}</div>
+}));
+
+const mockGetWidgetData = getWidgetData as jest.Mock;
+
+const page = {
+  pk: 3,
+  data_source: {
+    pk: 17,
+    name: 'ayse-ticaret',
+    slug: 'ayse-ticaret',
+    title: 'Ayşe Ticaret'
+  },
+  widget: 'ayse-ticaret-0',
+  product_collection_widget: 'ayse-ticaret-collection',
+  is_active: true
+};
+
+describe('DataSourcePageLayout', () => {
+  it('composes the page from the landing page widgets', async () => {
+    mockGetWidgetData.mockImplementation(async ({ slug }) =>
+      slug === 'ayse-ticaret-0'
+        ? {
+            attributes: {
+              banner: { value: { title: 'Kış Koleksiyonu' } },
+              stories: [{ value: { title: 'a' } }, { value: { title: 'b' } }],
+              footer: { value: { title: 'Hakkında' } }
+            }
+          }
+        : { products: [{ pk: 1 }, { pk: 2 }, { pk: 3 }] }
+    );
+
+    render(await DataSourcePageLayout({ data: page }));
+
+    expect(mockGetWidgetData).toHaveBeenCalledTimes(2);
+    expect(mockGetWidgetData).toHaveBeenCalledWith({ slug: 'ayse-ticaret-0' });
+    expect(mockGetWidgetData).toHaveBeenCalledWith({
+      slug: 'ayse-ticaret-collection'
+    });
+    expect(screen.getByTestId('banner')).toHaveTextContent('Kış Koleksiyonu');
+    expect(screen.getByTestId('header')).toHaveTextContent('17');
+    expect(screen.getByTestId('stories')).toHaveTextContent('2 Ayşe Ticaret');
+    expect(screen.getByTestId('products')).toHaveTextContent(
+      '3 17 common.data_source_page.all_products'
+    );
+    expect(screen.getByTestId('footer')).toHaveTextContent('Hakkında');
+  });
+});