chore(pdc-frontend): improve csp configuration

frameless · May 6, 2024 · 884a9e4 · 884a9e4
1 parent 9f99535
commit 884a9e4
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 71 deletions.
diff --git a/apps/pdc-frontend/src/middleware.ts b/apps/pdc-frontend/src/middleware.ts
@@ -1,9 +1,7 @@
 import acceptLanguage from 'accept-language';
-import { BLOB, DATA, EVAL, getCSP, INLINE, nonce, NONE, SELF, STRICT_DYNAMIC } from 'csp-header';
 import { NextRequest, NextResponse } from 'next/server';
-import { createOpenFormsApiUrl } from '@/util/openFormsSettings';
+import { cspDevelopmentHeader, cspProductionHeader } from '@/util/cspConfig';
 import { fallbackLng, languages } from './app/i18n/settings';
-
 acceptLanguage.languages(languages);
 
 export const config = {
@@ -12,74 +10,6 @@ export const config = {
 
 const cookieName = 'i18next';
 
-const getOpenFormsHost = () => {
- return createOpenFormsApiUrl()?.host || '';
-};
-
-// Using "//*" in JavaScript, especially with VSCode, can disrupt syntax highlighting and code analysis, causing confusion and hindering development.
-const formatURL = (url: string): string => `https://${url}`;
-
-const cspBase = {
- 'default-src': [SELF],
- 'object-src': [NONE],
- 'base-uri': [SELF],
- 'form-action': [SELF],
- 'frame-ancestors': [NONE],
- 'worker-src': [BLOB],
- 'connect-src': [
- SELF,
- getOpenFormsHost(),
- 'wss://virtuele-gemeente-assistent.nl',
- 'https://virtuele-gemeente-assistent.nl',
- DATA,
- BLOB,
- ],
- 'img-src': [
- SELF,
- getOpenFormsHost(),
- BLOB,
- DATA,
- 'https://service.pdok.nl',
- formatURL('*.siteimproveanalytics.io'),
- 'https://virtuele-gemeente-assistent.nl',
- 'https://mijn.virtuele-gemeente-assistent.nl',
- ],
- 'font-src': [SELF, getOpenFormsHost()],
- 'frame-src': ['https://www.youtube.com/embed/', 'https://www.youtube-nocookie.com/embed/'],
- 'block-all-mixed-content': true,
-};
-const cspDevelopmentHeader = () => {
- return getCSP({
- directives: {
- 'script-src': [
- SELF,
- INLINE,
- EVAL,
- getOpenFormsHost(),
- 'siteimproveanalytics.com',
- 'https://virtuele-gemeente-assistent.nl',
- ],
- 'style-src': [SELF, INLINE, 'localhost:8000'],
- ...cspBase,
- },
- });
-};
-
-const cspProductionHeader = (nonceValue: string) => {
- return getCSP({
- directives: {
- 'script-src': [SELF, nonce(nonceValue), STRICT_DYNAMIC, BLOB],
- 'style-src': [
- SELF,
- nonce(nonceValue),
- 'https://virtuele-gemeente-assistent.nl',
- 'https://mijn.virtuele-gemeente-assistent.nl',
- ],
- ...cspBase,
- },
- });
-};
-
 export function middleware(req: NextRequest) {
  const nonceValue = Buffer.from(crypto.randomUUID()).toString('base64');
 

diff --git a/apps/pdc-frontend/src/util/cspConfig.ts b/apps/pdc-frontend/src/util/cspConfig.ts
@@ -0,0 +1,83 @@
+import { BLOB, DATA, EVAL, getCSP, INLINE, nonce, NONE, SELF, STRICT_DYNAMIC } from 'csp-header';
+import { createOpenFormsApiUrl } from '@/util/openFormsSettings';
+// Using "//*" in JavaScript, especially with VSCode, can disrupt syntax highlighting and code analysis, causing confusion and hindering development.
+const formatURL = (url: string): string => `https://${url}`;
+const getOpenFormsHost = () => {
+ return createOpenFormsApiUrl()?.host || '';
+};
+
+const chatWidget = {
+ 'connect-src': ['wss://virtuele-gemeente-assistent.nl', 'https://virtuele-gemeente-assistent.nl'],
+ 'img-src': ['https://virtuele-gemeente-assistent.nl', 'https://mijn.virtuele-gemeente-assistent.nl'],
+ 'script-src': ['https://virtuele-gemeente-assistent.nl'],
+ 'style-src': ['https://virtuele-gemeente-assistent.nl', 'https://mijn.virtuele-gemeente-assistent.nl'],
+};
+const map = {
+ 'img-src': ['https://service.pdok.nl'],
+};
+
+const youtube = {
+ 'frame-src': ['https://www.youtube.com/embed/', 'https://www.youtube-nocookie.com/embed/'],
+};
+
+const siteimproveanalytics = {
+ 'script-src': [formatURL('siteimproveanalytics.com')],
+ 'img-src': [formatURL('*.siteimproveanalytics.io')],
+};
+
+const openForms = {
+ 'connect-src': [getOpenFormsHost()],
+ 'img-src': [getOpenFormsHost()],
+ 'script-src': [getOpenFormsHost()],
+ 'font-src': [getOpenFormsHost()],
+ 'style-src': [getOpenFormsHost()],
+};
+
+export const cspBase = {
+ 'default-src': [SELF],
+ 'object-src': [NONE],
+ 'base-uri': [SELF],
+ 'form-action': [SELF],
+ 'frame-ancestors': [NONE],
+ 'worker-src': [BLOB],
+ 'connect-src': [SELF, ...openForms['connect-src'], ...chatWidget['connect-src'], DATA, BLOB],
+ 'img-src': [
+ SELF,
+ ...openForms['img-src'],
+ BLOB,
+ DATA,
+ ...map['img-src'],
+ ...siteimproveanalytics['img-src'],
+ ...chatWidget['img-src'],
+ ],
+ 'font-src': [SELF, ...openForms['font-src']],
+ 'frame-src': [...youtube['frame-src']],
+ 'block-all-mixed-content': true,
+};
+
+export const cspDevelopmentHeader = () => {
+ return getCSP({
+ directives: {
+ 'script-src': [
+ SELF,
+ INLINE,
+ EVAL,
+ ...openForms['script-src'],
+ ...siteimproveanalytics['script-src'],
+ ...chatWidget['script-src'],
+ ],
+ 'style-src': [SELF, INLINE, ...openForms['style-src']],
+ ...cspBase,
+ },
+ });
+};
+
+export const cspProductionHeader = (nonceValue: string) => {
+ return getCSP({
+ directives: {
+ 'script-src': [SELF, nonce(nonceValue), STRICT_DYNAMIC, BLOB],
+ 'style-src': [SELF, nonce(nonceValue), ...chatWidget['style-src']],
+ ...cspBase,
+ },
+ });
+};
diff --git a/apps/pdc-frontend/src/util/index.ts b/apps/pdc-frontend/src/util/index.ts
@@ -3,6 +3,7 @@ export * from './apiSettings';
 export * from './buildAlternateLinks';
 export * from './create-url';
 export * from './createStrapiURL';
+export * from './cspConfig';
 export * from './fetchData';
 export * from './getAlphabeticallyProductsByLetter';
 export * from './getImageBaseUrl';