How To Config Apollo Sandbox for GraphQL in NestJS?

Question

I am trying to use Apollo Sandbox for GraphQL in NestJs since I had to upgrade to apollo/server from apollo-server-express.

I added the configuration like described in the NestJS docs. I also checked the Apollo Docs.

My setup is now like described here.

Here is what I use:

"@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"

Now when I access the playground it says:

Welcome to Apollo Server
Apollo Sandbox cannot be loaded; it appears that you might be offline.

In the console, I see a bunch of script loading errors such as

Refused to load the image ‘https://apollo-server-landing-page.cdn.apollographql.com/_latest/assets/favicon.png’ because it violates the following Content Security Policy directive: "img-src ‘self’ data:".

graphql:22 Refused to load the image ‘https://apollo-server-landing-page.cdn.apollographql.com/_latest/assets/favicon.png’ because it violates the following Content Security Policy directive: "img-src ‘self’ data:".

graphql:1 Refused to load the script ‘https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js?runtime=%40apollo%2Fserver%404.7.4’ because it violates the following Content Security Policy directive: "script-src ‘self’". Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.

graphql:71 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src ‘self’". Either the ‘unsafe-inline’ keyword, a hash (‘sha256-OK7pAH5PWuMz0B3Z+8KJD+AVvhgLxb2X4W00TmJw2M8=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Refused to load the image ‘https://apollo-server-landing-page.cdn.apollographql.com/_latest/assets/favicon.png’ because it violates the following Content Security Policy directive: "img-src ‘self’ data:".

graphql:1 Refused to load manifest from ‘https://apollo-server-landing-page.cdn.apollographql.com/_latest/manifest.json’ because it violates the following Content Security Policy directive: "default-src ‘self’
Note that ‘manifest-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

I tried to change the config options like described here but without success.

Did anyone experience the same behaviour and solve it?

I tried to set the options as described in the docs but it does not work.

score 1 · Accepted Answer · 2023-07-11 16:13:17Z

Turns out that this was a configuration issue in NestJS’s main.ts related to content security policy:

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'],
    },
  },
}));

see https://docs.nestjs.com/security/helmet.

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. — Jul 10 at 15:02

Waqas AliWaqas Ali 1011 silver badge3 bronze badges · Accepted Answer · 2023-11-07 13:47:56Z

You can use ApolloServerPluginLandingPageLocalDefault

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

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

mentioned in official docs
https://docs.nestjs.com/graphql/quick-start#apollo-sandbox

How To Config Apollo Sandbox for GraphQL in NestJS?