Allow embedding of share page.

next.config.js

@@ -3,29 +3,32 @@ require('dotenv').config();
 const path = require('path');
 const pkg = require('./package.json');
 
-const contentSecurityPolicy = `
+const contentSecurityPolicy = [
-  default-src 'self';
+  `default-src 'self'`,
-  img-src *;
+  `img-src *`,
-  script-src 'self' 'unsafe-eval' 'unsafe-inline';
+  `script-src 'self' 'unsafe-eval' 'unsafe-inline'`,
-  style-src 'self' 'unsafe-inline';
+  `style-src 'self' 'unsafe-inline'`,
-  connect-src 'self' api.umami.is;
+  `connect-src 'self' api.umami.is`,
-  frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS};
+];
-`;
 
 const headers = [
   {
     key: 'X-DNS-Prefetch-Control',
     value: 'on',
   },
-  {
+  !process.env.ALLOWED_FRAME_URLS && {
     key: 'X-Frame-Options',
     value: 'SAMEORIGIN',
   },
-  {
+].filter(n => n);
-    key: 'Content-Security-Policy',
+
-    value: contentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
+const cspHeader = (values = []) => ({
-  },
+  key: 'Content-Security-Policy',
-];
+  value: [...contentSecurityPolicy, ...values]
+    .join(';')
+    .replace(/\s{2,}/g, ' ')
+    .trim(),
+});
 
 if (process.env.FORCE_SSL) {
   headers.push({
@@ -81,14 +84,13 @@ const config = {
   reactStrictMode: false,
   env: {
     basePath: basePath || '',
-    cloudMode: !!process.env.CLOUD_MODE,
+    cloudMode: process.env.CLOUD_MODE || '',
-    cloudUrl: process.env.CLOUD_URL,
+    cloudUrl: process.env.CLOUD_URL || '',
     configUrl: '/config',
     currentVersion: pkg.version,
-    defaultLocale: process.env.DEFAULT_LOCALE,
+    defaultLocale: process.env.DEFAULT_LOCALE || '',
-    disableLogin: process.env.DISABLE_LOGIN,
+    disableLogin: process.env.DISABLE_LOGIN || '',
-    disableUI: process.env.DISABLE_UI,
+    disableUI: process.env.DISABLE_UI || '',
-    isProduction: process.env.NODE_ENV === 'production',
   },
   basePath,
   output: 'standalone',
@@ -125,7 +127,14 @@ const config = {
     return [
       {
         source: '/:path*',
-        headers,
+        headers: [
+          ...headers,
+          cspHeader([`frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS || ''}`]),
+        ],
+      },
+      {
+        source: '/share/:path*',
+        headers: [...headers, cspHeader()],
       },
     ];
   },

src/app/(main)/App.tsx

@@ -4,7 +4,7 @@ import { usePathname } from 'next/navigation';
 import UpdateNotice from 'components/common/UpdateNotice';
 import { useRequireLogin, useConfig } from 'components/hooks';
 
-export function Shell({ children }) {
+export function App({ children }) {
   const { user } = useRequireLogin();
   const config = useConfig();
   const pathname = usePathname();
@@ -24,4 +24,4 @@ export function Shell({ children }) {
   );
 }
 
-export default Shell;
+export default App;

src/app/(main)/dashboard/page.tsx

@@ -1,7 +1,7 @@
 import Dashboard from 'app/(main)/dashboard/Dashboard';
 import { Metadata } from 'next';
 
-export default function DashboardPage() {
+export default function () {
   return <Dashboard />;
 }
 

src/app/(main)/layout.tsx

@@ -1,11 +1,11 @@
-import Shell from './Shell';
+import App from './App';
 import NavBar from './NavBar';
 import Page from 'components/layout/Page';
 import styles from './layout.module.css';
 
-export default function AppLayout({ children }) {
+export default function ({ children }) {
   return (
-    <Shell>
+    <App>
       <main className={styles.layout}>
         <nav className={styles.nav}>
           <NavBar />
@@ -14,6 +14,6 @@ export default function AppLayout({ children }) {
           <Page>{children}</Page>
         </section>
       </main>
-    </Shell>
+    </App>
   );
 }

src/app/(main)/reports/ReportsDataTable.tsx

@@ -5,9 +5,9 @@ import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 
-export default function ReportsDataTable({ websiteId }) {
+export default function ReportsDataTable({ websiteId }: { websiteId?: string }) {
   const { get } = useApi();
-  const modified = useCache(state => state?.reports);
+  const modified = useCache(state => (state as any)?.reports);
   const queryResult = useFilterQuery(['reports', { websiteId, modified }], params =>
     get(websiteId ? `/websites/${websiteId}/reports` : `/reports`, params),
   );

src/app/(main)/reports/page.tsx

@@ -1,7 +1,7 @@
 import ReportsHeader from './ReportsHeader';
 import ReportsDataTable from './ReportsDataTable';
 
-export default function ReportsPage() {
+export default function () {
   return (
     <>
       <ReportsHeader />

src/app/layout.tsx

@@ -8,16 +8,16 @@ import 'styles/locale.css';
 import 'styles/index.css';
 import 'styles/variables.css';
 
-export default function RootLayout({ children }) {
+export default function ({ children }) {
   return (
     <html lang="en" data-scroll="0">
       <head>
-        <link rel="icon" href={`/favicon.ico`} />
+        <link rel="icon" href="/favicon.ico" />
-        <link rel="apple-touch-icon" sizes="180x180" href={`/apple-touch-icon.png`} />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href={`/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href={`/favicon-16x16.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-        <link rel="manifest" href={`/site.webmanifest`} />
+        <link rel="manifest" href="/site.webmanifest" />
-        <link rel="mask-icon" href={`/safari-pinned-tab.svg`} color="#5bbad5" />
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
         <meta name="msapplication-TileColor" content="#da532c" />
         <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
         <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />

src/app/logout/page.tsx

@@ -1,5 +1,10 @@
 import Logout from './Logout';
+import { Metadata } from 'next';
 
 export default function () {
   return <Logout />;
 }
+
+export const metadata: Metadata = {
+  title: 'Logout | umami',
+};

src/app/share/[...id]/page.tsx

@@ -1,5 +1,10 @@
 import Share from './Share';
+import { Metadata } from 'next';
 
 export default function ({ params: { id } }) {
   return <Share shareId={id[0]} />;
 }
+
+export const metadata: Metadata = {
+  title: 'umami',
+};

src/pages/api/send.ts

@@ -74,7 +74,7 @@ export default async (req: NextApiRequestCollect, res: NextApiResponse) => {
   await useCors(req, res);
 
   if (req.method === 'POST') {
-    if (isbot(req.headers['user-agent']) && !process.env.DISABLE_BOT_CHECK) {
+    if (!process.env.DISABLE_BOT_CHECK && isbot(req.headers['user-agent'])) {
       return ok(res);
     }