feat(security): add security headers

tavla/app/components/PreviewCarousel/index.tsx

@@ -76,7 +76,7 @@ function PreviewCarousel({ boards }: { boards: TBoard[] }) {
                     data-theme={currentBoard.theme ?? 'dark'}
                 >
                     <div
-                        style={{ display: 'flex' }}
+                        className="flex"
                         aria-label="Eksempel på avgangstavler"
                     >
                         <div

tavla/next.config.js

@@ -1,6 +1,37 @@
 const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
 const { withSentryConfig } = require("@sentry/nextjs");
 
+const commonConnectSrc = [
+    "'self'",
+    "https://api.entur.io",
+    "https://tavla-api.entur.no",
+    "https://tavla-api.dev.entur.no"
+]
+
+if (process.env.NODE_ENV == 'development') {
+    commonConnectSrc.push("http://*.identitytoolkit.googleapis.com http://127.0.0.1:9099 ws://localhost:3000 http://127.0.0.1:3001")
+}
+
+const cspHeaderCommon = `
+    default-src 'self';
+    style-src 'self' 'unsafe-inline';
+    script-src 'self' 'unsafe-inline' 'unsafe-eval';
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+`
+
+const cspHeader = `
+    connect-src ${commonConnectSrc.join(' ')} https://ws.geonorge.no https://*.posthog.com https://*.googleapis.com https://www.google.com;
+    frame-ancestors 'none';
+    ${cspHeaderCommon}
+`
+
+const cspHeaderTavlevisning = `
+    connect-src ${commonConnectSrc.join(' ')};
+    ${cspHeaderCommon}
+`
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: 'standalone',
@@ -21,11 +52,59 @@ const nextConfig = {
             },
         ],
         dangerouslyAllowSVG: true,
-	contentDispositionType: 'attachment',
+        contentDispositionType: 'attachment',
         contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
     },
+    async headers() {
+        return [
+            {         
+                source: '/(.*)?',
+                headers: [
+                    {
+                        key: 'Strict-Transport-Security',
+                        value: 'max-age=63072000; includeSubDomains; preload'
+                    },
+                    {
+                        key: 'Content-Security-Policy',
+                        value: cspHeader.replace(/\n/g, '')
+                    },
+                    {
+                        key: 'X-Content-Type-Options',
+                        value: 'nosniff'
+                    },
+                    {
+                        key: 'Referrer-Policy',
+                        value: 'strict-origin-when-cross-origin'
+                    },
+                ]
+            },
+            {         
+                source: '/:id(\\w{20})',
+                headers: [
+                    {
+                        key: 'Strict-Transport-Security',
+                        value: 'max-age=63072000; includeSubDomains; preload'
+                    },
+                    {
+                        key: 'Content-Security-Policy',
+                        value: cspHeaderTavlevisning.replace(/\n/g, ''),
+                    },
+                    {
+                        key: 'X-Content-Type-Options',
+                        value: 'nosniff'
+                    },
+                    {
+                        key: 'Referrer-Policy',
+                        value: 'strict-origin-when-cross-origin'
+                    },
+                ]
+            },
+        ]
+    }
 }
 
+
+
 module.exports = async (phase, { defaultConfig }) => {
     if (phase === PHASE_DEVELOPMENT_SERVER) {
         nextConfig.images.remotePatterns.push({

tavla/src/Board/scenarios/Board/index.tsx

@@ -4,7 +4,6 @@ import { StopPlaceTile } from '../StopPlaceTile'
 import { QuayTile } from '../QuayTile'
 import { Tile } from 'components/Tile'
 import { defaultFontSize, getFontScale } from 'Board/scenarios/Board/utils'
-import { CSSProperties } from 'react'
 
 function BoardTile({ tileSpec }: { tileSpec: TTile }) {
     switch (tileSpec.type) {
@@ -15,7 +14,7 @@ function BoardTile({ tileSpec }: { tileSpec: TTile }) {
     }
 }
 
-function Board({ board, style }: { board: TBoard; style?: CSSProperties }) {
+function Board({ board }: { board: TBoard }) {
     if (!board.tiles || !board.tiles.length)
         return (
             <Tile className="flex items-center justify-center">
@@ -28,9 +27,6 @@ function Board({ board, style }: { board: TBoard; style?: CSSProperties }) {
             className={`max-sm:overflow-y-scroll grid grid-cols-auto-fit-minmax gap-2.5 h-full overflow-hidden supports-[not(display:grid)]:flex supports-[not(display:grid)]:*:m-2.5 ${getFontScale(
                 board.meta?.fontSize || defaultFontSize(board),
             )} `}
-            style={{
-                ...style,
-            }}
         >
             {board.tiles.map((tile, index) => {
                 return <BoardTile key={index} tileSpec={tile} />

tavla/src/Shared/components/Header/index.tsx

@@ -3,26 +3,18 @@ import TavlaLogoBlue from 'assets/logos/Tavla-blue.svg'
 import Image from 'next/image'
 import { TLogo, TTheme } from 'types/settings'
 import { Clock } from 'components/Clock'
-import classNames from 'classnames'
 
 function Header({
     theme,
-    className,
     organizationLogo,
 }: {
     theme?: TTheme
-    className?: string
     organizationLogo?: TLogo | null
 }) {
     const tavlaLogo = theme === 'light' ? TavlaLogoBlue : TavlaLogoWhite
 
     return (
-        <div
-            className={classNames(
-                'flex flex-row justify-between items-center gap-em-3',
-                className,
-            )}
-        >
+        <div className="flex flex-row justify-between items-center gap-em-3">
             <div className="relative w-full h-full">
                 <Image
                     src={organizationLogo ?? tavlaLogo}