Feat/security headers

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -148,11 +148,26 @@ const moduleExports = withBundleAnalyzer({
 		locales,
 		defaultLocale,
 	},
-	headers: () => {
+	headers: async () => {
 		return [
+			{
+				source: '/:path*',
+				locale: false,
+				headers: [
+					{
+						key: 'X-Frame-Options',
+						value: 'SAMEORIGIN',
+					},
+					{
+						key: 'Content-Security-Policy',
+						value: "frame-ancestors 'self'",
+					},
+				],
+			},
 			{
 				// Adding CORS headers for /manifest.json
 				source: '/manifest.json',
+				locale: false,
 				headers: [
 					{
 						key: 'Access-Control-Allow-Origin',

src/components/views/verification/EmailVerificationIndex.tsx

@@ -78,10 +78,20 @@ export default function EmailVerificationIndex() {
 }
 
 function Verified() {
+	const [querySlug, setQuerySlug] = useState<string | undefined>(undefined);
 	const router = useRouter();
 	const { slug } = router.query;
 	const { formatMessage } = useIntl();
 
+	// we must wait for the router to be ready to get the slug from the query
+	useEffect(() => {
+		if (router.isReady) {
+			if (typeof slug === 'string') {
+				setQuerySlug(slug);
+			}
+		}
+	}, [router.isReady, slug]);
+
 	return (
 		<>
 			<Image
@@ -99,7 +109,7 @@ function Verified() {
 				})}
 			</Lead>
 			<LinkHolder>
-				<Link href={slugToVerification(slug as string)}>
+				<Link href={slugToVerification(querySlug as string)}>
 					<ButtonLink
 						size='small'
 						label={