From e2b5f6ce5f156202860a15d8aa0a269376ce13c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eray=20Ayd=C4=B1n?= <eray.aydin@fingerprint.com>
Date: Mon, 20 Jan 2025 01:37:46 +0300
Subject: [PATCH] feat: add nonce-based csp to style

Implemented `generateRandom` string utility function to create random
strings. Updated `handleStatus` to accept a `styleNonce` parameter
and added CSP headers to include `style-src` nonce. This decision
has been made because of easy testing. Modified `renderHtml` in
`handleStatus` to include the `nonce` attribute in the `<style>`
tag. Fixed snapshot tests to accept new `styleNonce` property.

Related-Task: INTER-426
---
 proxy/app.ts                                  |  3 +-
 proxy/handlers/handleStatus.ts                | 21 +++++++++---
 .../__snapshots__/handleStatus.test.ts.snap   |  9 ++++--
 proxy/test/handlers/handleStatus.test.ts      | 32 +++++++++++++++----
 proxy/utils/index.ts                          |  2 ++
 proxy/utils/string.ts                         |  9 ++++++
 6 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 proxy/utils/string.ts
diff --git a/proxy/app.ts b/proxy/app.ts
index 070ca95a..bec84b3b 100644
--- a/proxy/app.ts
+++ b/proxy/app.ts
@@ -13,6 +13,7 @@ import {
   getLoaderVersion,
   setLogLevel,
   createRoute,
+  generateRandom,
 } from './utils'
 import { CustomerVariables } from './utils/customer-variables/customer-variables'
 import { HeaderCustomerVariables } from './utils/customer-variables/header-customer-variables'
@@ -112,7 +113,7 @@ function handleStatusPage(
   _: CloudFrontRequest,
   customerVariables: CustomerVariables
 ): Promise<CloudFrontResultResponse> {
-  return handleStatus(customerVariables)
+  return handleStatus(customerVariables, generateRandom())
 }
 
 export const handler = async (event: CloudFrontRequestEvent): Promise<CloudFrontResultResponse> => {
diff --git a/proxy/handlers/handleStatus.ts b/proxy/handlers/handleStatus.ts
index dd06bc25..f2cc5d21 100644
--- a/proxy/handlers/handleStatus.ts
+++ b/proxy/handlers/handleStatus.ts
@@ -15,6 +15,7 @@ export interface EnvVarInfo {
 export interface StatusInfo {
   version: string
   envInfo: EnvVarInfo[]
+  styleNonce: string
 }
 
 async function getEnvInfo(customerVariables: CustomerVariables) {
@@ -64,13 +65,13 @@ function renderEnvInfo(envInfo: EnvVarInfo[]) {
   `
 }
 
-function renderHtml({ version, envInfo }: StatusInfo) {
+function renderHtml({ version, envInfo, styleNonce }: StatusInfo) {
   return `
     <html lang="en-US">
       <head>
         <title>CloudFront integration status</title>
         <meta charset="utf-8">
-        <style>
+        <style nonce='${styleNonce}'>
           body, .env-info {
             display: flex;
           }
@@ -99,21 +100,31 @@ function renderHtml({ version, envInfo }: StatusInfo) {
   `
 }
 
-export async function getStatusInfo(customerVariables: CustomerVariables): Promise<StatusInfo> {
+export async function getStatusInfo(customerVariables: CustomerVariables, styleNonce: string): Promise<StatusInfo> {
   return {
     version: '__lambda_func_version__',
     envInfo: await getEnvInfo(customerVariables),
+    styleNonce,
   }
 }
 
-export async function handleStatus(customerVariables: CustomerVariables): Promise<CloudFrontResultResponse> {
-  const body = await getStatusInfo(customerVariables)
+export async function handleStatus(
+  customerVariables: CustomerVariables,
+  styleNonce: string
+): Promise<CloudFrontResultResponse> {
+  const body = await getStatusInfo(customerVariables, styleNonce)
 
   return {
     status: '200',
     body: renderHtml(body).trim(),
     headers: {
       'content-type': [{ key: 'Content-Type', value: 'text/html' }],
+      'content-security-policy': [
+        {
+          key: 'Content-Security-Policy',
+          value: `default-src 'none'; img-src https://fingerprint.com; style-src 'nonce-${styleNonce}'`,
+        },
+      ],
     },
   }
 }
diff --git a/proxy/test/handlers/__snapshots__/handleStatus.test.ts.snap b/proxy/test/handlers/__snapshots__/handleStatus.test.ts.snap
index 40ffe191..d05b2870 100644
--- a/proxy/test/handlers/__snapshots__/handleStatus.test.ts.snap
+++ b/proxy/test/handlers/__snapshots__/handleStatus.test.ts.snap
@@ -39,6 +39,7 @@ exports[`Get status info returns correct response with empty non obfuscated vari
       "value": "api.fpjs.io",
     },
   ],
+  "styleNonce": "hardcodedStyleNonce",
   "version": "__lambda_func_version__",
 }
 `;
@@ -82,6 +83,7 @@ exports[`Get status info returns correct response with empty pre shared secret 1
       "value": "api.fpjs.io",
     },
   ],
+  "styleNonce": "hardcodedStyleNonce",
   "version": "__lambda_func_version__",
 }
 `;
@@ -125,6 +127,7 @@ exports[`Get status info returns correct status info 1`] = `
       "value": "api.fpjs.io",
     },
   ],
+  "styleNonce": "hardcodedStyleNonce",
   "version": "__lambda_func_version__",
 }
 `;
@@ -134,7 +137,7 @@ exports[`Handle status returns correct status info in html if all variables are
       <head>
         <title>CloudFront integration status</title>
         <meta charset="utf-8">
-        <style>
+        <style nonce='hardcodedStyleNonce'>
           body, .env-info {
             display: flex;
           }
@@ -171,7 +174,7 @@ exports[`Handle status returns correct status info in html if some variables are
       <head>
         <title>CloudFront integration status</title>
         <meta charset="utf-8">
-        <style>
+        <style nonce='hardcodedStyleNonce'>
           body, .env-info {
             display: flex;
           }
@@ -211,7 +214,7 @@ exports[`Handle status returns correct status info in html if some variables are
       <head>
         <title>CloudFront integration status</title>
         <meta charset="utf-8">
-        <style>
+        <style nonce='hardcodedStyleNonce'>
           body, .env-info {
             display: flex;
           }
diff --git a/proxy/test/handlers/handleStatus.test.ts b/proxy/test/handlers/handleStatus.test.ts
index 7c8c28ff..0f52a9ae 100644
--- a/proxy/test/handlers/handleStatus.test.ts
+++ b/proxy/test/handlers/handleStatus.test.ts
@@ -2,14 +2,22 @@ import { getInMemoryCustomerVariables } from '../utils/customer-variables/in-mem
 import { CustomerVariableType } from '../../utils/customer-variables/types'
 import { getStatusInfo, handleStatus } from '../../handlers/handleStatus'
 
+const styleNonce = 'hardcodedStyleNonce'
+
 describe('Handle status', () => {
   it('returns correct status info in html if all variables are set', async () => {
     const { customerVariables } = getInMemoryCustomerVariables()
 
-    const result = await handleStatus(customerVariables)
+    const result = await handleStatus(customerVariables, styleNonce)
 
     expect(result.headers).toEqual({
       'content-type': [{ key: 'Content-Type', value: 'text/html' }],
+      'content-security-policy': [
+        {
+          key: 'Content-Security-Policy',
+          value: `default-src 'none'; img-src https://fingerprint.com; style-src 'nonce-${styleNonce}'`,
+        },
+      ],
     })
 
     expect(result.body).toMatchSnapshot()
@@ -22,10 +30,16 @@ describe('Handle status', () => {
     variables.fpjs_agent_download_path = null
     variables.fpjs_get_result_path = null
 
-    const result = await handleStatus(customerVariables)
+    const result = await handleStatus(customerVariables, styleNonce)
 
     expect(result.headers).toEqual({
       'content-type': [{ key: 'Content-Type', value: 'text/html' }],
+      'content-security-policy': [
+        {
+          key: 'Content-Security-Policy',
+          value: `default-src 'none'; img-src https://fingerprint.com; style-src 'nonce-${styleNonce}'`,
+        },
+      ],
     })
 
     expect(result.body).toMatchSnapshot()
@@ -36,10 +50,16 @@ describe('Handle status', () => {
 
     variables.fpjs_pre_shared_secret = null
 
-    const result = await handleStatus(customerVariables)
+    const result = await handleStatus(customerVariables, styleNonce)
 
     expect(result.headers).toEqual({
       'content-type': [{ key: 'Content-Type', value: 'text/html' }],
+      'content-security-policy': [
+        {
+          key: 'Content-Security-Policy',
+          value: `default-src 'none'; img-src https://fingerprint.com; style-src 'nonce-${styleNonce}'`,
+        },
+      ],
     })
 
     expect(result.body).toMatchSnapshot()
@@ -50,7 +70,7 @@ describe('Get status info', () => {
   it('returns correct status info', async () => {
     const { customerVariables } = getInMemoryCustomerVariables()
 
-    const result = await getStatusInfo(customerVariables)
+    const result = await getStatusInfo(customerVariables, styleNonce)
 
     expect(result).toMatchSnapshot()
   })
@@ -59,7 +79,7 @@ describe('Get status info', () => {
     const { customerVariables, variables } = getInMemoryCustomerVariables()
     variables[CustomerVariableType.PreSharedSecret] = null
 
-    const result = await getStatusInfo(customerVariables)
+    const result = await getStatusInfo(customerVariables, styleNonce)
 
     expect(result).toMatchSnapshot()
   })
@@ -67,7 +87,7 @@ describe('Get status info', () => {
   it('returns correct response with empty non obfuscated variable', async () => {
     const { customerVariables } = getInMemoryCustomerVariables()
 
-    const result = await getStatusInfo(customerVariables)
+    const result = await getStatusInfo(customerVariables, styleNonce)
 
     expect(result).toMatchSnapshot()
   })
diff --git a/proxy/utils/index.ts b/proxy/utils/index.ts
index 8292e9be..50297495 100644
--- a/proxy/utils/index.ts
+++ b/proxy/utils/index.ts
@@ -20,6 +20,7 @@ import {
   addEndingTrailingSlashToRoute,
 } from './routing'
 import { setLogLevel } from './log'
+import { generateRandom } from './string'
 
 export {
   getAgentUri,
@@ -43,4 +44,5 @@ export {
   addPathnameMatchBeforeRoute,
   addEndingTrailingSlashToRoute,
   setLogLevel,
+  generateRandom,
 }
diff --git a/proxy/utils/string.ts b/proxy/utils/string.ts
new file mode 100644
index 00000000..64b4ec8f
--- /dev/null
+++ b/proxy/utils/string.ts
@@ -0,0 +1,9 @@
+export function generateRandom() {
+  let result = ''
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  const indices = crypto.getRandomValues(new Uint8Array(24))
+  for (const index of indices) {
+    result += characters[index % characters.length]
+  }
+  return btoa(result)
+}
