feat: add ayisyen

app/api/mizik-stream/[id]/__tests__/route.test.js

@@ -4,6 +4,7 @@ import {GET} from '../route'
 function fakeUpstreamResponse({status = 200, headers = {}, body = 'audio-bytes'} = {}) {
   return {
     status,
+    ok: status >= 200 && status < 300,
     body,
     headers: {
       get: key => headers[key.toLowerCase()] ?? null
@@ -52,4 +53,16 @@ describe('GET /api/mizik-stream/[id]', () => {
     expect(response.status).toBe(200)
     expect(response.headers.get('content-type')).toBe('audio/mpeg')
   })
+
+  it('renvoie une erreur JSON si le serveur audio répond en erreur', async () => {
+    global.fetch = vi.fn(async () => fakeUpstreamResponse({status: 401, headers: {'content-type': 'application/json'}, body: '{"error": "unauthorized"}'}))
+
+    const request = new Request('http://localhost/api/mizik-stream/7')
+    const response = await GET(request, {params: Promise.resolve({id: '7'})})
+
+    expect(response.status).toBe(401)
+    expect(response.headers.get('content-type')).toContain('application/json')
+    const json = await response.json()
+    expect(json.error).toContain('401')
+  })
 })

app/api/mizik-stream/[id]/route.js

@@ -1,6 +1,8 @@
 const MIZIK_URL = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || 'https://funkwhale-server.com'
-const MIZIK_API_USER = process.env.MIZIK_API_USER || 'user'
-const MIZIK_API_PASSWORD = process.env.MIZIK_API_PASSWORD || 'password'
+// Les variables publiques sont conservées en fallback pendant la migration
+// des déploiements qui utiliseraient encore l’ancien nommage.
+const MIZIK_API_USER = process.env.MIZIK_API_USER || process.env.NEXT_PUBLIC_MIZIK_API_USER || 'user'
+const MIZIK_API_PASSWORD = process.env.MIZIK_API_PASSWORD || process.env.NEXT_PUBLIC_MIZIK_API_PASSWORD || 'password'
 
 const FORWARDED_HEADERS = ['content-type', 'content-length', 'content-range', 'accept-ranges']
 
@@ -14,6 +16,12 @@ export async function GET(request, props) {
     headers: range ? {range} : {}
   })
 
+  if (!upstreamResponse.ok) {
+    const message = `Le serveur audio a répondu ${upstreamResponse.status}`
+    console.error(message, upstreamUrl.replace(/p=[^&]+/, 'p=***'))
+    return Response.json({error: message}, {status: upstreamResponse.status})
+  }
+
   const headers = new Headers()
   for (const key of FORWARDED_HEADERS) {
     const value = upstreamResponse.headers.get(key)

app/awtis/[slug]/page.js

@@ -1,3 +1,4 @@
+import {headers} from 'next/headers'
 import {notFound} from 'next/navigation'
 import Box from '@mui/material/Box'
 
@@ -67,6 +68,8 @@ export default async function AwtisPajSlug(props) {
   const params = await props.params
   const {slug} = params
   const anAwtis = await jwennAwtis(slug)
+  const requestHeaders = await headers()
+  const nonce = requestHeaders.get('x-nonce') || undefined
 
   const {photo} = anAwtis
   const kuvetiFormat = formatKuveti(photo)
@@ -91,6 +94,7 @@ export default async function AwtisPajSlug(props) {
       <section>
         <script
           type='application/ld+json'
+          nonce={nonce}
           dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
         />
       </section>

app/emotion-cache-provider.js

@@ -7,10 +7,10 @@ import {useServerInsertedHTML} from 'next/navigation'
 import {CacheProvider as DefaultCacheProvider} from '@emotion/react'
 
 export default function NextAppDirEmotionCacheProvider(props) {
-  const {options, CacheProvider = DefaultCacheProvider, children} = props
+  const {options, CacheProvider = DefaultCacheProvider, children, nonce} = props
 
   const [registry] = React.useState(() => {
-    const cache = createCache(options)
+    const cache = createCache({...options, nonce})
     cache.compat = true
     const prevInsert = cache.insert
     let inserted = []
@@ -65,12 +65,14 @@ export default function NextAppDirEmotionCacheProvider(props) {
           <style
             key={name}
             dangerouslySetInnerHTML={{__html: style}}
+            nonce={nonce}
             data-emotion={`${registry.cache.key}-global ${name}`}
           />
         ))}
         {styles !== '' && (
           <style
             dangerouslySetInnerHTML={{__html: styles}}
+            nonce={nonce}
             data-emotion={dataEmotionAttribute}
           />
         )}
@@ -84,5 +86,6 @@ export default function NextAppDirEmotionCacheProvider(props) {
 NextAppDirEmotionCacheProvider.propTypes = {
   options: PropTypes.object.isRequired,
   CacheProvider: PropTypes.func,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  nonce: PropTypes.string
 }

app/layout.js

@@ -1,3 +1,4 @@
+import {headers} from 'next/headers'
 import PlausibleProvider from 'next-plausible'
 import TopLoader from '../components/top-loader'
 import Navigasyon from '../components/navigasyon'
@@ -61,16 +62,20 @@ const jsonLd = {
 }
 
 export default async function RootLayout({children}) {
+  const requestHeaders = await headers()
+  const nonce = requestHeaders.get('x-nonce') || undefined
+
   const inner = (
     <>
-      <TopLoader color='#ffeb3b' />
-      <ThemeRegistry>
+      <TopLoader color='#ffeb3b' nonce={nonce} />
+      <ThemeRegistry nonce={nonce}>
         <Navigasyon />
         {children}
       </ThemeRegistry>
       <section>
         <script
           type='application/ld+json'
+          nonce={nonce}
           dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
         />
       </section>
@@ -81,7 +86,7 @@ export default async function RootLayout({children}) {
     <html suppressHydrationWarning lang='fr'>
       <body>
         {plausibleUrl
-          ? <PlausibleProvider src={plausibleUrl}>{inner}</PlausibleProvider>
+          ? <PlausibleProvider src={plausibleUrl} scriptProps={{nonce}}>{inner}</PlausibleProvider>
           : inner}
       </body>
     </html>

app/paroles/[slug]/page.js

@@ -1,3 +1,4 @@
+import {headers} from 'next/headers'
 import {notFound} from 'next/navigation'
 import Box from '@mui/material/Box'
 
@@ -71,6 +72,8 @@ export default async function AnPawolPaj(props) {
   const {slug} = params
 
   const anTeks = await jwennAnTeks(slug)
+  const requestHeaders = await headers()
+  const nonce = requestHeaders.get('x-nonce') || undefined
   const {couverture} = anTeks
   const teksKuvetiFormat = formatKuveti(couverture)
 
@@ -126,6 +129,7 @@ export default async function AnPawolPaj(props) {
       <section>
         <script
           type='application/ld+json'
+          nonce={nonce}
           dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
         />
       </section>

app/theme-registy.js

@@ -64,12 +64,12 @@ const theme = createTheme({
 })
 
 export default function ThemeRegistry(props) {
-  const {children} = props
+  const {children, nonce} = props
 
   return (
     <>
-      <InitColorSchemeScript attribute='class' />
-      <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
+      <InitColorSchemeScript attribute='class' nonce={nonce} />
+      <NextAppDirEmotionCacheProvider options={{key: 'mui'}} nonce={nonce}>
         <ThemeProvider theme={theme}>
           <CssBaseline enableColorScheme />
           <ChanjeTem />
@@ -81,5 +81,6 @@ export default function ThemeRegistry(props) {
 }
 
 ThemeRegistry.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  nonce: PropTypes.string
 }

components/teks/__tests__/repons-mastodon.test.jsx

@@ -15,19 +15,36 @@ describe('ReponsMastodon', () => {
     expect(container).toBeEmptyDOMElement()
   })
 
-  it('affiche un lien direct vers le fil bokante', () => {
+  it('affiche un lien direct vers le fil BOKANTE', () => {
     render(<ReponsMastodon bokanteStatusId='112233' />)
-    const lien = screen.getByRole('link', {name: 'Mastodon'})
+    const lien = screen.getByRole('link', {name: 'BOKANTE (Mastodon)'})
     expect(lien).toHaveAttribute('href', 'https://bokante.o-k-i.net/@pawol_nu/112233')
   })
 
-  it('redirige vers authorize_interaction avec le domaine extrait d\'un identifiant complet', async () => {
+  it('redirige vers BOKANTE par défaut quand on continue', async () => {
     window.open = vi.fn()
     const user = userEvent.setup()
     render(<ReponsMastodon bokanteStatusId='112233' />)
 
-    await user.click(screen.getByRole('button', {name: /répondre via mastodon/i}))
-    await user.type(screen.getByLabelText(/@vous@votre-instance/i), '@quelqun@mastodon.social')
+    await user.click(screen.getByRole('button', {name: /répondre sur mastodon/i}))
+    await user.click(screen.getByRole('button', {name: /continuer/i}))
+
+    expect(window.open).toHaveBeenCalledWith(
+      'https://bokante.o-k-i.net/authorize_interaction?uri=' + encodeURIComponent('https://bokante.o-k-i.net/@pawol_nu/112233'),
+      '_blank',
+      'noopener,noreferrer'
+    )
+  })
+
+  it('permet de choisir une autre instance dans le select', async () => {
+    window.open = vi.fn()
+    const user = userEvent.setup()
+    render(<ReponsMastodon bokanteStatusId='112233' />)
+
+    await user.click(screen.getByRole('button', {name: /répondre sur mastodon/i}))
+    await user.click(screen.getByLabelText(/instance mastodon/i))
+    await user.click(screen.getByRole('option', {name: /autre instance/i}))
+    await user.type(screen.getByLabelText(/@vous@votre-instance/i), 'mastodon.social')
     await user.click(screen.getByRole('button', {name: /continuer/i}))
 
     expect(window.open).toHaveBeenCalledWith(
@@ -37,17 +54,19 @@ describe('ReponsMastodon', () => {
     )
   })
 
-  it('accepte aussi juste un nom d\'instance sans @', async () => {
+  it('accepte un identifiant complet pour une autre instance', async () => {
     window.open = vi.fn()
     const user = userEvent.setup()
     render(<ReponsMastodon bokanteStatusId='112233' />)
 
-    await user.click(screen.getByRole('button', {name: /répondre via mastodon/i}))
-    await user.type(screen.getByLabelText(/@vous@votre-instance/i), 'mastodon.social')
+    await user.click(screen.getByRole('button', {name: /répondre sur mastodon/i}))
+    await user.click(screen.getByLabelText(/instance mastodon/i))
+    await user.click(screen.getByRole('option', {name: /autre instance/i}))
+    await user.type(screen.getByLabelText(/@vous@votre-instance/i), '@quelqun@mastodon.social')
     await user.click(screen.getByRole('button', {name: /continuer/i}))
 
     expect(window.open).toHaveBeenCalledWith(
-      expect.stringContaining('https://mastodon.social/authorize_interaction'),
+      'https://mastodon.social/authorize_interaction?uri=' + encodeURIComponent('https://bokante.o-k-i.net/@pawol_nu/112233'),
       '_blank',
       'noopener,noreferrer'
     )

components/teks/repons-mastodon.jsx

@@ -10,11 +10,24 @@ import DialogContent from '@mui/material/DialogContent'
 import DialogActions from '@mui/material/DialogActions'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
-import Link from 'next/link'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Link from '@mui/material/Link'
+import {Mastodon} from '@icons-pack/react-simple-icons'
 
 const BOKANTE_URL = process.env.NEXT_PUBLIC_BOKANTE_URL || 'https://bokante.o-k-i.net'
 const BOKANTE_ACCOUNT = process.env.NEXT_PUBLIC_BOKANTE_ACCOUNT || 'pawol_nu'
 
+const INSTANCES_SUGGEREES = [
+  {domain: 'bokante.o-k-i.net', label: 'BOKANTE - notre instance'},
+  {domain: 'mastodon.social', label: 'mastodon.social'},
+  {domain: 'piaille.fr', label: 'piaille.fr'},
+]
+
+const AUTRE_INSTANCE = 'autre'
+
 function extraireInstance(saisie) {
   const valeur = saisie.trim().replace(/^@/, '').replace(/^https?:\/\//, '').replace(/\/$/, '')
   return valeur.includes('@') ? valeur.split('@').pop() : valeur
@@ -22,7 +35,8 @@ function extraireInstance(saisie) {
 
 export default function ReponsMastodon({bokanteStatusId}) {
   const [ouvert, setOuvert] = useState(false)
-  const [saisie, setSaisie] = useState('')
+  const [instance, setInstance] = useState(INSTANCES_SUGGEREES[0].domain)
+  const [autreInstance, setAutreInstance] = useState('')
 
   if (!bokanteStatusId) {
     return null
@@ -31,43 +45,92 @@ export default function ReponsMastodon({bokanteStatusId}) {
   const tootUrl = `${BOKANTE_URL}/@${BOKANTE_ACCOUNT}/${bokanteStatusId}`
 
   const repondre = () => {
-    const instance = extraireInstance(saisie)
-    if (!instance) {
+    const domaine = instance === AUTRE_INSTANCE ? extraireInstance(autreInstance) : instance
+    if (!domaine) {
       return
     }
 
-    window.open(`https://${instance}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
+    window.open(`https://${domaine}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
     setOuvert(false)
+    setAutreInstance('')
   }
 
   return (
     <Box sx={{maxWidth: 700, margin: '1em auto 0', textAlign: 'center'}}>
       <Typography variant='body2' sx={{mb: 1}}>
-        Rejoignez la discussion sur{' '}
-        <Link href={tootUrl} target='_blank' rel='noopener noreferrer'>Mastodon</Link>
+        Rejoignez la discussion sur le Fediverse via{' '}
+        <Link
+          href={tootUrl}
+          target='_blank'
+          rel='noopener noreferrer'
+          underline='hover'
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 0.5,
+            px: 1,
+            py: 0.25,
+            borderRadius: 1,
+            bgcolor: 'action.hover',
+            color: 'primary.main',
+            fontWeight: 500,
+            textDecoration: 'none',
+            '&:hover': {
+              bgcolor: 'action.selected'
+            }
+          }}
+        >
+          BOKANTE (Mastodon)
+        </Link>
       </Typography>
-      <Button variant='outlined' size='small' onClick={() => setOuvert(true)}>
-        Répondre via Mastodon
+      <Button
+        variant='outlined'
+        size='small'
+        startIcon={<Mastodon size={16} color='#6364FF' title='' />}
+        onClick={() => setOuvert(true)}
+      >
+        Répondre sur Mastodon
       </Button>
       <Dialog open={ouvert} onClose={() => setOuvert(false)}>
-        <DialogTitle>Répondre depuis votre compte Mastodon</DialogTitle>
+        <DialogTitle>Répondre depuis Mastodon</DialogTitle>
         <DialogContent>
           <Typography variant='body2' sx={{mb: 2}}>
-            Indiquez votre identifiant (@vous@votre-instance) ou juste le nom de votre
-            instance, vous serez redirigé·e vers votre compte pour répondre.
+            Choisissez l’instance Mastodon sur laquelle vous avez un compte.
+            BOKANTE est l’instance de OKI : vous pouvez aussi utiliser
+            n’importe quelle autre instance du Fediverse.
           </Typography>
+          <FormControl fullWidth sx={{mb: 2}}>
+            <InputLabel id='instance-mastodon-label'>Instance Mastodon</InputLabel>
+            <Select
+              labelId='instance-mastodon-label'
+              id='instance-mastodon'
+              value={instance}
+              label='Instance Mastodon'
+              onChange={event => setInstance(event.target.value)}
+            >
+              {INSTANCES_SUGGEREES.map(({domain, label}) => (
+                <MenuItem key={domain} value={domain}>
+                  {label}
+                </MenuItem>
+              ))}
+              <MenuItem value={AUTRE_INSTANCE}>Autre instance…</MenuItem>
+            </Select>
+          </FormControl>
+          {instance === AUTRE_INSTANCE && (
             <TextField
               autoFocus
               fullWidth
               label='@vous@votre-instance'
-            value={saisie}
-            onChange={event => setSaisie(event.target.value)}
+              helperText='Indiquez votre identifiant (@vous@votre-instance) ou juste le nom de votre instance, vous serez redirigé·e vers votre compte pour répondre.'
+              value={autreInstance}
+              onChange={event => setAutreInstance(event.target.value)}
               onKeyDown={event => {
                 if (event.key === 'Enter') {
                   repondre()
                 }
               }}
             />
+          )}
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setOuvert(false)}>Annuler</Button>

components/teks/teks.js

@@ -99,6 +99,7 @@ const CONTINENTS = ['Afrique', 'Asie', 'Europe']
 
 const TRAD_FIELDS = [
   // Afrique — langues vedettes en premier
+  {field: 'ayisyen', title: 'Ayisyen 🇭🇹', continent: 'Afrique', vedette: true},
   {field: 'yoruba', title: 'Yorùbá', continent: 'Afrique', vedette: true},
   {field: 'lingala', title: 'Lingála', continent: 'Afrique', vedette: true},
   {field: 'wolof', title: 'Wolof', continent: 'Afrique', vedette: true},
@@ -135,14 +136,6 @@ const langToArray = parole => {
     .map(({field, title, continent, vedette}) => ({field, title, continent, vedette, lang: parole.traductions[field]}))
 }
 
-const BROWSER_LANG_TO_FIELD = {
-  yo: 'yoruba', ln: 'lingala', wo: 'wolof', sw: 'swahili', ha: 'hausa',
-  ar: 'arabe', om: 'oromo', ig: 'igbo', zu: 'zoulou', mg: 'malgache',
-  xh: 'xhosa', tn: 'tswana', ts: 'tsonga', st: 'sesotho',
-  ja: 'japonais', ko: 'coreen', en: 'anglais', fr: 'francais',
-  es: 'espagnol', de: 'allemand', it: 'italien', pt: 'portugais',
-}
-
 const ExplicitTooltip = Tooltip
 
 export default function Teks({parole}) {
@@ -167,20 +160,6 @@ export default function Teks({parole}) {
     return () => setCurrentTrack(null)
   }, [parole, setCurrentTrack])
 
-  useEffect(() => {
-    const browserLang = navigator.language?.split('-')[0]?.toLowerCase()
-    if (!browserLang || browserLang === parole.langueSource) {
-      return
-    }
-
-    const champ = BROWSER_LANG_TO_FIELD[browserLang]
-    const index = langArray.findIndex(lang => lang.field === champ)
-    if (index !== -1) {
-      setTab(index + 1)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- ne doit s'exécuter qu'au montage, pas à chaque changement d'onglet
-  }, [])
-
   return (
     <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 12}}>

components/top-loader.js

@@ -3,8 +3,13 @@
 import PropTypes from 'prop-types'
 import NextTopLoader from 'nextjs-toploader'
 
-export default function TopLoader({color}) {
-  return <NextTopLoader color={color} />
+export default function TopLoader({color, nonce}) {
+  return <NextTopLoader color={color} nonce={nonce} />
+}
+
+TopLoader.propTypes = {
+  color: PropTypes.string.isRequired,
+  nonce: PropTypes.string
 }
 
 TopLoader.propTypes = {

next.config.js

@@ -28,9 +28,49 @@ function buildRemotePatterns() {
   return patterns
 }
 
+async function headers() {
+  return [
+    {
+      source: '/:path*',
+      headers: [
+        {
+          key: 'Strict-Transport-Security',
+          value: 'max-age=63072000; includeSubDomains; preload'
+        },
+        {
+          key: 'X-Content-Type-Options',
+          value: 'nosniff'
+        },
+        {
+          key: 'X-Frame-Options',
+          value: 'SAMEORIGIN'
+        },
+        {
+          key: 'Referrer-Policy',
+          value: 'strict-origin-when-cross-origin'
+        },
+        {
+          key: 'Cross-Origin-Resource-Policy',
+          value: 'same-site'
+        },
+        {
+          key: 'Cross-Origin-Opener-Policy',
+          value: 'same-origin'
+        },
+        {
+          key: 'Permissions-Policy',
+          value: 'accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()'
+        }
+      ]
+    }
+  ]
+}
+
 module.exports = (withPWA({
   turbopack: {},
+  poweredByHeader: false,
   images: {
     remotePatterns: buildRemotePatterns()
-  }
+  },
+  headers
 }))

proxy.js

@@ -0,0 +1,121 @@
+/* eslint-disable @next/next/no-server-import-in-page */
+import {NextResponse} from 'next/server'
+
+const nonceCharset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+
+function generateNonce() {
+  const array = new Uint8Array(16)
+  crypto.getRandomValues(array)
+  let nonce = ''
+  for (const byte of array) {
+    nonce += nonceCharset[byte % 64]
+  }
+
+  return nonce
+}
+
+function extractOrigin(url) {
+  if (!url) {
+    return ''
+  }
+
+  try {
+    return new URL(url).origin
+  } catch {
+    return ''
+  }
+}
+
+function extractHostSource(raw) {
+  if (!raw) {
+    return ''
+  }
+
+  const [hostname, port] = raw.split(':')
+  if (!hostname) {
+    return ''
+  }
+
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return `http://${hostname}${port ? `:${port}` : ''}`
+  }
+
+  return `https://${hostname}${port ? `:${port}` : ''}`
+}
+
+function buildCsp(nonce) {
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || process.env.NEXT_PUBLIC_API_URL_ROOT || ''
+  const plausibleUrl = process.env.NEXT_PUBLIC_PLAUSIBLE_URL || ''
+  const mizikUrl = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || ''
+  const imageDomainsRaw = process.env.NEXT_PUBLIC_DOMAINS_IMAGE || ''
+
+  const apiOrigin = extractOrigin(apiUrl)
+  const plausibleOrigin = extractOrigin(plausibleUrl)
+  const mizikOrigin = extractOrigin(mizikUrl)
+  const imageOrigins = imageDomainsRaw
+    .split(' ')
+    .filter(Boolean)
+    .map(entry => extractHostSource(entry))
+    .filter(Boolean)
+
+  const imageOriginsSet = new Set([apiOrigin, ...imageOrigins])
+  const imageOriginsUnique = [...imageOriginsSet].filter(Boolean)
+
+  const connectSrc = ['\'self\'', apiOrigin, plausibleOrigin, mizikOrigin].filter(Boolean)
+  const imgSrc = ['\'self\'', 'data:', 'blob:', ...imageOriginsUnique].filter(Boolean)
+  const mediaSrc = ['\'self\'', apiOrigin, mizikOrigin].filter(Boolean)
+
+  // Frame-src is intentionally broad: the application embeds user-supplied
+  // PeerTube instances in addition to known platforms (Tidal, Deezer, Spotify,
+  // Soundcloud, Apple Music). Restricting this to a fixed list would break
+  // user-generated content.
+  const frameSrc = ['\'self\'', 'https:']
+
+  const directives = [
+    'default-src \'self\'',
+    `script-src 'nonce-${nonce}' 'strict-dynamic'`,
+    `style-src-elem 'self' 'nonce-${nonce}'`,
+    'style-src-attr \'unsafe-inline\'',
+    `img-src ${imgSrc.join(' ')}`,
+    'font-src \'self\'',
+    `connect-src ${connectSrc.join(' ')}`,
+    `frame-src ${frameSrc.join(' ')}`,
+    `media-src ${mediaSrc.join(' ')}`,
+    'manifest-src \'self\'',
+    'object-src \'none\'',
+    'base-uri \'self\'',
+    'form-action \'self\'',
+    'frame-ancestors \'self\'',
+    'upgrade-insecure-requests'
+  ]
+
+  return directives.join('; ')
+}
+
+export function proxy(request) {
+  const nonce = generateNonce()
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-nonce', nonce)
+
+  const response = NextResponse.next({
+    request: {
+      headers: requestHeaders
+    }
+  })
+
+  response.headers.set('Content-Security-Policy', buildCsp(nonce))
+
+  return response
+}
+
+export const config = {
+  matcher: [
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      missing: [
+        {type: 'header', key: 'next-router-prefetch'},
+        {type: 'header', key: 'purpose', value: 'prefetch'}
+      ]
+    }
+  ]
+}