Graphql-playground: Not loading due to Content Security Policy Directive on CDN requests

Created on 4 Oct 2020 · 6Comments · Source: graphql/graphql-playground

This issue pertains to the following package(s):

[ ] GraphQL Playground - Electron App
[ ] GraphQL Playground HTML
[x] GraphQL Playground
[x] 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/[email protected]/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/[email protected]/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/[email protected]/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._

Source

tconroy

👍6 👀2

Most helpful comment

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 }));

CatsMiaow on 5 Oct 2020

👍59 🎉36 🚀16 ❤14

All 6 comments

@tconroy I could get rid of a view errors with passing these options:

const playground: PlaygroundConfig = {
  cdnUrl: 'https://cdn.jsdelivr.net/npm',
  faviconUrl: '',
};

The two errors related to index.css and middleware.js still remain.

package.json //... "apollo-server-core": "^2.18.1", "apollo-server-express": "^2.18.1", "express": "^4.17.1", "graphql": "^15.3.0", "graphql-tools": "^6.2.3",

bke-daniel on 5 Oct 2020

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 }));

CatsMiaow on 5 Oct 2020

👍59 🎉36 🚀16 ❤14

Ah, brilliant! That was the same case as me @CatsMiaow -- was using a boilerplate and wasn't aware of the Helmet config. The value you set works perfectly. Thank you for the help!

tconroy on 5 Oct 2020

Where does the helmet config live? I've had a similar issue open for over a year (#1069) and I have no idea where to make this modification. I have no idea what helmet even is; the playground in my case is bundled with ... I'm not even sure, to be honest. Presumably one of these:

    "@apollo/gateway": "^0.6.13",
    "apollo-datasource-rest": "^0.5.0",
    "apollo-server": "^2.9.5",
    "apollo-server-testing": "^2.8.0",

pavellishin on 21 Oct 2020

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 }));

Is there any issue in setting contentSecurityPolicy to undefined in production?