Not loading due to Content Security Policy Directive on CDN requests
Author: tconroyCreated Oct 4, 2020Updated Feb 15, 2024
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/[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: graphql/graphql-playground