@defra/lis-infra-ui-services 0.50.0 → 0.51.0

package/src/nunjucks/components/form/form.test.js

@@ -0,0 +1,172 @@
+// @vitest-environment jsdom
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import hapi from '@hapi/hapi'
+import { afterEach, describe, expect, test } from 'vitest'
+
+import { CSRF_TOKEN_HEADER, csrfPlugin } from '../../../csrf/index.js'
+import { createNunjucksConfig } from '../../plugin.js'
+
+const projectRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../../../test/fixtures/form-app'
+)
+const configValues = {
+  root: projectRoot,
+  assetPath: '/public',
+  serviceName: 'Example service',
+  isProduction: false,
+  'nunjucks.watch': false,
+  'nunjucks.noCache': true
+}
+const config = { get: (key) => configValues[key] }
+
+let server
+
+async function render({ view = 'form', form, token }) {
+  server = hapi.server()
+  await server.register(createNunjucksConfig({ config, logger: {} }))
+  await server.register({
+    plugin: csrfPlugin,
+    options: { tokenSource: 'header' }
+  })
+  server.route({
+    method: 'GET',
+    path: '/form',
+    handler: (_request, h) => h.view(view, { form })
+  })
+  await server.initialize()
+
+  const response = await server.inject({
+    method: 'GET',
+    url: '/form',
+    headers: token === undefined ? {} : { [CSRF_TOKEN_HEADER]: token }
+  })
+  document.body.innerHTML = response.result
+
+  return document.querySelector('form')
+}
+
+describe('lisForm()', () => {
+  afterEach(async () => {
+    document.body.innerHTML = ''
+    await server?.stop()
+    server = undefined
+  })
+
+  test('renders a novalidate POST form with the request token and the caller body', async () => {
+    // Act
+    const form = await render({
+      form: { action: '/holdings/12/345/6789/edit' },
+      token: 'request-token'
+    })
+
+    // Assert
+    expect(form.getAttribute('action')).toBe('/holdings/12/345/6789/edit')
+    expect(form.getAttribute('method')).toBe('post')
+    expect(form.hasAttribute('novalidate')).toBe(true)
+    expect(form.querySelector('input[type="hidden"]').name).toBe('_csrf')
+    expect(form.querySelector('input[name="_csrf"]').value).toBe(
+      'request-token'
+    )
+    expect(form.querySelector('button').textContent).toBe('Save')
+  })
+
+  test('escapes the token, action, classes and attributes', async () => {
+    // Arrange
+    const hostile = '"><script>alert(1)</script>'
+
+    // Act
+    const form = await render({
+      form: {
+        action: `/edit${hostile}`,
+        classes: `lis-form${hostile}`,
+        attributes: { 'data-module': hostile }
+      },
+      token: `token${hostile}`
+    })
+
+    // Assert
+    expect(document.querySelectorAll('script')).toHaveLength(0)
+    expect(form.getAttribute('action')).toBe(`/edit${hostile}`)
+    expect(form.className).toBe(`lis-form${hostile}`)
+    expect(form.dataset.module).toBe(hostile)
+    expect(form.querySelector('input[name="_csrf"]').value).toBe(
+      `token${hostile}`
+    )
+  })
+
+  test('renders the classes and attributes', async () => {
+    // Act
+    const form = await render({
+      form: {
+        action: '/edit',
+        classes: 'lis-form govuk-!-margin-bottom-6',
+        attributes: { id: 'edit-holding', 'data-module': 'lis-edit' }
+      },
+      token: 'request-token'
+    })
+
+    // Assert
+    expect(form.className).toBe('lis-form govuk-!-margin-bottom-6')
+    expect(form.id).toBe('edit-holding')
+    expect(form.dataset.module).toBe('lis-edit')
+  })
+
+  test('leaves the action out when none is given, posting to the page itself', async () => {
+    // Act
+    const form = await render({ form: {}, token: 'request-token' })
+
+    // Assert
+    expect(form.hasAttribute('action')).toBe(false)
+    expect(form.getAttribute('method')).toBe('post')
+  })
+
+  test('never puts the token in a GET form', async () => {
+    // Act
+    const form = await render({
+      form: { action: '/search', method: 'GET' },
+      token: 'request-token'
+    })
+
+    // Assert
+    expect(form.getAttribute('method')).toBe('GET')
+    expect(form.querySelector('input[name="_csrf"]')).toBeNull()
+  })
+
+  test('leaves the token field out when the request has no token, so the post is refused', async () => {
+    // Act
+    const form = await render({ form: { action: '/edit' } })
+
+    // Assert
+    expect(form.getAttribute('method')).toBe('post')
+    expect(form.querySelector('input[name="_csrf"]')).toBeNull()
+  })
+
+  test('takes an explicit csrfToken when imported without context', async () => {
+    // Act
+    const form = await render({
+      view: 'form-without-context',
+      form: { action: '/edit', csrfToken: 'explicit-token' },
+      token: 'request-token'
+    })
+
+    // Assert
+    expect(form.querySelector('input[name="_csrf"]').value).toBe(
+      'explicit-token'
+    )
+  })
+
+  test('cannot see the request token when imported without context, so renders no token field', async () => {
+    // Act
+    const form = await render({
+      view: 'form-without-context',
+      form: { action: '/edit' },
+      token: 'request-token'
+    })
+
+    // Assert
+    expect(form.querySelector('input[name="_csrf"]')).toBeNull()
+  })
+})

package/src/nunjucks/components/form/macro.njk

@@ -0,0 +1,3 @@
+{% macro lisForm(params = {}) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/src/nunjucks/components/form/template.njk

@@ -0,0 +1,18 @@
+{#
+  Import with context so the token comes from the page:
+  {% from "form/macro.njk" import lisForm with context %}
+  A GET form never carries the token, which would otherwise end up in the URL.
+  With no token the field is left out, so the post is refused: the macro was
+  imported without context, or the CSRF plugin is not registered.
+#}
+{% from "govuk/macros/attributes.njk" import govukAttributes %}
+
+{%- set method = params.method or "post" -%}
+{%- set token = params.csrfToken if params.csrfToken is defined else csrfToken -%}
+
+<form{% if params.action %} action="{{ params.action }}"{% endif %} method="{{ method }}"{% if params.classes %} class="{{ params.classes }}"{% endif %}{{ govukAttributes(params.attributes) }} novalidate>
+  {%- if method | lower != "get" and token %}
+  <input type="hidden" name="_csrf" value="{{ token }}">
+  {%- endif %}
+  {{ caller() if caller }}
+</form>

package/src/nunjucks/context.js

@@ -6,6 +6,7 @@ import { HUBS, getModuleById } from '@defra/lis-hubs-infra-registry'
 import { getAssetRoot } from '../asset-path.js'
 
 import { COOKIES_PATH, getCookiesPolicy } from '../cookies/cookies-policy.js'
+import { CSRF_PLUGIN_NAME } from '../csrf/constants.js'
 
 const HUB_SERVICE_NAME_PREFIX = 'lis-hubs-'
 
@@ -116,6 +117,7 @@ export function createNunjucksContextBuilder({
       cookiesPath: COOKIES_PATH,
       cookiesPolicy: getCookiesPolicy(request),
       isCookiesPage: request?.path === COOKIES_PATH,
+      csrfToken: request?.plugins?.[CSRF_PLUGIN_NAME]?.token,
       errorPages: errorPageLinks,
       getAssetPath(asset) {
         const viteAssetPath = viteManifest?.[asset]?.file

package/src/nunjucks/context.test.js

@@ -607,3 +607,41 @@ describe('createNunjucksContextBuilder() hasPermission()', () => {
     expect(error.message).toBe('hasPermission() requires a permission')
   })
 })
+
+describe('createNunjucksContextBuilder() csrfToken', () => {
+  test('exposes the token the CSRF plugin resolved for the request', () => {
+    // Arrange
+    const contextBuilder = createNunjucksContextBuilder({
+      config: createConfig(),
+      logger: {},
+      readFileSync: () => '{}'
+    })
+    const request = {
+      headers: {},
+      path: '/',
+      plugins: { 'lis-csrf': { token: 'resolved-token' } }
+    }
+
+    // Act
+    const context = contextBuilder(request)
+
+    // Assert
+    expect(context.csrfToken).toBe('resolved-token')
+  })
+
+  test('leaves the token undefined when the CSRF plugin is not registered', () => {
+    // Arrange
+    const contextBuilder = createNunjucksContextBuilder({
+      config: createConfig(),
+      logger: {},
+      readFileSync: () => '{}'
+    })
+    const request = { headers: {}, path: '/', plugins: {} }
+
+    // Act
+    const context = contextBuilder(request)
+
+    // Assert
+    expect(context.csrfToken).toBeUndefined()
+  })
+})

package/src/nunjucks/routes/auth/sign-out.njk

@@ -0,0 +1,20 @@
+{#
+  The Sign out link lands here: a GET never signs out, so the page asks for
+  the POST, carrying the CSRF token. Takes signOutHref, the path to post to.
+#}
+{% extends 'layouts/page.njk' %}
+{% from "form/macro.njk" import lisForm with context %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-l">Are you sure you want to sign out?</h1>
+      {% call lisForm({ action: signOutHref }) %}
+        <div class="govuk-button-group">
+          <button type="submit" class="govuk-button" data-module="govuk-button">Sign out</button>
+          <a class="govuk-link" href="/">Cancel</a>
+        </div>
+      {% endcall %}
+    </div>
+  </div>
+{% endblock %}

package/src/nunjucks/routes/auth/sign-out.test.js

@@ -0,0 +1,62 @@
+import path from 'node:path'
+import { createRequire } from 'node:module'
+import { fileURLToPath } from 'node:url'
+
+import nunjucks from 'nunjucks'
+import { describe, expect, test } from 'vitest'
+
+const routesRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..'
+)
+const layoutFixtureRoot = path.resolve(
+  routesRoot,
+  '../../../test/fixtures/nunjucks'
+)
+const componentsRoot = path.resolve(routesRoot, '../components')
+// The form component imports govuk-frontend's attributes macro.
+const govukRoot = path.join(
+  path.dirname(
+    createRequire(import.meta.url).resolve('govuk-frontend/package.json')
+  ),
+  'dist'
+)
+const environment = new nunjucks.Environment(
+  new nunjucks.FileSystemLoader([
+    routesRoot,
+    layoutFixtureRoot,
+    componentsRoot,
+    govukRoot
+  ]),
+  { autoescape: true, trimBlocks: true, lstripBlocks: true }
+)
+
+describe('sign out page', () => {
+  test('asks the user to confirm with a form posting the CSRF token, or cancel', () => {
+    // Arrange
+    const context = {
+      pageTitle: 'Are you sure you want to sign out?',
+      signOutHref: '/signout',
+      csrfToken: 'csrf-token'
+    }
+
+    // Act
+    const html = environment.render('auth/sign-out.njk', context)
+
+    // Assert
+    expect(html).toContain(
+      '<title>Are you sure you want to sign out? - Livestock Information</title>'
+    )
+    expect(html).toContain(
+      '<h1 class="govuk-heading-l">Are you sure you want to sign out?</h1>'
+    )
+    expect(html).toContain('<form action="/signout" method="post" novalidate>')
+    expect(html).toContain(
+      '<input type="hidden" name="_csrf" value="csrf-token">'
+    )
+    expect(html).toContain(
+      '<button type="submit" class="govuk-button" data-module="govuk-button">Sign out</button>'
+    )
+    expect(html).toContain('<a class="govuk-link" href="/">Cancel</a>')
+  })
+})