feat: add CSP header to all the pages (#445)

* feat: initial CSP

* feat: add missing directives to load the content and scripts in the remaining pages

* fix: add Hotjar script

* docs: add comment describing the allowed lists

* fix: enhance `connect-src` directive with another Hotjar domain

src/components/common/MetaTags/index.tsx

@@ -1,4 +1,5 @@
 import { IS_PRODUCTION } from '@/config/constants'
+import { ContentSecurityPolicy } from '@/config/securityHeaders'
 import Head from 'next/head'
 
 const defaultMetaTags = {
@@ -31,6 +32,9 @@ const MetaTags = (props: Partial<typeof defaultMetaTags>) => {
 
       {!IS_PRODUCTION && <meta name="robots" content="noindex" />}
 
+      {/* CSP */}
+      <meta httpEquiv="Content-Security-Policy" content={ContentSecurityPolicy} />
+
       {/* Mobile tags */}
       <meta name="apple-mobile-web-app-capable" content="yes" />
       <meta name="apple-mobile-web-app-title" content="safe" />

src/config/securityHeaders.ts

@@ -0,0 +1,24 @@
+import { IS_PRODUCTION } from '@/config/constants'
+
+/**
+ * Notes:
+ * connect-src: Allows calls to Ashby's job board, Ecosystem DB API, Snapshot, Contentful and Hotjar.
+ * script-src: Allows scripts from Hotjar, and Google Tag Manager. In development, 'unsafe-eval' is allowed for inline scripts to facilitate debugging.
+ * img-src: Allows images from Contentful, Ecosystem DB for the project logos, Safe Claiming App for guardians images, and data URIs.
+ * frame-src: Allows iframes from Mirror, Youtube and JWPlayer.
+ */
+export const ContentSecurityPolicy = `
+ default-src 'self';
+ connect-src 'self' https://api.ashbyhq.com/posting-api/job-board/safe.global/ https://ecosystem-database.staging.5afe.dev/data.json https://hub.snapshot.org/graphql https://cdn.contentful.com/spaces/1i5gc724wjeu/ https://metrics.hotjar.io/ https://content.hotjar.io/ wss://ws.hotjar.com;
+ script-src 'self' ${
+   IS_PRODUCTION ? '' : "'unsafe-eval'"
+ } 'unsafe-inline' https://script.hotjar.com https://static.hotjar.com https://www.googletagmanager.com;
+ style-src 'self' 'unsafe-inline';
+ font-src 'self';
+ object-src 'none';
+ base-uri 'none';
+ img-src 'self' http://images.ctfassets.net/ https://ecosystem-database.staging.5afe.dev/logos/ https://safe-claiming-app-data.safe.global/guardians/images/ data:;
+ frame-src https://safe.mirror.xyz/ https://www.youtube-nocookie.com/ https://cdn.jwplayer.com/;
+`
+  .replace(/\s{2,}/g, ' ')
+  .trim()