feat: implement sandbox access control for GraphQL endpoint

- Added a preHandler hook to block GET requests to the /graphql endpoint when the sandbox mode is disabled, returning a 403 error with a descriptive message.
- Refactored the sandbox plugin to remove the isSandboxEnabled parameter, simplifying its usage.
- Updated the ConnectSettings component to reflect changes in restart logic based on mutation response instead of computed properties.

Author: elibosley

api/src/unraid-api/graph/graph.module.ts

@@ -46,7 +46,7 @@ import { PluginModule } from '@app/unraid-api/plugin/plugin.module.js';
                     },
                     plugins: [
                         createDynamicIntrospectionPlugin(isSandboxEnabled),
-                        createSandboxPlugin(isSandboxEnabled),
+                        createSandboxPlugin(),
                     ] as any[],
                     subscriptions: {
                         'graphql-ws': {

api/src/unraid-api/graph/resolvers/sso/oidc-config.service.ts

@@ -336,7 +336,7 @@ export class OidcConfigPersistence extends ConfigFilePersister<OidcConfig> {
 
                 // Include validation results in response
                 const response: { restartRequired: boolean; values: OidcConfig; warnings?: string[] } = {
-                    restartRequired: true,
+                    restartRequired: false,
                     values: processedConfig,
                 };
 

api/src/unraid-api/graph/sandbox-plugin.ts

@@ -28,34 +28,23 @@ const preconditionFailed = (preconditionName: string) => {
     throw new HttpException(`Precondition failed: ${preconditionName} `, HttpStatus.PRECONDITION_FAILED);
 };
 
-export const getPluginBasedOnSandbox = async (sandbox: boolean, csrfToken: string) => {
-    if (sandbox) {
-        const { ApolloServerPluginLandingPageLocalDefault } = await import(
-            '@apollo/server/plugin/landingPage/default'
-        );
-        const plugin = ApolloServerPluginLandingPageLocalDefault({
-            footer: false,
-            includeCookies: true,
-            document: initialDocument,
-            embed: {
-                initialState: {
-                    sharedHeaders: {
-                        'x-csrf-token': csrfToken,
-                    },
+export const getSandboxPlugin = async (csrfToken: string) => {
+    const { ApolloServerPluginLandingPageLocalDefault } = await import(
+        '@apollo/server/plugin/landingPage/default'
+    );
+    const plugin = ApolloServerPluginLandingPageLocalDefault({
+        footer: false,
+        includeCookies: true,
+        document: initialDocument,
+        embed: {
+            initialState: {
+                sharedHeaders: {
+                    'x-csrf-token': csrfToken,
                 },
             },
-        });
-        return plugin;
-    } else {
-        const { ApolloServerPluginLandingPageProductionDefault } = await import(
-            '@apollo/server/plugin/landingPage/default'
-        );
-
-        const plugin = ApolloServerPluginLandingPageProductionDefault({
-            footer: false,
-        });
-        return plugin;
-    }
+        },
+    });
+    return plugin;
 };
 
 /**
@@ -72,11 +61,10 @@ export const getPluginBasedOnSandbox = async (sandbox: boolean, csrfToken: strin
  * - Initial document state
  * - Shared headers containing CSRF token
  */
-async function renderSandboxPage(service: GraphQLServerContext, isSandboxEnabled: () => boolean) {
+async function renderSandboxPage(service: GraphQLServerContext) {
     const { getters } = await import('@app/store/index.js');
-    const sandbox = isSandboxEnabled();
     const csrfToken = getters.emhttp().var.csrfToken;
-    const plugin = await getPluginBasedOnSandbox(sandbox, csrfToken);
+    const plugin = await getSandboxPlugin(csrfToken);
 
     if (!plugin.serverWillStart) return preconditionFailed('serverWillStart');
     const serverListener = await plugin.serverWillStart(service);
@@ -88,15 +76,15 @@ async function renderSandboxPage(service: GraphQLServerContext, isSandboxEnabled
 }
 
 /**
- * Apollo plugin to render the GraphQL Sandbox page on-demand based on current server state.
+ * Apollo plugin to render the GraphQL Sandbox page.
  *
- * Usually, the `ApolloServerPluginLandingPageLocalDefault` plugin configures its
- * parameters once, during server startup. This plugin defers the configuration
- * and rendering to request-time instead of server startup.
+ * Access to this page is controlled by the sandbox-access-plugin which blocks
+ * GET requests when sandbox is disabled. This plugin only handles rendering
+ * the sandbox UI when it's allowed through.
  */
-export const createSandboxPlugin = (isSandboxEnabled: () => boolean): ApolloServerPlugin => ({
+export const createSandboxPlugin = (): ApolloServerPlugin => ({
     serverWillStart: async (service) =>
         ({
-            renderLandingPage: () => renderSandboxPage(service, isSandboxEnabled),
+            renderLandingPage: () => renderSandboxPage(service),
         }) satisfies GraphQLServerListener,
 });

api/src/unraid-api/main.ts

@@ -1,5 +1,6 @@
 import type { NestFastifyApplication } from '@nestjs/platform-fastify';
 import { ValidationPipe } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { NestFactory } from '@nestjs/core';
 import { FastifyAdapter } from '@nestjs/platform-fastify/index.js';
 
@@ -75,6 +76,29 @@ export async function bootstrapNestServer(): Promise<NestFastifyApplication> {
         hsts: false,
     });
 
+    // Add sandbox access control hook
+    server.addHook('preHandler', async (request, reply) => {
+        // Only block GET requests to /graphql when sandbox is disabled
+        if (request.method === 'GET' && request.url === '/graphql') {
+            const configService = app.get(ConfigService);
+            const sandboxEnabled = configService.get('api.sandbox');
+
+            if (!sandboxEnabled) {
+                reply.status(403).send({
+                    errors: [
+                        {
+                            message: 'GraphQL sandbox is disabled. Enable it in the API settings.',
+                            extensions: {
+                                code: 'SANDBOX_DISABLED',
+                            },
+                        },
+                    ],
+                });
+                return;
+            }
+        }
+    });
+
     // Allows all origins but still checks authentication
     app.enableCors({
         origin: true, // Allows all origins

web/components/ConnectSettings/ConnectSettings.ce.vue

@@ -34,16 +34,7 @@ watch(result, () => {
   // unified values are namespaced (e.g., { api: { ... } })
   formState.value = structuredClone(result.value.settings.unified.values ?? {});
 });
-const restartRequired = computed(() => {
-  interface SandboxValues {
-    api?: {
-      sandbox?: boolean;
-    };
-  }
-  const currentSandbox = (settings.value?.values as SandboxValues)?.api?.sandbox;
-  const updatedSandbox = (formState.value as SandboxValues)?.api?.sandbox;
-  return currentSandbox !== updatedSandbox;
-});
+// Remove the computed restartRequired since we get it from the mutation response
 
 /**--------------------------------------------
  *     Update Settings Actions
@@ -57,6 +48,7 @@ const {
 } = useMutation(updateConnectSettings);
 
 const isUpdating = ref(false);
+const actualRestartRequired = ref(false);
 
 // prevent ui flash if loading finishes too fast
 watchDebounced(
@@ -70,9 +62,10 @@ watchDebounced(
 );
 
 // show a toast when the update is done
-onMutateSettingsDone(() => {
+onMutateSettingsDone((result) => {
+  actualRestartRequired.value = result.data?.updateSettings?.restartRequired ?? false;
   globalThis.toast.success('Updated API Settings', {
-    description: restartRequired.value ? 'The API is restarting...' : undefined,
+    description: actualRestartRequired.value ? 'The API is restarting...' : undefined,
   });
 });
 
@@ -131,7 +124,6 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
     <div class="mt-6 grid grid-cols-settings gap-y-6 items-baseline">
       <div class="text-sm text-end">
         <p v-if="isUpdating">Applying Settings...</p>
-        <p v-else-if="restartRequired">The API will restart after settings are applied.</p>
       </div>
       <div class="col-start-2 ml-10 space-y-4">
         <BrandButton