Merge pull request #7651 from nocodb/nc-fix/prevent-cj-temp

fix: avoid iframe for non-public pages

packages/nc-gui/components/cmd-j/index.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import '~/assets/js/typesense-docsearch'
+declare const docsearch: any;
+
 const modalEl = ref<HTMLElement | null>(null)
 const { user } = useGlobal()
 

packages/nc-gui/components/general/NocoIcon.vue

@@ -1,12 +1,20 @@
 <script lang="ts" setup>
-import { autoResetRef, useThrottleFn } from '#imports'
+import { autoResetRef, useThrottleFn, toRefs } from '#imports'
 
 interface Props {
   size?: number
   animate?: boolean
 }
 
-const { size = 90, animate = false } = defineProps<Props>()
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    size: 90,
+    animate: false,
+  },
+)
+
+const { size, animate } = toRefs(props)
 
 const ping = autoResetRef(false, 1000)
 

packages/nc-gui/layouts/shared-view.vue

@@ -50,14 +50,19 @@ export default {
   <a-layout id="nc-app">
     <a-layout class="!flex-col bg-white">
       <a-layout-header class="flex !bg-primary items-center text-white pl-3 pr-4 shadow-lg">
-        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
+        <a
+          class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"
+          href="https://github.com/nocodb/nocodb"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <a-tooltip placement="bottom">
             <template #title>
               {{ appInfo.version }}
             </template>
             <img width="35" alt="NocoDB" src="~/assets/img/icons/256x256-trans.png" />
           </a-tooltip>
-        </div>
+        </a>
 
         <div>
           <div class="flex justify-center items-center">

packages/nc-gui/middleware/01.security.global.ts

@@ -0,0 +1,17 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  // avoid non-embeddable paths within an iframe
+  if (self !== top) {
+    // allow for shared base
+    if (to.path.startsWith('/base/')) {
+      return
+    }
+
+    // allow for shared views
+    if (to.meta?.layout === 'shared-view') {
+      return
+    }
+
+    // throw for all other pages
+    throw createError({ statusCode: 403, message: 'Not allowed' })
+  }
+})

packages/nc-gui/nuxt.config.ts

@@ -11,7 +11,7 @@ import PurgeIcons from 'vite-plugin-purge-icons'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['@vueuse/nuxt', 'nuxt-windicss', '@nuxt/image-edge', '@pinia/nuxt'],
+  modules: ['@vueuse/nuxt', 'nuxt-windicss', '@nuxt/image', '@pinia/nuxt'],
 
   ssr: false,
   router: {
@@ -101,11 +101,6 @@ export default defineNuxtConfig({
           content: './link-preview.webp',
         },
       ],
-      script: [
-        {
-          src: './js/typesense-docsearch.js',
-        },
-      ],
     },
   },
 
@@ -192,7 +187,7 @@ export default defineNuxtConfig({
     ],
     define: {
       'process.env.DEBUG': 'false',
-      'process.nextTick': () => {},
+      'process.nextTick': 'globalThis.setImmediate',
       'process.env.ANT_MESSAGE_DURATION': process.env.ANT_MESSAGE_DURATION,
     },
     server: {
@@ -218,8 +213,9 @@ export default defineNuxtConfig({
     },
   },
 
-  experimental: {
-    reactivityTransform: true,
+  // experimental props destructuring
+  vue: {
+    propsDestructure: true,
   },
 
   image: {

packages/nc-gui/package.json

@@ -125,7 +125,7 @@
     "@iconify-json/tabler": "^1.1.105",
     "@iconify-json/vscode-icons": "^1.1.33",
     "@intlify/unplugin-vue-i18n": "^0.13.0",
-    "@nuxt/image-edge": "1.1.0-28416198.1e7d37b",
+    "@nuxt/image": "^1.3.0",
     "@types/d3-scale": "^4.0.8",
     "@types/dagre": "^0.7.52",
     "@types/file-saver": "^2.0.7",
@@ -153,7 +153,7 @@
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
     "happy-dom": "^6.0.4",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.10.2",
     "nuxt-windicss": "^2.6.1",
     "prettier": "^2.8.8",
     "sass": "^1.70.0",

packages/nc-gui/tsconfig.json

@@ -16,7 +16,7 @@
       "unplugin-icons/types/vue",
       "nuxt-windicss",
       "vite/client",
-      "@nuxt/image-edge"
+      "@nuxt/image"
     ]
   },
   "exclude": ["node_modules", "dist", ".output"]

packages/nocodb/src/Noco.ts

@@ -2,7 +2,6 @@ import path from 'path';
 import { NestFactory } from '@nestjs/core';
 import clear from 'clear';
 import * as express from 'express';
-import NcToolGui from 'nc-lib-gui';
 import { T } from 'nc-help';
 import { v4 as uuidv4 } from 'uuid';
 import dotenv from 'dotenv';
@@ -126,7 +125,6 @@ export default class Noco {
     await nestApp.init();
 
     const dashboardPath = process.env.NC_DASHBOARD_URL ?? '/dashboard';
-    server.use(NcToolGui.expressMiddleware(dashboardPath));
     server.use(express.static(path.join(__dirname, 'public')));
 
     if (dashboardPath !== '/' && dashboardPath !== '') {

packages/nocodb/src/app.module.ts

@@ -75,9 +75,10 @@ export const ceModuleConfig = {
 export class AppModule {
   // Global Middleware
   configure(consumer: MiddlewareConsumer) {
+    const dashboardPath = process.env.NC_DASHBOARD_URL ?? '/dashboard';
     consumer
       .apply(GuiMiddleware)
-      .forRoutes({ path: '*', method: RequestMethod.GET })
+      .forRoutes({ path: `${dashboardPath}*`, method: RequestMethod.GET })
       .apply(GlobalMiddleware)
       .forRoutes({ path: '*', method: RequestMethod.ALL });
   }

packages/nocodb/src/nocobuild.ts

@@ -1,6 +1,5 @@
 import { NestFactory } from '@nestjs/core';
 import express from 'express';
-import NcToolGui from 'nc-lib-gui';
 import { AppModule } from '~/app.module';
 
 export default async function (app) {
@@ -9,7 +8,6 @@ export default async function (app) {
   await nestApp.init();
 
   const dashboardPath = process.env.NC_DASHBOARD_URL ?? '/dashboard';
-  app.use(NcToolGui.expressMiddleware(dashboardPath));
   app.get('/', (_req, res) => res.redirect(dashboardPath));
   app.use(nestApp.getHttpAdapter().getInstance());