Security enhancements: (boxyhq#2041)

Co-authored-by: parth inamdar <[email protected]>

Author: pi1814

components/invitation/EmailDomainMismatch.tsx

@@ -1,8 +1,8 @@
 import { Button } from 'react-daisyui';
-import { signOut } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 
 import { Invitation } from '@prisma/client';
+import { useCustomSignOut } from 'hooks/useCustomSignout';
 
 interface EmailDomainMismatchProps {
   invitation: Invitation;
@@ -15,6 +15,7 @@ const EmailDomainMismatch = ({
 }: EmailDomainMismatchProps) => {
   const { t } = useTranslation('common');
   const { allowedDomains } = invitation;
+  const signOut = useCustomSignOut();
 
   const allowedDomainsString =
     allowedDomains.length === 1
@@ -34,9 +35,7 @@ const EmailDomainMismatch = ({
         color="error"
         size="md"
         variant="outline"
-        onClick={() => {
-          signOut();
-        }}
+        onClick={signOut}
       >
         {t('logout')}
       </Button>

components/invitation/EmailMismatch.tsx

@@ -1,13 +1,14 @@
 import { Button } from 'react-daisyui';
-import { signOut } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
+import { useCustomSignOut } from 'hooks/useCustomSignout';
 
 interface EmailMismatchProps {
   email: string;
 }
 
 const EmailMismatch = ({ email }: EmailMismatchProps) => {
   const { t } = useTranslation('common');
+  const signOut = useCustomSignOut();
 
   return (
     <>
@@ -22,9 +23,7 @@ const EmailMismatch = ({ email }: EmailMismatchProps) => {
         color="error"
         size="md"
         variant="outline"
-        onClick={() => {
-          signOut();
-        }}
+        onClick={signOut}
       >
         {t('logout')}
       </Button>

components/shared/shell/Header.tsx

@@ -10,8 +10,8 @@ import {
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import useTheme from 'hooks/useTheme';
 import env from '@/lib/env';
-import { signOut } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
+import { useCustomSignOut } from 'hooks/useCustomSignout';
 
 interface HeaderProps {
   setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -21,6 +21,7 @@ const Header = ({ setSidebarOpen }: HeaderProps) => {
   const { toggleTheme } = useTheme();
   const { status, data } = useSession();
   const { t } = useTranslation('common');
+  const signOut = useCustomSignOut();
 
   if (status === 'loading' || !data) {
     return null;
@@ -95,7 +96,7 @@ const Header = ({ setSidebarOpen }: HeaderProps) => {
                 <button
                   className="block px-2 py-1 text-sm leading-6 text-gray-900 dark:text-gray-50 cursor-pointer"
                   type="button"
-                  onClick={() => signOut()}
+                  onClick={signOut}
                 >
                   <div className="flex items-center">
                     <ArrowRightOnRectangleIcon className="w-5 h-5 mr-1" />{' '}

hooks/useCustomSignout.ts

@@ -0,0 +1,26 @@
+import { useRouter } from 'next/router';
+
+export function useCustomSignOut() {
+  const router = useRouter();
+
+  const signOut = async () => {
+    try {
+      const response = await fetch('/api/auth/custom-signout', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Signout failed');
+      }
+
+      router.push('/auth/login');
+    } catch (error) {
+      console.error('Error during sign out:', error);
+    }
+  };
+
+  return signOut;
+}

lib/env.ts

@@ -4,6 +4,7 @@ const env = {
   databaseUrl: `${process.env.DATABASE_URL}`,
   appUrl: `${process.env.APP_URL}`,
   redirectIfAuthenticated: '/dashboard',
+  securityHeadersEnabled: process.env.SECURITY_HEADERS_ENABLED ?? false,
 
   // SMTP configuration for NextAuth
   smtp: {

lib/nextAuth.ts

@@ -37,7 +37,7 @@ import { forceConsume } from '@/lib/server-common';
 
 const adapter = PrismaAdapter(prisma);
 const providers: Provider[] = [];
-const sessionMaxAge = 30 * 24 * 60 * 60; // 30 days
+const sessionMaxAge = 14 * 24 * 60 * 60; // 14 days
 const useSecureCookie = env.appUrl.startsWith('https://');
 
 export const sessionTokenCookieName =

middleware.ts

@@ -5,6 +5,56 @@ import type { NextRequest } from 'next/server';
 
 import env from './lib/env';
 
+// Constants for security headers
+const SECURITY_HEADERS = {
+  'Referrer-Policy': 'strict-origin-when-cross-origin',
+  'Permissions-Policy': 'geolocation=(), microphone=()',
+  'Cross-Origin-Embedder-Policy': 'require-corp',
+  'Cross-Origin-Opener-Policy': 'same-origin',
+  'Cross-Origin-Resource-Policy': 'same-site',
+} as const;
+
+// Generate CSP
+const generateCSP = (): string => {
+  const policies = {
+    'default-src': ["'self'"],
+    'img-src': [
+      "'self'",
+      'boxyhq.com',
+      '*.boxyhq.com',
+      '*.dicebear.com',
+      'data:',
+    ],
+    'script-src': [
+      "'self'",
+      "'unsafe-inline'",
+      "'unsafe-eval'",
+      '*.gstatic.com',
+      '*.google.com',
+    ],
+    'style-src': ["'self'", "'unsafe-inline'"],
+    'connect-src': [
+      "'self'",
+      '*.google.com',
+      '*.gstatic.com',
+      'boxyhq.com',
+      '*.ingest.sentry.io',
+      '*.mixpanel.com',
+    ],
+    'frame-src': ["'self'", '*.google.com', '*.gstatic.com'],
+    'font-src': ["'self'"],
+    'object-src': ["'none'"],
+    'base-uri': ["'self'"],
+    'form-action': ["'self'"],
+    'frame-ancestors': ["'none'"],
+  };
+
+  return Object.entries(policies)
+    .map(([key, values]) => `${key} ${values.join(' ')}`)
+    .concat(['upgrade-insecure-requests'])
+    .join('; ');
+};
+
 // Add routes that don't require authentication
 const unAuthenticatedRoutes = [
   '/api/hello',
@@ -63,8 +113,25 @@ export default async function middleware(req: NextRequest) {
     }
   }
 
+  const requestHeaders = new Headers(req.headers);
+  const csp = generateCSP();
+
+  requestHeaders.set('Content-Security-Policy', csp);
+
+  const response = NextResponse.next({
+    request: { headers: requestHeaders },
+  });
+
+  if (env.securityHeadersEnabled) {
+    // Set security headers
+    response.headers.set('Content-Security-Policy', csp);
+    Object.entries(SECURITY_HEADERS).forEach(([key, value]) => {
+      response.headers.set(key, value);
+    });
+  }
+
   // All good, let the request through
-  return NextResponse.next();
+  return response;
 }
 
 export const config = {

pages/api/auth/custom-signout.ts

@@ -0,0 +1,55 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { getServerSession } from 'next-auth/next';
+import { getAuthOptions, sessionTokenCookieName } from '@/lib/nextAuth';
+import { prisma } from '@/lib/prisma';
+import { getCookie } from 'cookies-next';
+import env from '@/lib/env';
+import { deleteSession } from 'models/session';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const authOptions = getAuthOptions(req, res);
+    const session = await getServerSession(req, res, authOptions);
+
+    if (!session || !session.user) {
+      return res.status(401).json({ error: 'Unauthorized' });
+    }
+
+    if (env.nextAuth.sessionStrategy === 'database') {
+      const sessionToken = await getCookie(sessionTokenCookieName, {
+        req,
+        res,
+      });
+      const sessionDBEntry = await prisma.session.findFirst({
+        where: {
+          sessionToken: sessionToken,
+        },
+      });
+
+      if (sessionDBEntry) {
+        await deleteSession({
+          where: {
+            sessionToken: sessionToken,
+          },
+        });
+      }
+    }
+
+    res.setHeader(
+      'Set-Cookie',
+      'next-auth.session-token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; HttpOnly; Secure; SameSite=Lax'
+    );
+
+    return res.status(200).json({ success: true });
+  } catch (error) {
+    console.error('Signout error:', error);
+    return res.status(500).json({ error: 'Failed to sign out' });
+  }
+}