@faststore/core 4.9.3-dev.1 → 4.10.0-dev.0

package/src/components/ui/RichText/RichTextImageNode.ts

@@ -0,0 +1,163 @@
+import {
+  DecoratorNode,
+  type DOMExportOutput,
+  type EditorConfig,
+  type LexicalEditor,
+  type NodeKey,
+  type SerializedLexicalNode,
+  type Spread,
+} from 'lexical'
+
+export type ImageAlignment = 'left' | 'center' | 'right'
+
+export type SerializedRichTextImageNode = Spread<
+  {
+    type: 'image'
+    version: 1
+    src: string
+    altText: string
+    alignment: ImageAlignment
+    widthPercent: number
+  },
+  SerializedLexicalNode
+>
+
+const VALID_ALIGNMENTS = new Set<ImageAlignment>(['left', 'center', 'right'])
+const DEFAULT_ALIGNMENT: ImageAlignment = 'left'
+const DEFAULT_WIDTH_PERCENT = 100
+const RICH_TEXT_CONTENT_MAX_WIDTH = 720
+const DEFAULT_IMAGE_QUALITY = 8
+
+function resolveAlignment(alignment: unknown): ImageAlignment {
+  return VALID_ALIGNMENTS.has(alignment as ImageAlignment)
+    ? (alignment as ImageAlignment)
+    : DEFAULT_ALIGNMENT
+}
+
+function resolveWidthPercent(widthPercent: unknown): number {
+  if (typeof widthPercent !== 'number' || widthPercent <= 0) {
+    return DEFAULT_WIDTH_PERCENT
+  }
+
+  return Math.min(widthPercent, DEFAULT_WIDTH_PERCENT)
+}
+
+function withVtexResizeParams(src: string, widthPercent: number): string {
+  if (!src.includes('vtexassets') || !src.includes('/assets')) {
+    return src
+  }
+
+  try {
+    const url = new URL(src)
+    const targetWidth = Math.max(
+      1,
+      Math.round((RICH_TEXT_CONTENT_MAX_WIDTH * widthPercent) / 100)
+    )
+
+    url.searchParams.set('width', targetWidth.toString())
+    url.searchParams.set('aspect', 'true')
+    url.searchParams.set('quality', DEFAULT_IMAGE_QUALITY.toString())
+
+    return url.toString()
+  } catch {
+    return src
+  }
+}
+
+export class RichTextImageNode extends DecoratorNode<null> {
+  __src: string
+  __altText: string
+  __alignment: ImageAlignment
+  __widthPercent: number
+
+  constructor(
+    src: string,
+    altText: string,
+    alignment: ImageAlignment = DEFAULT_ALIGNMENT,
+    widthPercent: number = DEFAULT_WIDTH_PERCENT,
+    key?: NodeKey
+  ) {
+    super(key)
+    this.__src = src
+    this.__altText = altText
+    this.__alignment = resolveAlignment(alignment)
+    this.__widthPercent = resolveWidthPercent(widthPercent)
+  }
+
+  static getType(): string {
+    return 'image'
+  }
+
+  static clone(node: RichTextImageNode): RichTextImageNode {
+    return new RichTextImageNode(
+      node.__src,
+      node.__altText,
+      node.__alignment,
+      node.__widthPercent,
+      node.__key
+    )
+  }
+
+  static importDOM(): null {
+    return null
+  }
+
+  static importJSON(
+    serializedNode: SerializedRichTextImageNode
+  ): RichTextImageNode {
+    return new RichTextImageNode(
+      typeof serializedNode.src === 'string' ? serializedNode.src : '',
+      typeof serializedNode.altText === 'string' ? serializedNode.altText : '',
+      serializedNode.alignment,
+      serializedNode.widthPercent
+    )
+  }
+
+  exportJSON(): SerializedRichTextImageNode {
+    return {
+      type: 'image',
+      version: 1,
+      src: this.__src,
+      altText: this.__altText,
+      alignment: this.__alignment,
+      widthPercent: this.__widthPercent,
+    }
+  }
+
+  isInline(): boolean {
+    return false
+  }
+
+  createDOM(_config: EditorConfig, _editor: LexicalEditor): HTMLElement {
+    return document.createElement('div')
+  }
+
+  updateDOM(): boolean {
+    return false
+  }
+
+  decorate(): null {
+    return null
+  }
+
+  exportDOM(_editor: LexicalEditor): DOMExportOutput {
+    if (!this.__src) {
+      return { element: null }
+    }
+
+    const wrapper = document.createElement('div')
+    wrapper.dataset.fsRichTextImageWrapper = ''
+    wrapper.dataset.fsRichTextImageAlignment = this.__alignment
+
+    const img = document.createElement('img')
+    img.dataset.fsRichTextImage = ''
+    img.src = withVtexResizeParams(this.__src, this.__widthPercent)
+    img.alt = this.__altText
+    img.setAttribute('loading', 'lazy')
+    img.style.width = `${this.__widthPercent}%`
+
+    wrapper.append(img)
+
+    return { element: wrapper }
+  }
+}

package/src/pages/api/graphql.ts

@@ -11,6 +11,11 @@ import discoveryConfig from 'discovery.config'
 import { getJWTAutCookie } from 'src/utils/getCookie'
 import { getRequestHostname } from 'src/utils/getRequestHostname'
 import { isLocalHost } from 'src/utils/isLocalHost'
+import {
+  isHostAllowed,
+  removeCookieDomain,
+  singleForwardedHost,
+} from 'src/utils/trustedForwardedHost'
 import { shouldForceRefreshTokenForValidateSession } from 'src/utils/validateSessionRefreshToken'
 import { execute } from '../../server'
 import { logger } from '@faststore/diagnostics'
@@ -56,22 +61,10 @@ const shouldReplaceCookieDomain = ({
 }
 
 /**
- * Determines if host is eligible for domain normalization.
- */
-const isAllowedHost = ({
-  host,
-  allowList,
-}: {
-  host: string
-  allowList: string[]
-}) => {
-  const normalizedHost = host.toLowerCase()
-
-  return allowList.some((suffix) => normalizedHost.endsWith(suffix))
-}
-
-/**
- * Ensure the cookie domain matches the current host so the browser can store it.
+ * On allowlisted hosts (previews, localhost) the upstream cookie domain does not
+ * match the browser host, so the Domain attribute is dropped and the cookie
+ * becomes host-only. The host is never written into the cookie, so a forged
+ * x-forwarded-host cannot choose the cookie scope.
  */
 const normalizeSetCookieDomain = ({
   request,
@@ -85,20 +78,31 @@ const normalizeSetCookieDomain = ({
     return setCookie
   }
 
-  const host = getRequestHostname(request.headers.host)
+  // The preview ingress forwards a client-supplied x-forwarded-host as is, so
+  // it only decides whether the Domain is dropped, never which domain is used.
+  const forwardedHeader = request.headers['x-forwarded-host']
+  const forwardedHost = getRequestHostname(singleForwardedHost(forwardedHeader))
+  if (forwardedHeader && !forwardedHost) {
+    // The value is client-controllable, so it is not logged.
+    OTELLogger('warn', 'Ignoring multi-value or malformed x-forwarded-host')
+  }
+  const host =
+    forwardedHost && isHostAllowed(forwardedHost, ALLOWED_HOST_SUFFIXES)
+      ? forwardedHost
+      : getRequestHostname(request.headers.host)
   if (!host) {
     return setCookie
   }
   const cookieDomain = domainMatch[1]
 
   if (
-    !isAllowedHost({ host, allowList: ALLOWED_HOST_SUFFIXES }) ||
+    !isHostAllowed(host, ALLOWED_HOST_SUFFIXES) ||
     !shouldReplaceCookieDomain({ cookieDomain, host })
   ) {
     return setCookie
   }
 
-  return setCookie.replace(MATCH_DOMAIN_REGEXP, `; domain=${host}`)
+  return removeCookieDomain(setCookie)
 }
 
 const parseRequest = (request: NextApiRequest) => {

package/src/utils/trustedForwardedHost.ts

@@ -0,0 +1,50 @@
+// The result is written verbatim into a Set-Cookie Domain attribute, so
+// characters such as ";" or spaces would inject cookie attributes.
+const HOSTNAME_PATTERN = /^[a-z0-9.-]+$/
+
+/**
+ * An entry starting with "." matches subdomains only; any other entry matches
+ * the host itself and its subdomains. Matching is anchored on a label boundary,
+ * so "evil-localhost" never matches "localhost".
+ */
+export function isHostAllowed(host: string, allowList: string[]) {
+  const normalizedHost = host.toLowerCase()
+
+  if (!HOSTNAME_PATTERN.test(normalizedHost)) {
+    return false
+  }
+
+  return allowList.some((entry) =>
+    entry.startsWith('.')
+      ? normalizedHost.endsWith(entry)
+      : normalizedHost === entry || normalizedHost.endsWith(`.${entry}`)
+  )
+}
+
+/**
+ * Returns the `x-forwarded-host` value only when exactly one is present.
+ *
+ * Which hop of a proxy chain is trustworthy is not known here: with several
+ * values the leftmost one is whatever the client sent. So a multi-value header
+ * (comma-joined by Node, or an array) is ignored and the caller falls back to
+ * `host`. A single value still assumes the ingress overwrites the header.
+ */
+export function singleForwardedHost(
+  header: string | string[] | undefined
+): string | undefined {
+  if (Array.isArray(header)) {
+    return header.length === 1 ? singleForwardedHost(header[0]) : undefined
+  }
+
+  const value = header?.trim()
+
+  return value && !value.includes(',') ? value : undefined
+}
+
+/**
+ * Drops every Domain attribute so the cookie becomes host-only: the browser
+ * scopes it to the exact host it requested, whatever header picked this path.
+ */
+export function removeCookieDomain(setCookie: string): string {
+  return setCookie.replaceAll(/;\s*domain=[^;]*/gi, '')
+}

package/test/components/ui/RichText/RichText.browser.test.tsx

@@ -0,0 +1,321 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const isContentPlatformSourceMock = vi.hoisted(() => vi.fn(() => true))
+
+vi.mock('src/server/content/utils', () => ({
+  isContentPlatformSource: isContentPlatformSourceMock,
+}))
+
+import { RichText } from '../../../../src/components/ui/RichText/RichText'
+
+function textNode(text: string) {
+  return {
+    detail: 0,
+    format: 0,
+    mode: 'normal',
+    style: '',
+    text,
+    type: 'text',
+    version: 1,
+  }
+}
+
+function paragraphNode(children: unknown[]) {
+  return {
+    children,
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    type: 'paragraph',
+    version: 1,
+  }
+}
+
+function headingNode(text: string, tag = 'h2') {
+  return {
+    children: [textNode(text)],
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    type: 'heading',
+    version: 1,
+    tag,
+  }
+}
+
+function linkNode(url: string, text: string) {
+  return {
+    children: [textNode(text)],
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    type: 'link',
+    version: 1,
+    rel: null,
+    target: null,
+    title: null,
+    url,
+  }
+}
+
+function listNode(itemText: string) {
+  return {
+    children: [
+      {
+        children: [textNode(itemText)],
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        type: 'listitem',
+        version: 1,
+        value: 1,
+      },
+    ],
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    type: 'list',
+    version: 1,
+    listType: 'bullet',
+    start: 1,
+    tag: 'ul',
+  }
+}
+
+function imageNode(overrides: Record<string, unknown> = {}) {
+  return {
+    type: 'image',
+    version: 1,
+    src: 'https://storeaccount.vtexassets.com/assets/vtex.file-manager-graphql/images/abc123.png',
+    altText: 'A nice picture',
+    alignment: 'center',
+    widthPercent: 60,
+    ...overrides,
+  }
+}
+
+function lexicalContent(children: unknown[]) {
+  return JSON.stringify({
+    root: {
+      children,
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      type: 'root',
+      version: 1,
+    },
+  })
+}
+
+function draftJsContent(text: string) {
+  return JSON.stringify({
+    blocks: [
+      {
+        key: '1',
+        text,
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: {},
+      },
+    ],
+    entityMap: {},
+  })
+}
+
+describe('RichText', () => {
+  beforeEach(() => {
+    isContentPlatformSourceMock.mockReturnValue(true)
+  })
+
+  it('renders an image node with the correct src, alt, alignment and width', () => {
+    const { container } = render(
+      <RichText content={lexicalContent([imageNode()])} />
+    )
+
+    const wrapper = container.querySelector('[data-fs-rich-text-image-wrapper]')
+    const img = container.querySelector<HTMLImageElement>(
+      '[data-fs-rich-text-image]'
+    )
+
+    expect(wrapper?.getAttribute('data-fs-rich-text-image-alignment')).toBe(
+      'center'
+    )
+    expect(img?.getAttribute('alt')).toBe('A nice picture')
+    expect(img?.getAttribute('loading')).toBe('lazy')
+    expect(img?.getAttribute('style')).toBe('width: 60%;')
+
+    const src = img?.getAttribute('src') ?? ''
+    expect(src).toContain('width=432')
+    expect(src).toContain('aspect=true')
+    expect(src).toContain('quality=8')
+  })
+
+  it('renders images together with text, headings, links and lists in document order', () => {
+    const { container } = render(
+      <RichText
+        content={lexicalContent([
+          headingNode('Title'),
+          paragraphNode([
+            textNode('See '),
+            linkNode('https://example.com', 'this link'),
+          ]),
+          listNode('An item'),
+          imageNode(),
+        ])}
+      />
+    )
+
+    const html = container.innerHTML
+
+    expect(container.querySelector('h2')?.textContent).toBe('Title')
+    expect(
+      container.querySelector('a[href="https://example.com"]')
+    ).toBeTruthy()
+    expect(
+      container.querySelector('[data-fs-rich-text-list="true"]')
+    ).toBeTruthy()
+    expect(container.querySelector('[data-fs-rich-text-image]')).toBeTruthy()
+
+    const headingIndex = html.indexOf('<h2')
+    const linkIndex = html.indexOf('href="https://example.com"')
+    const listIndex = html.indexOf('data-fs-rich-text-list')
+    const imageIndex = html.indexOf('data-fs-rich-text-image-wrapper')
+
+    expect(headingIndex).toBeLessThan(linkIndex)
+    expect(linkIndex).toBeLessThan(listIndex)
+    expect(listIndex).toBeLessThan(imageIndex)
+  })
+
+  it('drops an image node with a missing src without breaking the rest of the content', () => {
+    const { container } = render(
+      <RichText
+        content={lexicalContent([
+          paragraphNode([textNode('Before')]),
+          imageNode({ src: '' }),
+          paragraphNode([textNode('After')]),
+        ])}
+      />
+    )
+
+    expect(container.querySelector('[data-fs-rich-text-image]')).toBeNull()
+    expect(
+      container.querySelector('[data-fs-rich-text-image-wrapper]')
+    ).toBeNull()
+    expect(container.textContent).toContain('Before')
+    expect(container.textContent).toContain('After')
+  })
+
+  it('does not throw and skips an image node with an unsupported/unexpected shape', () => {
+    expect(() =>
+      render(
+        <RichText
+          content={lexicalContent([
+            paragraphNode([textNode('Still here')]),
+            {
+              type: 'image',
+              version: 2,
+              imageUrl: 'https://storeaccount.vtexassets.com/assets/x.png',
+            },
+          ])}
+        />
+      )
+    ).not.toThrow()
+
+    const { container } = render(
+      <RichText
+        content={lexicalContent([
+          paragraphNode([textNode('Still here')]),
+          {
+            type: 'image',
+            version: 2,
+            imageUrl: 'https://storeaccount.vtexassets.com/assets/x.png',
+          },
+        ])}
+      />
+    )
+
+    expect(container.querySelector('[data-fs-rich-text-image]')).toBeNull()
+    expect(container.textContent).toContain('Still here')
+  })
+
+  it('renders multiple images, defaulting alignment/width when omitted and passing through non-VTEX URLs unmodified', () => {
+    const { container } = render(
+      <RichText
+        content={lexicalContent([
+          imageNode({ alignment: 'right', widthPercent: 30 }),
+          imageNode({
+            src: 'https://storeaccount.vtexassets.com/assets/vtex.file-manager-graphql/images/no-layout.png',
+            alignment: undefined,
+            widthPercent: undefined,
+          }),
+          imageNode({
+            src: 'https://cdn.example.com/external.png',
+            alignment: 'center',
+            widthPercent: 80,
+          }),
+        ])}
+      />
+    )
+
+    const wrappers = container.querySelectorAll(
+      '[data-fs-rich-text-image-wrapper]'
+    )
+    expect(wrappers).toHaveLength(3)
+
+    expect(wrappers[0].getAttribute('data-fs-rich-text-image-alignment')).toBe(
+      'right'
+    )
+
+    expect(wrappers[1].getAttribute('data-fs-rich-text-image-alignment')).toBe(
+      'left'
+    )
+    expect(
+      wrappers[1]
+        .querySelector('[data-fs-rich-text-image]')
+        ?.getAttribute('style')
+    ).toBe('width: 100%;')
+
+    const externalImg = wrappers[2].querySelector('[data-fs-rich-text-image]')
+    expect(externalImg?.getAttribute('src')).toBe(
+      'https://cdn.example.com/external.png'
+    )
+  })
+
+  it('clamps widthPercent to 100 so the image never overflows its container', () => {
+    const { container } = render(
+      <RichText content={lexicalContent([imageNode({ widthPercent: 150 })])} />
+    )
+
+    const img = container.querySelector('[data-fs-rich-text-image]')
+    expect(img?.getAttribute('style')).toBe('width: 100%;')
+  })
+
+  it('keeps rendering existing hCMS Draft.js content unaffected', () => {
+    isContentPlatformSourceMock.mockReturnValue(false)
+
+    const { container } = render(
+      <RichText content={draftJsContent('Hello legacy content')} />
+    )
+
+    expect(container.textContent).toContain('Hello legacy content')
+    expect(container.querySelector('[data-fs-rich-text-image]')).toBeNull()
+  })
+
+  it('keeps rendering existing Lexical content without images unaffected', () => {
+    const { container } = render(
+      <RichText
+        content={lexicalContent([paragraphNode([textNode('No images here')])])}
+      />
+    )
+
+    expect(container.textContent).toContain('No images here')
+    expect(container.querySelector('[data-fs-rich-text-image]')).toBeNull()
+  })
+})