Not loading due to Content Security Policy Directive on CDN requests

This issue pertains to the following package(s):

• GraphQL Playground - Electron App
• GraphQL Playground HTML
• GraphQL Playground
• GraphQL Playground Express Middleware
• GraphQL Playground Hapi Middleware
• GraphQL Playground Koa Middleware
• GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

MacOS 10.15.6 (Catalina), all browsers.

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

latest

What is the expected behavior?

I would expect to load the GraphQL playground.

What is the actual behavior?

Stuck at “Loading GraphQL Playground” screen with the following errors in console:

Refused to load the image 'http://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react@1.7.33/build/favicon.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".

graphql:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react@1.7.33/build/static/js/middleware.js' 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:531 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-PT+YOJyhu3IamY7Pf1cnvQbDxlHIK2FjqtA7GQoyN5U='), or a nonce ('nonce-...') is required to enable inline execution.

graphql:1 Refused to load the image 'https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react@1.7.33/build/favicon.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".

What steps may we take to reproduce the behavior?

Attempt to visit graphql-playground.

Please provide a gif or image of the issue for a quicker response/fix.

[CatsMiaow]

I had the same problem and solved it. This is a problem with setting the “Content-Security-Policy” header value that the web server responds. need to delete or modify the setting.

In my case, the helmet module was responding, and I solved it by modifying it as follows.

app.use(helmet({ contentSecurityPolicy: (process.env.NODE_ENV === 'production') ? undefined : false }));

[kweij]

For those of you running into this after upgrading helmet to v5 or higher (as I did), you will also get a console error and blocked response because of COEP/CORP headers (in Chrome, but not in Firefox). This happens because the initial request to cdn.jsdelivr.com yields a 307 Temporary Redirect from http to https (because of the HSTS configuration on the jsdelivr side). This redirect itself does not contain the proper CORP headers – I think.

I have addressed this at jsdelivr’s repo: https://github.com/jsdelivr/jsdelivr/issues/18201#issuecomment-1012912236

To circumvent this, also disable the crossOriginEmbedderPolicy header:

  app.use(helmet({ contentSecurityPolicy: false, crossOriginEmbedderPolicy: false }))