Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4e6341c5d5
|
||
|
|
b5a3b278ba
|
||
|
|
99daeb014c
|
||
|
|
f5a4014e41
|
||
|
|
d66c679fd1
|
||
|
|
cab293d62e |
@@ -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>
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
+8
-3
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
<TextField
|
||||
autoFocus
|
||||
fullWidth
|
||||
label='@vous@votre-instance'
|
||||
value={saisie}
|
||||
onChange={event => setSaisie(event.target.value)}
|
||||
onKeyDown={event => {
|
||||
if (event.key === 'Enter') {
|
||||
repondre()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<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'
|
||||
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>
|
||||
|
||||
@@ -135,14 +135,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 +159,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}}>
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
+41
-1
@@ -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
|
||||
}))
|
||||
|
||||
@@ -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'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user