CCM-9916: preload fonts with cross origin directive

frontend/src/__tests__/middleware.test.ts

@@ -165,7 +165,7 @@ describe('middleware function', () => {
     ]);
   });
 
-  it('when running in development mode, CSP script-src allows unsafe-eval', async () => {
+  it('when running in development mode, CSP script-src allows unsafe-eval and does not upgrade insecure requests', async () => {
     // @ts-expect-error assignment to const
     process.env.NODE_ENV = 'development';
 
@@ -189,7 +189,6 @@ describe('middleware function', () => {
         /^script-src 'self' 'nonce-[\dA-Za-z]+' 'unsafe-eval'$/
       ),
       expect.stringMatching(/^style-src 'self' 'nonce-[\dA-Za-z]+'$/),
-      'upgrade-insecure-requests',
       '',
     ]);
   });

frontend/src/middleware.ts

@@ -51,7 +51,7 @@ const publicPaths = [
 ];
 
 function getContentSecurityPolicy(nonce: string) {
-  const contentSecurityPolicyDirective = {
+  const contentSecurityPolicyDirective: Record<string, string[]> = {
     'base-uri': [`'self'`],
     'default-src': [`'none'`],
     'frame-ancestors': [`'none'`],
@@ -64,16 +64,18 @@ function getContentSecurityPolicy(nonce: string) {
     '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'`);
+  } else {
+    contentSecurityPolicyDirective['upgrade-insecure-requests'] = [];
   }
 
   return Object.entries(contentSecurityPolicyDirective)
     .map(([key, value]) => `${key} ${value.join(' ')}`)
-    .join('; ');
+    .join('; ')
+    .concat(';');
 }
 
 export async function middleware(request: NextRequest) {

frontend/src/styles/app.scss

@@ -1,5 +1,35 @@
 @use 'nhsuk-frontend/dist/nhsuk';
 
+// CCM-9916 - Override @font-face rules from nhsuk-frontend to reference self-hosted fonts
+@font-face {
+  font-display: swap;
+  font-family: Frutiger W01;
+  font-style: normal;
+  font-weight: 400;
+  src: url(/templates/lib/assets/fonts/FrutigerLTW01-55Roman.eot);
+  src:
+    url(/templates/lib/assets/fonts/FrutigerLTW01-55Roman.eot) format('eot'),
+    url(/templates/lib/assets/fonts/FrutigerLTW01-55Roman.woff2) format('woff2'),
+    url(/templates/lib/assets/fonts/FrutigerLTW01-55Roman.woff) format('woff'),
+    url(/templates/lib/assets/fonts/FrutigerLTW01-55Roman.ttf)
+      format('truetype'),
+    url(/templates/lib/assets/fonts/FrutigerLTW01-55Roman.svg) format('svg');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Frutiger W01;
+  font-style: normal;
+  font-weight: 600;
+  src: url(/templates/lib/assets/fonts/FrutigerLTW01-65Bold.eot);
+  src:
+    url(/templates/lib/assets/fonts/FrutigerLTW01-65Bold.eot) format('eot'),
+    url(/templates/lib/assets/fonts/FrutigerLTW01-65Bold.woff2) format('woff2'),
+    url(/templates/lib/assets/fonts/FrutigerLTW01-65Bold.woff) format('woff'),
+    url(/templates/lib/assets/fonts/FrutigerLTW01-65Bold.ttf) format('truetype'),
+    url(/templates/lib/assets/fonts/FrutigerLTW01-65Bold.svg) format('svg');
+}
+
 body {
   // This is here because amplify applies a min height which overwrites nhsuk causing a white space
   min-height: auto !important;