-
Notifications
You must be signed in to change notification settings - Fork 728
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not loading due to Content Security Policy Directive on CDN requests #1283
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 //...
"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", |
I had the same problem and solved it. 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 })); |
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! |
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:
|
Is there any issue in setting |
https://github.com/helmetjs/helmet/blob/d491d281eb1cc55380046532d24fbc314af836e0/index.ts#L69-L75 |
Disabling contentSecurityPolicy for development is not the best idea, since developers will not notice something does not work until it's in the production. I think the graphql playground should have all the scripts as npm development dependencies and not hosted on cdn.jsdelivr.net. Another solution is whitelisting cdn.jsdelivr.net in CSP, but it is not a good idea, since anyone can upload anything on jsdelivr.net, which makes the CSP useless. |
This should be reopened. |
I'm only tangentially familiar with this particular issue, but why not use inline styles and other assets for the gql playground? This would also make it functional when offline, and as far as I'm aware, the playground is typically used for development, not for users in production. |
Well you don't want to disable CSP headers for development envs, because you will miss other issues with it, up until production, on your API. The other approach for this might be generating proper exclusions for CSP headers, I think. |
And what about the opposite? @zsolt-dev
That way we have enabled CSP in other environments but localhost... PD: yes this only works if you don't want to publish the playground... |
For those of you running into this after upgrading I have addressed this at jsdelivr's repo: jsdelivr/jsdelivr#18201 (comment) To circumvent this, also disable the
|
@kweij you're the hero of the day, thanks for taking the time to add this precise comment, thanks!!! |
@bke-daniel |
I have filed a bug at Chrome for this (the COEP / CORP headers) issue, as it seems that this is not the way the browser should handle this (i.e.: HSTS redirects should be internal to the browser and not expect CORP headers): https://bugs.chromium.org/p/chromium/issues/detail?id=1287500 EDIT: A fix has been made Jan 19, 2022 👍 |
I'm facing this currently, localhost:4000/graphql was working fine an hour back and now it's gone down. First the request took a long time to fetch and then when I reinstalled all of my modules, the apollo server doesn't even run |
If you want to still have CSP headers but limit it somewhat (instead of disabling entirely)
|
Thanks you so much, I was trying to setup the graphql playground but it stayed at the loading..., until I google for a some minutes I came across of this post. thanks |
Correct me if I'm wrong but this issue is still ongoing as there is no current fix for production Open APIs serving this playground. |
Adding
|
Unfortunately, this does not work for me. Maybe I need to define different settings?
Any hint is appreciated! |
@krisgardiner Are you still using the same setup? I saw "@apollo/server-plugin-landing-page-graphql-playground" is now deprecated. My setup is now as in https://docs.nestjs.com/graphql/quick-start#apollo-sandbox, but it does not work. The HTML source looks as follows: <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-b5693f538f65c3b4938853dfcf85ff99c16ab6ef4dc5341e87b0c69ccbafa012' https://apollo-server-landing-page.cdn.apollographql.com https://embeddable-sandbox.cdn.apollographql.com https://embeddable-explorer.cdn.apollographql.com; style-src 'nonce-b5693f538f65c3b4938853dfcf85ff99c16ab6ef4dc5341e87b0c69ccbafa012' https://apollo-server-landing-page.cdn.apollographql.com https://embeddable-sandbox.cdn.apollographql.com https://embeddable-explorer.cdn.apollographql.com https://fonts.googleapis.com; img-src https://apollo-server-landing-page.cdn.apollographql.com; manifest-src https://apollo-server-landing-page.cdn.apollographql.com; frame-src https://explorer.embed.apollographql.com https://sandbox.embed.apollographql.com https://embed.apollo.local:3000" />
...
<script nonce="b5693f538f65c3b4938853dfcf85ff99c16ab6ef4dc5341e87b0c69ccbafa012">
var initialEndpoint = window.location.href;
var embeddedSandboxConfig = {"target":"#embeddableSandbox","initialState":{"headers":{"Content-Security-Policy":"default-src \u0027self' https://apollo-server-landing-page.cdn.apollographql.com;"}},"hideCookieToggle":false,"endpointIsEditable":false,"runtime":"@apollo/server@4.7.5","runTelemetry":true,"allowDynamicStyles":false};
new window.EmbeddedSandbox(
{
...embeddedSandboxConfig,
initialEndpoint,
}
);
</script>
|
It was a config issue with content security policy, see https://docs.nestjs.com/security/helmet |
for anyone who might be interested, here is an example of how to load the new graphiql as an apollo server plugin: https://codesandbox.io/p/sandbox/apollo-server-w-graphiql-8xbnju we are pushing forward on adding the |
I just spent a good 2 days of my life that I will never get back trying to figure this out -- the config in the nestjs docs worked beautifully. Thank you! |
@johnson-elugbadebo oh man thanks this works so fine! |
This issue pertains to the following package(s):
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:
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.
![image](https://user-images.githubusercontent.com/1609336/95022652-97d92580-0646-11eb-87e1-9fac4ba1dddb.png)
The text was updated successfully, but these errors were encountered: