Merge pull request #264 from NHSDigital/feature/CCM-5340_csp-header

CCM-5340: Add CSP header with nonce for next generated inline scripts

Author: alexnuttall

frontend/src/__tests__/middleware.test.ts

@@ -0,0 +1,113 @@
+/**
+ * @jest-environment node
+ */
+import { NextRequest } from 'next/server';
+import { getAccessTokenServer } from '@utils/amplify-utils';
+import { middleware } from '../middleware';
+
+jest.mock('@utils/amplify-utils');
+
+const getTokenMock = jest.mocked(getAccessTokenServer);
+
+function getCsp(response: Response) {
+  const csp = response.headers.get('Content-Security-Policy');
+  return csp?.split(';').map((s) => s.trim());
+}
+
+const OLD_ENV = { ...process.env };
+afterAll(() => {
+  process.env = OLD_ENV;
+});
+
+describe('middleware function', () => {
+  it('if request path is protected, and no access token is obtained, redirect to auth page', async () => {
+    const url = new URL('https://url.com/manage-templates');
+    const request = new NextRequest(url);
+    const response = await middleware(request);
+
+    expect(response.status).toBe(307);
+    expect(response.headers.get('location')).toBe(
+      'https://url.com/auth?redirect=%2Ftemplates%2F%2Fmanage-templates'
+    );
+    expect(response.headers.get('Content-Type')).toBe('text/html');
+  });
+
+  it('if request path is protected, and access token is obtained, respond with CSP', async () => {
+    getTokenMock.mockResolvedValueOnce('token');
+
+    const url = new URL('https://url.com/manage-templates');
+    const request = new NextRequest(url);
+    const response = await middleware(request);
+    const csp = getCsp(response);
+
+    expect(csp).toEqual([
+      "base-uri 'self'",
+      "default-src 'none'",
+      "frame-ancestors 'none'",
+      "font-src 'self' https://assets.nhs.uk",
+      "form-action 'self'",
+      "frame-src 'self'",
+      "connect-src 'self' https://cognito-idp.eu-west-2.amazonaws.com",
+      "img-src 'self'",
+      "manifest-src 'self'",
+      "object-src 'none'",
+      expect.stringMatching(/^script-src 'self' 'nonce-[\dA-Za-z]+'$/),
+      expect.stringMatching(/^style-src 'self' 'nonce-[\dA-Za-z]+'$/),
+      'upgrade-insecure-requests',
+      '',
+    ]);
+  });
+
+  it('if request path is not protected, respond with CSP', async () => {
+    const url = new URL('https://url.com/create-and-submit-templates');
+    const request = new NextRequest(url);
+    const response = await middleware(request);
+    const csp = getCsp(response);
+
+    expect(csp).toEqual([
+      "base-uri 'self'",
+      "default-src 'none'",
+      "frame-ancestors 'none'",
+      "font-src 'self' https://assets.nhs.uk",
+      "form-action 'self'",
+      "frame-src 'self'",
+      "connect-src 'self' https://cognito-idp.eu-west-2.amazonaws.com",
+      "img-src 'self'",
+      "manifest-src 'self'",
+      "object-src 'none'",
+      expect.stringMatching(/^script-src 'self' 'nonce-[\dA-Za-z]+'$/),
+      expect.stringMatching(/^style-src 'self' 'nonce-[\dA-Za-z]+'$/),
+      'upgrade-insecure-requests',
+      '',
+    ]);
+  });
+
+  it('when running in development mode, CSP script-src allows unsafe-eval', async () => {
+    // @ts-expect-error assignment to const
+    process.env.NODE_ENV = 'development';
+
+    const url = new URL('https://url.com/create-and-submit-templates');
+    const request = new NextRequest(url);
+    const response = await middleware(request);
+    const csp = getCsp(response);
+
+    expect(csp).toEqual([
+      "base-uri 'self'",
+      "default-src 'none'",
+      "frame-ancestors 'none'",
+      "font-src 'self' https://assets.nhs.uk",
+      "form-action 'self'",
+      "frame-src 'self'",
+      "connect-src 'self' https://cognito-idp.eu-west-2.amazonaws.com",
+      "img-src 'self'",
+      "manifest-src 'self'",
+      "object-src 'none'",
+      expect.stringMatching(
+        /^script-src 'self' 'nonce-[\dA-Za-z]+' 'unsafe-eval'$/
+      ),
+      expect.stringMatching(/^style-src 'self' 'nonce-[\dA-Za-z]+'$/),
+      'upgrade-insecure-requests',
+      '',
+    ]);
+  });
+});

frontend/src/app/layout.tsx

@@ -9,6 +9,8 @@ export const metadata: Metadata = {
   description: content.global.mainLayout.description,
 };
 
+export const dynamic = 'force-dynamic';
+
 export default function RootLayout({
   children,
 }: {

frontend/src/middleware.ts

@@ -2,29 +2,84 @@ import { NextResponse, type NextRequest } from 'next/server';
 import { getAccessTokenServer } from '@utils/amplify-utils';
 import { getBasePath } from '@utils/get-base-path';
 
-function isExcludedPath(path: string, excludedPaths: string[]): boolean {
-  return excludedPaths.some((excludedPath) => path.startsWith(excludedPath));
+function getContentSecurityPolicy(nonce: string) {
+  const contentSecurityPolicyDirective = {
+    'base-uri': [`'self'`],
+    'default-src': [`'none'`],
+    'frame-ancestors': [`'none'`],
+    'font-src': [`'self'`, 'https://assets.nhs.uk'],
+    'form-action': [`'self'`],
+    'frame-src': [`'self'`],
+    'connect-src': [`'self'`, 'https://cognito-idp.eu-west-2.amazonaws.com'],
+    'img-src': [`'self'`],
+    'manifest-src': [`'self'`],
+    'object-src': [`'none'`],
+    'script-src': [`'self'`, `'nonce-${nonce}'`],
+    'style-src': [`'self'`, `'nonce-${nonce}'`],
+    'upgrade-insecure-requests;': [],
+  };
+
+  if (process.env.NODE_ENV === 'development') {
+    contentSecurityPolicyDirective['script-src'].push(`'unsafe-eval'`);
+  }
+
+  return Object.entries(contentSecurityPolicyDirective)
+    .map(([key, value]) => `${key} ${value.join(' ')}`)
+    .join('; ');
+}
+
+function isPublicPath(path: string, publicPaths: string[]): boolean {
+  return publicPaths.some((publicPath) => path.startsWith(publicPath));
 }
 
 export async function middleware(request: NextRequest) {
-  const excludedPaths = ['/create-and-submit-templates', '/auth'];
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
+
+  const csp = getContentSecurityPolicy(nonce);
+
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set('Content-Security-Policy', csp);
+
+  const publicPaths = ['/create-and-submit-templates', '/auth'];
 
-  if (isExcludedPath(request.nextUrl.pathname, excludedPaths)) {
-    return NextResponse.next();
+  if (isPublicPath(request.nextUrl.pathname, publicPaths)) {
+    const publicPathResponse = NextResponse.next({
+      request: {
+        headers: requestHeaders,
+      },
+    });
+
+    publicPathResponse.headers.set('Content-Security-Policy', csp);
+
+    return publicPathResponse;
   }
 
   const token = await getAccessTokenServer();
 
   if (!token) {
-    return Response.redirect(
+    const redirectResponse = NextResponse.redirect(
       new URL(
         `/auth?redirect=${encodeURIComponent(
           `${getBasePath()}/${request.nextUrl.pathname}`
         )}`,
         request.url
       )
     );
+
+    redirectResponse.headers.set('Content-Type', 'text/html');
+
+    return redirectResponse;
   }
+
+  const response = NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
+
+  response.headers.set('Content-Security-Policy', csp);
+
+  return response;
 }
 
 export const config = {
@@ -34,7 +89,8 @@ export const config = {
      * - _next/static (static files)
      * - _next/image (image optimization files)
      * - favicon.ico (favicon file)
+     * - lib/ (our static content)
      */
-    '/((?!_next/static|_next/image|favicon.ico).*)',
+    '/((?!_next/static|_next/image|favicon.ico|lib/).*)',
   ],
 };

package.json

@@ -14,6 +14,7 @@
     "create-amplify-outputs": "tsx ./scripts/create-amplify-outputs.ts",
     "create-backend-sandbox": "./scripts/create_backend_sandbox.sh",
     "destroy-backend-sandbox": "./scripts/destroy_backend_sandbox.sh",
+    "generate-dependencies": "npm run generate-dependencies --workspaces --if-present",
     "start": "npm run start --workspace frontend",
     "test:accessibility": "pa11y-ci -c ./tests/accessibility/.pa11y-ci.js",
     "test:unit": "npm run test:unit --workspaces",