@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.2

package/server/utils/__tests__/backendRequestHeaders.spec.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect, vi } from 'vitest'
+import { createEvent } from 'h3'
+import { IncomingMessage, ServerResponse } from 'node-mock-http'
+
+const metaMock = vi.hoisted(() => ({ importMetaClient: false }))
+vi.mock('#shared/importMeta', () => metaMock)
+
+// The app-level helper the layer builds on (frontend/shared/request.ts).
+vi.mock('#shared/request', async () => {
+  const { getRequestHeaders } = await import('h3')
+  const allowed = new Set([
+    'x-forwarded-host',
+    'x-forwarded-proto',
+    'x-forwarded-for',
+    'x-forwarded-port',
+    'x-client-ip',
+    'cookie',
+  ])
+  return {
+    buildProxyRequestHeaders: (
+      event: Parameters<typeof getRequestHeaders>[0],
+    ) => {
+      const out: Record<string, string> = {}
+      for (const [name, value] of Object.entries(getRequestHeaders(event))) {
+        if (allowed.has(name) && value) out[name] = value
+      }
+      return out
+    },
+  }
+})
+
+vi.stubGlobal('useRuntimeConfig', () => ({
+  drupalGraphqlToken: 'runtime-token',
+}))
+
+const { buildBackendRequestHeaders, GRAPHQL_TOKEN_HEADER } =
+  await import('../backendRequestHeaders')
+
+function eventWithHeaders(headers: Record<string, string>) {
+  const request = new IncomingMessage()
+  request.headers = headers
+  return createEvent(request, new ServerResponse(request))
+}
+
+describe('buildBackendRequestHeaders', () => {
+  it('sets the forwarded host and scheme from the request', () => {
+    expect(
+      buildBackendRequestHeaders(
+        eventWithHeaders({ host: 'www.example.com', cookie: 'SSESSabc=1' }),
+        'token',
+      ),
+    ).toEqual({
+      cookie: 'SSESSabc=1',
+      'x-forwarded-host': 'www.example.com',
+      'x-forwarded-proto': 'https',
+      [GRAPHQL_TOKEN_HEADER]: 'token',
+    })
+  })
+
+  it('overwrites forwarded headers sent by the client', () => {
+    expect(
+      buildBackendRequestHeaders(
+        eventWithHeaders({
+          host: 'www.example.com',
+          'x-forwarded-host': 'evil.example',
+          'x-forwarded-proto': 'http',
+        }),
+        'token',
+      ),
+    ).toMatchObject({
+      'x-forwarded-host': 'www.example.com',
+      'x-forwarded-proto': 'https',
+    })
+  })
+
+  it('drops forwarded headers Drupal does not trust', () => {
+    const headers = buildBackendRequestHeaders(
+      eventWithHeaders({
+        host: 'www.example.com',
+        'x-forwarded-for': '203.0.113.1',
+        'x-forwarded-port': '8443',
+        'x-client-ip': '198.51.100.7',
+      }),
+      'token',
+    )
+    expect(headers).not.toHaveProperty('x-forwarded-for')
+    expect(headers).not.toHaveProperty('x-forwarded-port')
+    // The router-set client IP is what Drupal uses as REMOTE_ADDR.
+    expect(headers['x-client-ip']).toBe('198.51.100.7')
+  })
+
+  it('drops a client-sent forwarded host without a Host header', () => {
+    expect(
+      buildBackendRequestHeaders(
+        eventWithHeaders({ 'x-forwarded-host': 'evil.example' }),
+        'token',
+      ),
+    ).not.toHaveProperty('x-forwarded-host')
+  })
+
+  it('sends the GraphQL token from the runtime config', () => {
+    expect(
+      buildBackendRequestHeaders(eventWithHeaders({ host: 'www.example.com' })),
+    ).toMatchObject({ [GRAPHQL_TOKEN_HEADER]: 'runtime-token' })
+  })
+
+  it('omits the token header when no token is configured', () => {
+    expect(
+      buildBackendRequestHeaders(
+        eventWithHeaders({ host: 'www.example.com' }),
+        '',
+      ),
+    ).not.toHaveProperty(GRAPHQL_TOKEN_HEADER)
+  })
+})

package/server/utils/accessDeniedHandover.ts

@@ -0,0 +1,48 @@
+/**
+ * The part of a route query response this module cares about.
+ */
+interface RouteQueryDataLike {
+  route?: {
+    __typename?: string
+    path?: string | null
+    redirect?: { statusCode?: number | null } | null
+  } | null
+}
+
+/**
+ * Hands a Drupal route the visitor may not access over to the backend.
+ *
+ * For a Drupal route that exists but is not accessible (e.g. a revision page
+ * for an anonymous visitor), the GraphQL route resolver answers with a
+ * redirect to Drupal's login form, with the path as ?destination. The login
+ * form lives on the backend domain — so does the page the visitor wanted —
+ * and following the redirect on the frontend would only get there through
+ * the router's /user redirect. Send the visitor to the page on the backend
+ * directly instead: Drupal then decides between its 403 and its login form.
+ */
+export function handoverAccessDeniedRoute<T>(
+  data: T,
+  backendOrigin: string,
+): T {
+  const route = (data as RouteQueryDataLike | null | undefined)?.route
+  if (
+    !route ||
+    route.redirect?.statusCode !== 403 ||
+    typeof route.path !== 'string' ||
+    !/^\/(?:[a-z]{2}\/)?user\/login(?:[/?]|$)/.test(route.path)
+  ) {
+    return data
+  }
+  const destination =
+    new URL(route.path, 'http://localhost').searchParams.get('destination') ||
+    ''
+  const path = /^\/(?!\/)/.test(destination) ? destination : route.path
+  return {
+    ...data,
+    route: {
+      ...route,
+      path: backendOrigin + path,
+      redirect: { ...route.redirect, statusCode: 302 },
+    },
+  } as T
+}

package/server/utils/backendRequestHeaders.ts

@@ -0,0 +1,51 @@
+import type { H3Event } from 'h3'
+import { getRequestHeader } from 'h3'
+import { buildProxyRequestHeaders } from '#shared/request'
+
+/**
+ * Carries the token Drupal and the frontend share (DRUPAL_GRAPHQL_TOKEN): it
+ * grants access to GraphQL, and Drupal only trusts X-Forwarded-Host and
+ * X-Forwarded-Proto on requests carrying it (see settings.php).
+ */
+export const GRAPHQL_TOKEN_HEADER = 'x-drupal-graphql-token'
+
+/**
+ * Forwarded headers not passed on: the host is set from the request below,
+ * and Drupal never trusts the others, which clients can set.
+ */
+const DROPPED_HEADERS = new Set([
+  'x-forwarded-host',
+  'x-forwarded-for',
+  'x-forwarded-port',
+  'x-forwarded-server',
+  'forwarded',
+])
+
+/**
+ * Headers for a server-side request to the Drupal backend.
+ *
+ * Extends the proxied request headers with the public host and scheme and the
+ * GraphQL token: Drupal derives the URLs it generates and the session cookie
+ * from X-Forwarded-Host. The host always comes from the request's Host header
+ * (the router only routes known domains), never from a client-sent
+ * X-Forwarded-Host.
+ */
+export function buildBackendRequestHeaders(
+  event: H3Event,
+  token: string = useRuntimeConfig().drupalGraphqlToken,
+): Record<string, string> {
+  const headers = Object.fromEntries(
+    Object.entries(buildProxyRequestHeaders(event)).filter(
+      ([name]) => !DROPPED_HEADERS.has(name),
+    ),
+  )
+  const host = getRequestHeader(event, 'host')
+  if (host) {
+    headers['x-forwarded-host'] = host
+  }
+  headers['x-forwarded-proto'] = 'https'
+  if (token) {
+    headers[GRAPHQL_TOKEN_HEADER] = token
+  }
+  return headers
+}

package/server/utils/cacheability.ts

@@ -2,7 +2,7 @@ import type { FetchResponse } from 'ofetch'
 import type { H3Event } from 'h3'
 import crypto from 'crypto'
 import { INTERVALS, MAX_AGE } from '../helpers'
-import type { ValidInterval } from '../helpers'
+import type { GraphqlCacheability, ValidInterval } from '../helpers'
 
 function extractCacheTags(
   response: FetchResponse<unknown>,
@@ -45,7 +45,7 @@ function calculateMaxAge(expires: string | null): number {
 export function extractCacheability(
   response: FetchResponse<unknown>,
   event: H3Event,
-) {
+): GraphqlCacheability {
   const hasSessionCookie = (event.node.req.headers.cookie || '').includes(
     'SSESS',
   )
@@ -53,7 +53,7 @@ export function extractCacheability(
   // cache the initData in the cache of nuxt_multi_cache in the frontend.
   const tagsNuxt = extractCacheTags(response, 'x-nuxt-cache-tags')
 
-  // These tags are provided by the  generic http purge module and 
+  // These tags are provided by the  generic http purge module and
   // used to invalidate SSR full page caches on varnish.
   const tagsCdn = extractCacheTags(response, 'purge-cache-tags')
 
@@ -136,4 +136,4 @@ export function buildFastlyCacheTags(input: string | string[]): string[] {
       .digest('base64')
       .substring(0, 6)
   })
-}
+}

package/shared/__tests__/blokkliState.spec.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest'
+import { withoutTranslationEditUrls } from '../blokkliState'
+
+describe('withoutTranslationEditUrls', () => {
+  it('removes the editUrl from every translation', () => {
+    const state = {
+      currentIndex: 2,
+      translationState: {
+        isTranslatable: true,
+        sourceLanguage: 'de',
+        translations: [
+          {
+            id: 'de',
+            url: '/de/seite',
+            editUrl: '/de/node/1/edit',
+            exists: true,
+            status: true,
+          },
+          {
+            id: 'fr',
+            url: '/fr/node/1',
+            editUrl:
+              '/fr/node/1/translations/add/de/fr?destination=/paragraphs_blokkli/redirect',
+            exists: false,
+            status: false,
+          },
+        ],
+      },
+    }
+
+    const result = withoutTranslationEditUrls(state)
+
+    expect(result.translationState.translations).toEqual([
+      { id: 'de', url: '/de/seite', exists: true, status: true },
+      { id: 'fr', url: '/fr/node/1', exists: false, status: false },
+    ])
+    expect(result.translationState.isTranslatable).toBe(true)
+    expect(result.translationState.sourceLanguage).toBe('de')
+    expect(result.currentIndex).toBe(2)
+    // The adapter's state is not mutated.
+    expect(state.translationState.translations[1].editUrl).toContain(
+      'translations/add',
+    )
+  })
+
+  it('returns the state as is without translations', () => {
+    const untranslatable = {
+      translationState: { isTranslatable: false, translations: [] },
+    }
+    expect(withoutTranslationEditUrls(untranslatable)).toBe(untranslatable)
+    const noState = { currentIndex: 0 }
+    expect(withoutTranslationEditUrls(noState)).toBe(noState)
+  })
+})

package/shared/__tests__/csp.spec.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { mergeFrameAncestors } from '../csp'
+
+const sources = ["'self'", 'https://backend.www.example.com']
+
+describe('mergeFrameAncestors', () => {
+  it('creates the policy when there is none', () => {
+    expect(mergeFrameAncestors(undefined, sources)).toEqual([
+      "frame-ancestors 'self' https://backend.www.example.com",
+    ])
+    expect(mergeFrameAncestors('', sources)).toEqual([
+      "frame-ancestors 'self' https://backend.www.example.com",
+    ])
+  })
+
+  it('appends the directive to a policy without one', () => {
+    expect(mergeFrameAncestors("default-src 'self'; ", sources)).toEqual([
+      "default-src 'self'; frame-ancestors 'self' https://backend.www.example.com",
+    ])
+  })
+
+  it('keeps existing sources and replaces none', () => {
+    expect(
+      mergeFrameAncestors(
+        "default-src 'self'; frame-ancestors 'self' https://other.example.org; img-src *",
+        sources,
+      ),
+    ).toEqual([
+      "default-src 'self'; frame-ancestors 'self' https://other.example.org https://backend.www.example.com; img-src *",
+    ])
+    expect(mergeFrameAncestors("frame-ancestors 'none'", sources)).toEqual([
+      "frame-ancestors 'self' https://backend.www.example.com",
+    ])
+    expect(
+      mergeFrameAncestors(
+        "frame-ancestors https://backend.www.example.com 'self'",
+        sources,
+      ),
+    ).toEqual(["frame-ancestors https://backend.www.example.com 'self'"])
+  })
+
+  it('merges into the right one of several header values', () => {
+    expect(
+      mergeFrameAncestors(
+        ["default-src 'self'", "frame-ancestors 'self'"],
+        sources,
+      ),
+    ).toEqual([
+      "default-src 'self'",
+      "frame-ancestors 'self' https://backend.www.example.com",
+    ])
+  })
+})

package/shared/__tests__/drupalUrl.spec.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { drupalOrigin, toDrupalUrl } from '../drupalUrl'
+
+describe('drupalOrigin', () => {
+  it('prefixes the request host with the backend subdomain', () => {
+    expect(drupalOrigin(new URL('https://www.example.com/de/about?x=1'))).toBe(
+      'https://backend.www.example.com',
+    )
+    expect(drupalOrigin(new URL('https://example.com/'))).toBe(
+      'https://backend.example.com',
+    )
+  })
+
+  it('keeps scheme and port', () => {
+    expect(drupalOrigin(new URL('http://starterkit.ddev.site:8080/'))).toBe(
+      'http://backend.starterkit.ddev.site:8080',
+    )
+  })
+})
+
+describe('toDrupalUrl', () => {
+  it('returns the path unchanged without a backend origin', () => {
+    expect(toDrupalUrl('/de/user/login')).toBe('/de/user/login')
+    expect(toDrupalUrl('/de/user/login', '')).toBe('/de/user/login')
+    expect(toDrupalUrl('/de/user/login', null)).toBe('/de/user/login')
+  })
+
+  it('prefixes the path with the backend origin', () => {
+    expect(
+      toDrupalUrl('/de/user/login', 'https://backend.www.example.com'),
+    ).toBe('https://backend.www.example.com/de/user/login')
+    expect(
+      toDrupalUrl(
+        '/paragraphs_blokkli/x?paragraphsBlokkli=true',
+        'https://backend.example.com/',
+      ),
+    ).toBe(
+      'https://backend.example.com/paragraphs_blokkli/x?paragraphsBlokkli=true',
+    )
+    expect(toDrupalUrl('de/user', 'https://backend.example.com')).toBe(
+      'https://backend.example.com/de/user',
+    )
+  })
+
+  it('leaves absolute URLs alone', () => {
+    expect(
+      toDrupalUrl('https://other.example.com/x', 'https://backend.example.com'),
+    ).toBe('https://other.example.com/x')
+  })
+})

package/shared/blokkliState.ts

@@ -0,0 +1,40 @@
+/**
+ * blökkli's mapped edit state, as far as this module cares.
+ */
+interface TranslationStateLike {
+  translationState?: {
+    translations?: Array<{ editUrl?: string | null }>
+  } | null
+}
+
+/**
+ * Drops the Drupal edit URLs from the translations of blökkli's state.
+ *
+ * paragraphs_blokkli sends an `editUrl` per language (Drupal's
+ * content-translation add or edit form with `?destination`), and blökkli's
+ * edit-form feature loads that URL directly when an editor creates a
+ * translation. It is a relative URL without the `paragraphsBlokkli` marker,
+ * so the iframe shows the form with Drupal's whole navigation and toolbar, and
+ * on a split domain it first lands on the frontend, which hands it over to the
+ * backend. Without the URL blökkli asks the adapter's form frame builder
+ * ("entity:translate") instead, whose paragraphs_blokkli route redirects to
+ * the same form with the marker and on the backend domain: the way the page
+ * settings ("entity:edit") open.
+ */
+export function withoutTranslationEditUrls<T extends TranslationStateLike>(
+  state: T,
+): T {
+  const translations = state.translationState?.translations
+  if (!translations?.length) {
+    return state
+  }
+  return {
+    ...state,
+    translationState: {
+      ...state.translationState,
+      translations: translations.map(
+        ({ editUrl: _editUrl, ...translation }) => translation,
+      ),
+    },
+  } as T
+}

package/shared/csp.ts

@@ -0,0 +1,47 @@
+/**
+ * Adds sources to the frame-ancestors directive of a Content-Security-Policy.
+ *
+ * A policy without the directive gets it appended, a policy that has one keeps
+ * its sources and gains the missing ones ('none' cannot be combined and is
+ * dropped); without any policy one is created. Several header values are
+ * merged into the first one that has the directive, or the first one.
+ */
+export function mergeFrameAncestors(
+  policy: string | string[] | number | undefined | null,
+  sources: string[],
+): string[] {
+  const policies = (Array.isArray(policy) ? policy : [policy])
+    .filter((p): p is string => typeof p === 'string' && p.trim() !== '')
+    .map((p) => p.trim())
+  if (!policies.length) {
+    return [`frame-ancestors ${sources.join(' ')}`]
+  }
+  let merged = false
+  const result = policies.map((p) => {
+    const directives = p
+      .split(';')
+      .map((d) => d.trim())
+      .filter(Boolean)
+      .map((directive) => {
+        const match = directive.match(/^frame-ancestors(?:\s+(.*))?$/i)
+        if (!match) {
+          return directive
+        }
+        const existing = (match[1] || '')
+          .split(/\s+/)
+          .filter((s) => s && s.toLowerCase() !== "'none'")
+        for (const source of sources) {
+          if (!existing.includes(source)) {
+            existing.push(source)
+          }
+        }
+        merged = true
+        return `frame-ancestors ${existing.join(' ')}`
+      })
+    return directives.join('; ')
+  })
+  if (!merged) {
+    result[0] = `${result[0]}; frame-ancestors ${sources.join(' ')}`
+  }
+  return result
+}

package/shared/drupalUrl.ts

@@ -0,0 +1,30 @@
+/**
+ * The subdomain label of the Drupal backend, see docs/routing.md.
+ */
+export const DRUPAL_SUBDOMAIN = 'backend'
+
+/**
+ * The browser-facing origin of the Drupal backend for a frontend URL.
+ *
+ * The frontend serves the public site on a domain of its own and Drupal is
+ * reachable on the "backend." subdomain of that same domain, so the backend
+ * origin follows from the request: https://www.example.com →
+ * https://backend.www.example.com, with scheme and port kept.
+ */
+export function drupalOrigin(frontendUrl: URL | Location): string {
+  return `${frontendUrl.protocol}//${DRUPAL_SUBDOMAIN}.${frontendUrl.host}`
+}
+
+/**
+ * Builds the browser-facing URL of a Drupal path.
+ *
+ * A Drupal path such as /de/user/login lives on the backend origin; without
+ * one the path is returned unchanged. Absolute URLs are never touched.
+ */
+export function toDrupalUrl(path: string, drupalUrl?: string | null): string {
+  if (!drupalUrl || /^[a-z][a-z0-9+.-]*:\/\//i.test(path)) {
+    return path
+  }
+  const base = drupalUrl.replace(/\/+$/, '')
+  return path.startsWith('/') ? base + path : `${base}/${path}`
+}

package/tailwind.config.ts

@@ -2,16 +2,11 @@ import type { Config } from 'tailwindcss'
 
 import plugin from 'tailwindcss/plugin'
 
-import { fileURLToPath } from 'url'
-import { dirname, join } from 'path'
-const currentDir = dirname(fileURLToPath(import.meta.url))
-
 const config: Config = {
   // Added as part of https://support-iqual.atlassian.net/browse/ICMS-312
   safelist: [{ pattern: /bg-gray-\d+/ }],
 
   plugins: [
-
     /**
      * Various additional variants
      */

package/types/breadcrumb.ts

@@ -0,0 +1,22 @@
+/**
+ * A single breadcrumb link, matching the `breadcrumb` GraphQL fragment in
+ * `components/Drupal/Breadcrumb/fragment.breadcrumb.graphql`.
+ *
+ * The fragment is not part of any operation in the base layer, so codegen does
+ * not emit a `BreadcrumbFragment` type for it. Layers that add a `breadcrumb`
+ * field to their route query produce the same shape.
+ */
+export type BreadcrumbLink = {
+  title: string
+  url?: {
+    path?: string
+  }
+}
+
+/**
+ * The part of a route query the breadcrumb is read from. Only layers that
+ * select the field have it, hence the optional, widened shape.
+ */
+export type RouteQueryWithBreadcrumb = {
+  route?: { breadcrumb?: (BreadcrumbLink | null)[] } | object | null
+}

package/types/global.ts

@@ -2,23 +2,24 @@ import type { RuntimeBlockOptions } from '#blokkli-build/runtime-options'
 
 export type ImageFormat = 'landscape' | 'portrait' | 'auto'
 
-export type ButtonStyle = RuntimeBlockOptions['icms_button_element']['buttonStyle']
+export type ButtonStyle =
+  RuntimeBlockOptions['icms_button_element']['buttonStyle']
 export type ButtonColor =
-  | 'error'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'info'
-  | 'warning'
-  | 'neutral'
-export type ButtonVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link'
+  'error' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'neutral'
+export type ButtonVariant =
+  'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link'
 
-export type CardVariant = RuntimeBlockOptions['icms_layout_cards']['cardVariant'] | undefined
-export type CollapsibleVariant = RuntimeBlockOptions['icms_layout_collapsible']['collapsibleVariant'] | undefined
-export type CallToActionVariant = RuntimeBlockOptions['icms_layout_call_to_action']['callToActionVariant']
-export type TeaserVariant = RuntimeBlockOptions['icms_layout_teasers']['teaserVariant']
+export type CardVariant =
+  RuntimeBlockOptions['icms_layout_cards']['cardVariant'] | undefined
+export type CollapsibleVariant =
+  | RuntimeBlockOptions['icms_layout_collapsible']['collapsibleVariant']
+  | undefined
+export type CallToActionVariant =
+  RuntimeBlockOptions['icms_layout_call_to_action']['callToActionVariant']
+export type TeaserVariant =
+  RuntimeBlockOptions['icms_layout_teasers']['teaserVariant']
 
 export type ColorScheme = 'none' | 'dark' | 'light' | 'accent' | undefined
 export type TeaserStyle = 'none' | 'highlight'
 export type AlignHorizontalFull = 'left' | 'center' | 'right' | undefined
-export type AlignHorizontalReduced = 'left' | 'right' | undefined
+export type AlignHorizontalReduced = 'left' | 'right' | undefined

package/types/langcode.ts

@@ -0,0 +1,16 @@
+/**
+ * The `Langcode` enum of the Drupal GraphQL schema.
+ *
+ * Codegen only emits schema enums that an operation actually references, so
+ * `#graphql-operations` does not export `Langcode` unless a query declares a
+ * variable of that type. The shape below mirrors what codegen would generate,
+ * so the values stay assignable to the generated type where it does exist.
+ */
+export const Langcode = Object.freeze({
+  DE: 'DE',
+  EN: 'EN',
+  FR: 'FR',
+  IT: 'IT',
+} as const)
+
+export type Langcode = (typeof Langcode)[keyof typeof Langcode]