如何在NestJS中为GraphQL配置Apollo沙盒？

Question

我正在尝试在 NestJs 中使用 Apollo Sandbox for GraphQL，因为我必须从 apollo-server-express 升级到 apollo/server。

我添加了NestJS 文档中描述的配置。我还检查了Apollo 文档。

我的设置现在如此处所述。

这是我使用的：

"@apollo/server": "^4.7.3",
"@apollo/server-plugin-landing-page-graphql-playground": "^4.0.1",
"@nestjs/apollo": "^11.0.6",
"@nestjs/graphql": "^11.0.6"

现在当我进入操场时它会说：

欢迎使用 Apollo 服务器 Apollo Sandbox无法加载；您可能离线了。

在控制台中，我看到一堆脚本加载错误，例如

拒绝加载图像“https://apollo-server-landing-page.cdn.apollographql.com/_latest/assets/favicon.png”，因为它违反了以下内容安全策略指令：“img-src 'self'数据：“。

graphql:22 拒绝加载图像“https://apollo-server-landing-page.cdn.apollographql.com/_latest/assets/favicon.png”，因为它违反了以下内容安全策略指令：“img-src ‘自我’数据：”。

graphql:1 拒绝加载脚本 'https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.Production.min.js?runtime=%40apollo%2Fserver%404.7.4' 因为它违反了以下内容安全策略指令：“script-src 'self'”。请注意，“script-src-elem”未明确设置，因此“script-src”用作后备。

graphql:71 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'”。启用内联执行需要“unsafe-inline”关键字、哈希值（“sha256-OK7pAH5PWuMz0B3Z+8KJD+AVvhgLxb2X4W00TmJw2M8=”）或随机数（“nonce-...”）。

拒绝加载图像“https://apollo-server-landing-page.cdn.apollographql.com/_latest/assets/favicon.png”，因为它违反了以下内容安全策略指令：“img-src 'self'数据：“。

graphql:1 拒绝从“https://apollo-server-landing-page.cdn.apollographql.com/_latest/manifest.json”加载清单，因为它违反了以下内容安全策略指令：“default-src 'self ' 请注意，“manifest-src”未显式设置，因此“default-src”用作后备。

我尝试更改配置选项，如此处所述，但没有成功。

有人遇到过同样的行为并解决了吗？

我尝试按照文档中的描述设置选项，但不起作用。

Answer 1

事实证明，这是 NestJS

main.ts

中与内容安全策略相关的配置问题：

app.use(helmet({
  crossOriginEmbedderPolicy: false,
  contentSecurityPolicy: {
    directives: {
      imgSrc: [`'self'`, 'data:', 'apollo-server-landing-page.cdn.apollographql.com'],
      scriptSrc: [`'self'`, `https: 'unsafe-inline'`],
      manifestSrc: [`'self'`, 'apollo-server-landing-page.cdn.apollographql.com'],
      frameSrc: [`'self'`, 'sandbox.embed.apollographql.com'],
    },
  },
}));

参见https://docs.nestjs.com/security/helmet。

Answer 2

您可以使用 ApolloServerPluginLandingPageLocalDefault

 import {ApolloServerPluginLandingPageLocalDefault} from '@apollo/server/plugin/landingPage/default';

 GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      playground: false,
      //use apollo playground
      plugins: [ApolloServerPluginLandingPageLocalDefault()],
    }),

官方文档中提到 https://docs.nestjs.com/graphql/quick-start#apollo-sandbox