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

package/plugins/registerNodeIcmsPageComponents.ts

@@ -1,4 +1,8 @@
-import { NodeIcmsPage, NodeIcmsPageTeaser, NodeIcmsPageSearchResult } from '#components'
+import {
+  NodeIcmsPage,
+  NodeIcmsPageTeaser,
+  NodeIcmsPageSearchResult,
+} from '#components'
 
 export default defineNuxtPlugin(() => {
   const { register } = useEntityRegistry()
@@ -6,4 +10,4 @@ export default defineNuxtPlugin(() => {
   register('NodeIcmsPage', NodeIcmsPage)
   register('NodeIcmsPageTeaser', NodeIcmsPageTeaser)
   register('NodeIcmsPageSearchResult', NodeIcmsPageSearchResult)
-})
+})

package/plugins/siteShell.client.ts

@@ -0,0 +1,94 @@
+import { defineNuxtPlugin } from '#app'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import useDrupalUser from '../composables/useDrupalUser'
+import useSiteShell from '../composables/useSiteShell'
+import { drupalOrigin } from '../shared/drupalUrl'
+
+/**
+ * Bridge to the Drupal backend's site shell.
+ *
+ * Framed by the backend: tell it about route changes (it mirrors the path in
+ * its address bar and refreshes the top bar). The blökkli editor and preview
+ * need the whole window, so they leave the shell (the top window navigates to
+ * the frontend). Not framed: editors are taken into the shell whenever they
+ * are not editing, so browsing always happens in one UI. `?noshell` keeps the
+ * bare frontend for the browser session.
+ */
+export default defineNuxtPlugin({
+  name: 'icms-site-shell',
+  dependsOn: ['nuxt:router', 'drupal-user'],
+  setup(nuxtApp) {
+    // The backend of the domain the frontend runs on (docs/routing.md).
+    const backendOrigin = drupalOrigin(window.location)
+    const shell = useSiteShell()
+    const router = useRouter()
+
+    const framedByBackend = (): boolean => {
+      if (window.parent === window) {
+        return false
+      }
+      const ancestors = window.location.ancestorOrigins
+      if (ancestors && ancestors.length) {
+        return ancestors[0] === backendOrigin
+      }
+      return document.referrer.startsWith(backendOrigin)
+    }
+
+    const isEditing = (route: RouteLocationNormalizedLoaded) =>
+      !!(route.query.blokkliEditing || route.query.blokkliPreview)
+
+    if (framedByBackend()) {
+      shell.value.framed = true
+      const post = (type: string, data: Record<string, unknown>) =>
+        window.parent.postMessage({ type, ...data }, backendOrigin)
+      const announce = () =>
+        post('icms:navigate', {
+          path: router.currentRoute.value.fullPath,
+          title: document.title,
+        })
+      const leaveShell = () => {
+        window.top?.location.replace(window.location.href)
+      }
+      // The title is updated by useHead once the page has finished loading;
+      // query-only changes don't finish a page.
+      nuxtApp.hook('page:finish', () => {
+        setTimeout(announce, 100)
+      })
+      router.afterEach((to) => {
+        if (isEditing(to)) {
+          leaveShell()
+          return
+        }
+        setTimeout(announce, 100)
+      })
+      if (isEditing(router.currentRoute.value)) {
+        leaveShell()
+      }
+      return
+    }
+
+    const NO_SHELL_KEY = 'icms:noshell'
+    const noShell = (): boolean => {
+      try {
+        if ('noshell' in router.currentRoute.value.query) {
+          sessionStorage.setItem(NO_SHELL_KEY, '1')
+        }
+        return sessionStorage.getItem(NO_SHELL_KEY) === '1'
+      } catch {
+        return 'noshell' in router.currentRoute.value.query
+      }
+    }
+    const enterShell = (route: RouteLocationNormalizedLoaded) => {
+      if (
+        useDrupalUser().value.accessToolbar &&
+        !isEditing(route) &&
+        !noShell()
+      ) {
+        window.location.replace(backendOrigin + route.fullPath)
+      }
+    }
+    enterShell(router.currentRoute.value)
+    // Closing the editor navigates back to the page: return to the shell.
+    router.afterEach((to) => enterShell(to))
+  },
+})

package/queries/facetTermLabels.graphql

@@ -1,11 +1,7 @@
 query facetTermLabels($ids: [String!]!) {
   terms: entityQuery(
     entityType: TAXONOMY_TERM
-    filter: {
-      conditions: [
-        { field: "tid", value: $ids, operator: IN }
-      ]
-    }
+    filter: { conditions: [{ field: "tid", value: $ids, operator: IN }] }
   ) {
     items {
       ... on TaxonomyTerm {

package/queries/fragment.linkUrl.graphql

@@ -0,0 +1,12 @@
+fragment linkUrl on Url {
+  path
+  ... on EntityCanonicalUrl {
+    entity {
+      # Only media select an id here: it marks a link whose target (the file
+      # behind /media/{id}) is served by the backend, not by the Nuxt app.
+      ... on Media {
+        id
+      }
+    }
+  }
+}

package/queries/query.contentSearch.graphql

@@ -1,5 +1,20 @@
-query contentSearch($keys: String!, $language: String, $facets: [String!], $filter: SearchApiQueryFilterInput, $limit: Int, $offset: Int) {
-	searchApiQuery(indexId: "content_search", keys: $keys, language: $language, facets: $facets, filter: $filter, limit: $limit, offset: $offset) {
+query contentSearch(
+  $keys: String!
+  $language: String
+  $facets: [String!]
+  $filter: SearchApiQueryFilterInput
+  $limit: Int
+  $offset: Int
+) {
+  searchApiQuery(
+    indexId: "content_search"
+    keys: $keys
+    language: $language
+    facets: $facets
+    filter: $filter
+    limit: $limit
+    offset: $offset
+  ) {
     count
     facets {
       field

package/queries/query.initData.graphql

@@ -92,7 +92,7 @@ fragment globalConfig on TranslatableConfigPagesGlobal {
   }
   socialMediaLinks: fieldIcmsSocialMediaLinks {
     uri {
-      path
+      ...linkUrl
     }
   }
 }

package/scripts/create-shade.ts

@@ -98,7 +98,12 @@ async function main() {
   }
 
   const oklch = toOklch(parsed)
-  if (!oklch || oklch.l === undefined || oklch.c === undefined || oklch.h === undefined) {
+  if (
+    !oklch ||
+    oklch.l === undefined ||
+    oklch.c === undefined ||
+    oklch.h === undefined
+  ) {
     fail(`Could not convert color to OKLCH: ${rawColor}`)
   }
 
@@ -142,7 +147,9 @@ async function main() {
     ].join('\n')
   }).join('\n')
 
-  const themeShadeLines = SHADES.map((shade) => `  --color-${name}-${shade}: var(--${name}-${shade});`).join('\n')
+  const themeShadeLines = SHADES.map(
+    (shade) => `  --color-${name}-${shade}: var(--${name}-${shade});`,
+  ).join('\n')
 
   const fileContent = `:root {
   /* ${displayName}: ${hex} */
@@ -162,7 +169,9 @@ ${themeShadeLines}
   await writeFile(filePath, fileContent)
   await ensureColorsImport(colorsPath, fileName)
 
-  console.log(`Created ${fileName} from ${hex} with anchor shade ${anchorShade}`)
+  console.log(
+    `Created ${fileName} from ${hex} with anchor shade ${anchorShade}`,
+  )
 }
 
-await main()
+await main()

package/scripts/update-icms.ts

@@ -50,7 +50,9 @@ const pick = (dependencies?: Record<string, string>) =>
 const add = (packages: string[], flags: string[] = []) => {
   if (packages.length === 0) return
   console.log(`Updating ${packages.join(', ')}`)
-  const result = spawnSync('bun', ['add', ...flags, ...packages], { stdio: 'inherit' })
+  const result = spawnSync('bun', ['add', ...flags, ...packages], {
+    stdio: 'inherit',
+  })
   if (result.status !== 0) {
     fail(`Failed to update ${packages.join(', ')}`)
   }

package/server/__tests__/graphqlMiddleware.serverOptions.spec.ts

@@ -15,8 +15,8 @@ vi.mock('#nuxt-language-negotiation/config', () => ({
   langcodes: ['de', 'fr', 'it', 'en'],
 }))
 
-vi.mock('#shared/request', () => ({
-  buildProxyRequestHeaders: () => ({}),
+vi.mock('../utils/backendRequestHeaders', () => ({
+  buildBackendRequestHeaders: () => ({}),
 }))
 
 // Nitro auto-imports in the module under test, provided as globals: the h3

package/server/__tests__/turnstile.spec.ts

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { createEvent, createError, defineEventHandler, getHeader } from 'h3'
+import type { H3Event } from 'h3'
+import { IncomingMessage, ServerResponse } from 'node-mock-http'
+import {
+  TURNSTILE_ERROR_CODE,
+  TURNSTILE_TOKEN_HEADER,
+  isWebformSubmissionRequest,
+} from '../../utils/turnstile'
+
+// Nitro auto-imports in the module under test, provided as globals. The h3
+// helpers are the real ones; the runtime config and the Cloudflare call are
+// the two things a unit test has to control.
+const runtimeConfig = { turnstile: { secretKey: '' } }
+const verifyTurnstileToken = vi.fn()
+
+vi.stubGlobal('defineEventHandler', defineEventHandler)
+vi.stubGlobal('getHeader', getHeader)
+vi.stubGlobal('createError', createError)
+vi.stubGlobal('useRuntimeConfig', () => runtimeConfig)
+vi.stubGlobal('verifyTurnstileToken', verifyTurnstileToken)
+
+const middleware = (await import('../middleware/turnstile')).default
+
+function submissionEvent(headers: Record<string, string> = {}): H3Event {
+  const request = new IncomingMessage()
+  request.url = '/api/graphql/mutation/submitWebform'
+  request.method = 'POST'
+  Object.assign(request.headers, headers)
+
+  return createEvent(request, new ServerResponse(request))
+}
+
+function run(event: H3Event) {
+  return (middleware as unknown as (event: H3Event) => Promise<void>)(event)
+}
+
+describe('isWebformSubmissionRequest', () => {
+  it.each([
+    '/api/graphql/mutation/submitWebform',
+    '/api/graphql/mutation/submitWebform?__client=1',
+    // A project may change graphqlMiddleware.serverApiPrefix.
+    '/custom-prefix/mutation/submitWebform',
+  ])('matches %s', (path) => {
+    expect(isWebformSubmissionRequest(path)).toBe(true)
+  })
+
+  it.each([
+    '/api/graphql/query/route',
+    '/api/graphql/mutation/submitWebformSomethingElse',
+    '/de/veranstaltungen',
+    '',
+    undefined,
+  ])('does not match %s', (path) => {
+    expect(isWebformSubmissionRequest(path)).toBe(false)
+  })
+})
+
+describe('turnstile middleware', () => {
+  beforeEach(() => {
+    runtimeConfig.turnstile.secretKey = ''
+    verifyTurnstileToken.mockReset()
+  })
+
+  it('lets every request through while no secret key is configured', async () => {
+    await expect(run(submissionEvent())).resolves.toBeUndefined()
+    expect(verifyTurnstileToken).not.toHaveBeenCalled()
+  })
+
+  it('ignores requests that are not a webform submission', async () => {
+    runtimeConfig.turnstile.secretKey = 'secret'
+
+    const request = new IncomingMessage()
+    request.url = '/api/graphql/query/route'
+    const event = createEvent(request, new ServerResponse(request))
+
+    await expect(run(event)).resolves.toBeUndefined()
+    expect(verifyTurnstileToken).not.toHaveBeenCalled()
+  })
+
+  it('rejects a submission without a token', async () => {
+    runtimeConfig.turnstile.secretKey = 'secret'
+
+    await expect(run(submissionEvent())).rejects.toMatchObject({
+      statusCode: 403,
+      data: { code: TURNSTILE_ERROR_CODE },
+    })
+    expect(verifyTurnstileToken).not.toHaveBeenCalled()
+  })
+
+  it('rejects a submission Cloudflare does not verify', async () => {
+    runtimeConfig.turnstile.secretKey = 'secret'
+    verifyTurnstileToken.mockResolvedValue({
+      success: false,
+      'error-codes': ['invalid-input-response'],
+    })
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    await expect(
+      run(submissionEvent({ [TURNSTILE_TOKEN_HEADER]: 'a-token' })),
+    ).rejects.toMatchObject({
+      statusCode: 403,
+      data: { code: TURNSTILE_ERROR_CODE },
+    })
+    expect(verifyTurnstileToken).toHaveBeenCalledWith(
+      'a-token',
+      expect.anything(),
+    )
+  })
+
+  it('passes a verified submission through', async () => {
+    runtimeConfig.turnstile.secretKey = 'secret'
+    verifyTurnstileToken.mockResolvedValue({ success: true })
+
+    await expect(
+      run(submissionEvent({ [TURNSTILE_TOKEN_HEADER]: 'a-token' })),
+    ).resolves.toBeUndefined()
+  })
+})

package/server/api/icms/blokkli/last-changed.get.ts

@@ -0,0 +1,24 @@
+import { buildBackendRequestHeaders } from '../../../utils/backendRequestHeaders'
+
+/**
+ * Proxies paragraphs_blokkli's "last changed" poll to the Drupal backend.
+ *
+ * The blökkli preview polls this endpoint; the Drupal route is not reachable
+ * on the frontend domain when the backend runs on its own domain, and calling
+ * it there directly would be a cross-origin request.
+ */
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+  const entityType = String(query.entityType || '')
+  const entityUuid = String(query.entityUuid || '')
+  if (!/^[a-z_]+$/.test(entityType) || !/^[0-9a-f-]{36}$/i.test(entityUuid)) {
+    throw createError({ statusCode: 400, statusMessage: 'Invalid entity.' })
+  }
+
+  setResponseHeader(event, 'Cache-Control', 'private, no-store')
+  const config = useRuntimeConfig()
+  return $fetch<{ changed: number }>(
+    `${config.backendUrl}/paragraphs_blokkli/${entityType}/${entityUuid}/last_changed`,
+    { headers: buildBackendRequestHeaders(event) },
+  )
+})

package/server/api/icon/[...params].ts

@@ -2,6 +2,7 @@ import { getRouterParams, defaultContentType, defineEventHandler } from 'h3'
 import type { H3Event } from 'h3'
 import { optimize } from 'svgo'
 import { MAX_AGE } from '../../helpers'
+import { buildBackendRequestHeaders } from '../../utils/backendRequestHeaders'
 
 const config = useRuntimeConfig()
 
@@ -117,17 +118,10 @@ async function getIcon(
     return value
   }
 
-  const requestHeaders = getHeaders(event)
-  const host = requestHeaders.host || ''
-
   // Fetch the SVG markup.
   const url = `${config.backendUrl}/de/media/${id}/icon`
   const response = await $fetch.raw<Blob>(url, {
-    headers: {
-      host,
-      cookie: requestHeaders.cookie || '',
-      referer: requestHeaders.referer || '',
-    },
+    headers: buildBackendRequestHeaders(event),
   })
 
   const cacheability = extractCacheability(response, event)
@@ -197,4 +191,4 @@ export default defineEventHandler(async (event) => {
     // We don't want to return a message here, only an empty response.
     return EMPTY_RESPONSE
   }
-})
+})

package/server/graphqlMiddleware.serverOptions.ts

@@ -1,8 +1,11 @@
 import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options'
+import { getRequestURL } from 'h3'
 import { extractCacheability } from '../server/utils/cacheability'
 import { defaultLangcode, langcodes } from '#nuxt-language-negotiation/config'
 import { MAX_AGE, type GraphqlCacheability } from '../server/helpers'
-import { buildProxyRequestHeaders } from '#shared/request'
+import { buildBackendRequestHeaders } from '../server/utils/backendRequestHeaders'
+import { handoverAccessDeniedRoute } from '../server/utils/accessDeniedHandover'
+import { drupalOrigin } from '../shared/drupalUrl'
 
 export default defineGraphqlServerOptions<{
   extensions: {
@@ -22,13 +25,8 @@ export default defineGraphqlServerOptions<{
     return `${config.backendUrl}/${defaultLangcode}/graphql`
   },
   serverFetchOptions(event) {
-    const config = useRuntimeConfig()
-
     return {
-      headers: {
-        ...buildProxyRequestHeaders(event),
-        'x-drupal-graphql-token': config.drupalGraphqlToken,
-      },
+      headers: buildBackendRequestHeaders(event),
     }
   },
   onServerResponse(event, graphqlResponse, operation, operationName, context) {
@@ -83,7 +81,10 @@ export default defineGraphqlServerOptions<{
 
     // Return the GraphQL response.
     return {
-      data: graphqlResponse._data!.data,
+      data: handoverAccessDeniedRoute(
+        graphqlResponse._data!.data,
+        drupalOrigin(getRequestURL(event)),
+      ),
       errors: graphqlResponse._data!.errors,
       extensions: {
         cacheability: addCacheability ? cacheability : null,

package/server/helpers/index.ts

@@ -3,7 +3,6 @@ export type GraphqlCacheability = {
   tagsNuxt: string[]
   tagsCdn: string[]
   tagsDrupal: string[]
-  maxAge: number
   sharedMaxAge: number
 }
 

package/server/middleware/turnstile.ts

@@ -0,0 +1,51 @@
+import {
+  TURNSTILE_ERROR_CODE,
+  TURNSTILE_TOKEN_HEADER,
+  isWebformSubmissionRequest,
+} from '../../utils/turnstile'
+
+/**
+ * Verifies the Turnstile token before a webform submission reaches Drupal.
+ *
+ * `graphql_webform` submits through Webform's programmatic API, which bypasses
+ * the Form API — Drupal-side spam modules (honeypot, captcha, antibot) hook
+ * into `hook_form_alter()` and therefore never run on a decoupled submission.
+ * The check has to happen where the submission crosses the boundary, and it has
+ * to happen on the server: verifying in the component only would be skipped by
+ * anyone calling the mutation endpoint directly.
+ *
+ * Disabled, and completely transparent, while no secret key is configured.
+ */
+export default defineEventHandler(async (event) => {
+  if (!isWebformSubmissionRequest(event.path)) {
+    return
+  }
+
+  const secretKey = useRuntimeConfig(event).turnstile?.secretKey
+  if (!secretKey) {
+    return
+  }
+
+  const token = getHeader(event, TURNSTILE_TOKEN_HEADER)
+  if (!token) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Missing spam protection token.',
+      data: { code: TURNSTILE_ERROR_CODE },
+    })
+  }
+
+  const result = await verifyTurnstileToken(token, event)
+  if (!result?.success) {
+    console.warn(
+      '[turnstile] Rejected a webform submission:',
+      result?.['error-codes'] ?? 'no error codes returned',
+    )
+
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Spam protection check failed.',
+      data: { code: TURNSTILE_ERROR_CODE },
+    })
+  }
+})

package/server/plugins/frameAncestors.ts

@@ -0,0 +1,20 @@
+import { drupalOrigin } from '../../shared/drupalUrl'
+import { mergeFrameAncestors } from '../../shared/csp'
+
+/**
+ * Lets the Drupal backend frame the frontend (site shell).
+ *
+ * The backend is the "backend." subdomain of the domain the page was
+ * requested on (see docs/routing.md). The directive is merged into whatever
+ * Content-Security-Policy the rendered response already carries — a project's
+ * own policy keeps its other directives and sources.
+ */
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('render:response', (response, { event }) => {
+    const origin = drupalOrigin(getRequestURL(event))
+    response.headers['content-security-policy'] = mergeFrameAncestors(
+      response.headers['content-security-policy'],
+      ["'self'", origin],
+    ).join(', ')
+  })
+})

package/server/plugins/pageCache.ts

@@ -0,0 +1,59 @@
+import { removeResponseHeader } from 'h3'
+import { serverOptions } from '#nuxt-multi-cache/server-options'
+import {
+  applyCacheControlHeaders,
+  finalizeRouteCache,
+  resolvePageCacheConfig,
+  setRouteCacheStatusHeader,
+} from '../../cache/pageCache'
+
+/**
+ * Applies the page cache mode to every response (ICMS-268), see
+ * cache/pageCache.ts.
+ */
+export default defineNitroPlugin((nitroApp) => {
+  const config = resolvePageCacheConfig(useRuntimeConfig().pageCache)
+
+  // Without a bounded route storage nuxt-multi-cache falls back to an
+  // unbounded in-memory one, so pages are never stored then. This happens
+  // when a project's own server/multiCache.serverOptions.ts replaces the
+  // ICMS server options (modules/pageCache.ts) without one.
+  const routeDriver = serverOptions.route?.storage?.driver
+  const hasBoundedRouteStorage = !!routeDriver
+  if (hasBoundedRouteStorage && config.mode !== 'varnish') {
+    const maxSize = Number(routeDriver.options?.maxSize) || 0
+    console.info(
+      config.routeMaxSize === 0
+        ? '[icms] Page cache: off (routeMaxSize 0, the default in development)'
+        : `[icms] Page cache: ${(maxSize / 1024 / 1024).toFixed(1)} MiB` +
+            (config.routeMaxSize === 'auto' ? ' (auto)' : '') +
+            (config.routeCompression ? ', gzip' : ''),
+    )
+  }
+  if (!hasBoundedRouteStorage) {
+    console.error(
+      '[icms] Page cache disabled: the multi-cache server options define ' +
+        'no route storage. Extend the ICMS server options in ' +
+        'server/multiCache.serverOptions.ts (see the @iqual/nuxt-icms README).',
+    )
+  }
+
+  nitroApp.hooks.hook('beforeResponse', (event) => {
+    if (!hasBoundedRouteStorage) {
+      event.context.multiCache?.route?.setUncacheable()
+    }
+    finalizeRouteCache(event, config)
+    applyCacheControlHeaders(event, config)
+    setRouteCacheStatusHeader(event)
+  })
+
+  // Error responses (e.g. a 404 thrown during the render) are sent by the
+  // error handler without the beforeResponse hook. The headers of the error
+  // page render are applied on top, but a Cache-Tag the failed render already
+  // set would stay.
+  nitroApp.hooks.hook('error', (_error, { event }) => {
+    if (event && config.mode !== 'varnish') {
+      removeResponseHeader(event, 'cache-tag')
+    }
+  })
+})

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

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+import { handoverAccessDeniedRoute } from '../accessDeniedHandover'
+
+const origin = 'https://backend.www.example.com'
+
+describe('handoverAccessDeniedRoute', () => {
+  it('sends an access-denied route to the backend page directly', () => {
+    const data = {
+      route: {
+        __typename: 'RedirectUrl',
+        path: '/user/login?destination=/de/node/1/latest',
+        redirect: { statusCode: 403 },
+      },
+    }
+    expect(handoverAccessDeniedRoute(data, origin)).toEqual({
+      route: {
+        __typename: 'RedirectUrl',
+        path: 'https://backend.www.example.com/de/node/1/latest',
+        redirect: { statusCode: 302 },
+      },
+    })
+    // The response is not mutated.
+    expect(data.route.redirect.statusCode).toBe(403)
+  })
+
+  it('falls back to the login form without a usable destination', () => {
+    for (const path of ['/de/user/login', '/user/login?destination=//evil']) {
+      expect(
+        handoverAccessDeniedRoute(
+          { route: { path, redirect: { statusCode: 403 } } },
+          origin,
+        ).route?.path,
+      ).toBe(origin + path)
+    }
+  })
+
+  it('leaves other responses alone', () => {
+    const cases = [
+      { route: { path: '/de/neu', redirect: { statusCode: 301 } } },
+      { route: { path: '/user/login?destination=/x', redirect: null } },
+      { route: { __typename: 'EntityCanonicalUrl', path: '/de/x' } },
+      { route: null },
+      {},
+    ]
+    for (const data of cases) {
+      expect(handoverAccessDeniedRoute(data, origin)).toBe(data)
+    }
+  })
+})