如何在NestJS中配置Apollo Sandbox？加载失败问题求助

方案1：调整Apollo Server的Sandbox CSP配置 #

在NestJS的GraphQL模块配置中，直接为Sandbox指定允许的CSP规则，确保加载所需的CDN资源：

import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';

@Module({
  imports: [
    GraphQLModule.forRootAsync<ApolloDriverConfig>({
      driver: ApolloDriver,
      useFactory: () => ({
        autoSchemaFile: true,
        playground: false, // 禁用旧版Playground，启用Sandbox
        landingPage: 'sandbox',
        sandbox: {
          csp: {
            directives: {
              defaultSrc: ["'self'"],
              // 允许Sandbox所需的脚本源
              scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", 'cdn.jsdelivr.net', 'apollo-sandbox.cdn.apollographql.com'],
              // 允许样式源
              styleSrc: ["'self'", "'unsafe-inline'", 'cdn.jsdelivr.net', 'apollo-sandbox.cdn.apollographql.com'],
              // 允许图片和图标源
              imgSrc: ["'self'", 'data:', 'apollo-sandbox.cdn.apollographql.com'],
              // 允许字体源
              fontSrc: ["'self'", 'cdn.jsdelivr.net'],
              // 允许连接到你的GraphQL端点
              connectSrc: ["'self'", 'http://localhost:3000/graphql'], // 替换为你的实际端点地址
            },
          },
        },
      }),
    }),
  ],
})
export class AppModule {}

方案2：调整Helmet的CSP规则（如果使用了Helmet） #

如果你的NestJS项目启用了Helmet中间件，它默认会设置严格的CSP规则，可能拦截Sandbox的CDN资源。需要在main.ts中修改Helmet的配置：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import helmet from 'helmet';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  app.use(helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", 'cdn.jsdelivr.net', 'apollo-sandbox.cdn.apollographql.com'],
        styleSrc: ["'self'", "'unsafe-inline'", 'cdn.jsdelivr.net', 'apollo-sandbox.cdn.apollographql.com'],
        imgSrc: ["'self'", 'data:', 'apollo-sandbox.cdn.apollographql.com'],
        fontSrc: ["'self'", 'cdn.jsdelivr.net'],
        connectSrc: ["'self'", 'http://localhost:3000/graphql'],
      },
    },
  }));
  
  await app.listen(3000);
}
bootstrap();

方案3：根据环境切换Sandbox（生产环境禁用） #

生产环境建议关闭Sandbox，仅在开发环境启用，避免不必要的CDN依赖：

// 在GraphQL模块配置的useFactory中
useFactory: () => ({
  autoSchemaFile: true,
  playground: false,
  landingPage: process.env.NODE_ENV === 'development' ? 'sandbox' : false,
  // 其他配置...
}),

额外提示 #

如果仍有CSP错误，查看浏览器控制台的具体报错信息，将被拦截的域名添加到对应的CSP指令中（比如scriptSrc、styleSrc等），确保所有Sandbox依赖的资源都被允许加载。

内容的提问来源于stack exchange，提问作者user17616096