Content Security Policy and CDN Scripts

[ferdaarikan]

We are using the Server.All package to allow our users to be able to pick their GraphQL UI from Altair, Playground and GraphiQL. We have an asp .net core application serving those UI's in relevant routes.

However, we started to get failures recently when loading/running CDN scripts. Mainly due to CSP and browser behavior changes.

I know this is not directly Server.All related but if these were standalone javascript apps I could have replaced cdn scripts with same-origin (hosted) ones such that I don't need to adjust and CSP setting.

To an extent I can adjust Content-Security-Policy on my server such that most issues are solved but I still get errors for some of the CDN scripts.

I wonder if there is a better fix to this or is anything planned or are there others experiencing these issues?

[Shane32]

I have not experienced this issue myself. Does this happen with all 3 - Altair, Playground and GraphiQL ? Is there a specific version of Chrome or Edge that reproduces this problem? Is there a configuration that can be used to replicate the problem? Is there any publicly available pages which exhibit this issue?

GraphQL.NET Server provides these packages to allow users to quickly configure a user interface for their GraphQL endpoint. It uses the CDN links as we do not intend to redistribute these packages directly within the GraphQL.NET Server package. I also believe that the UI packages use 'floating' versions of the UI (all except GraphiQL). As such, if/as the UI package changes, it could break an application, and we may need to release an update to fix the issue.

You can embed the UI of your own choice directly into your application if you desire. For instance, if your users need to authenticate to use the GraphQL endpoint, you may want a tailored version of the UI package which pulls authentication data from the rest of your site. An embedded copy of a UI package would not be subject to XSS content restrictions. This is outside the scope of GraphQL.NET Server.

[ferdaarikan]

Thanks @Shane32 for quick reply

There isn't a public example as far as I am aware. I think this happens with all UI's in some ways as they depend on different scripts. I created a very simple reproducer with a fake schema using altair but easy to extend to others. You can run introspection queries in the example.

GraphQL.NET Server provides these packages to allow users to quickly configure a user interface for their GraphQL endpoint. It uses the CDN links as we do not intend to redistribute these packages directly within the GraphQL.NET Server package. I also believe that the UI packages use 'floating' versions of the UI (all except GraphiQL). As such, if/as the UI package changes, it could break an application, and we may need to release an update to fix the issue.

We are very happy with this approach and Server.All provides a neat way to include those into our applications.

We can already use authentication via Server.All, our server authenticates every request such that anything served needs to have the appropriate permissions, this applies to UI's as well.

If you run the app and browse to ./ui/altair you can see the loading error in console. There are many errors in the screenshot but they are Visual Studio hot reload related I think.

The last one in the screenshot is the concerning one.

By the way the error doesn't break the UI's core functionality, such that still docs and queries work but some functionality is not available such as Plugins and post request scripts don't work.

GraphQLServerExample.zip

I am using Firefox 121.0.1 and Chrome 120.0.6099.217

[Shane32]

I see what you mean. It's not that the site won't load the javascript from the CDN, but some of the code inside it won't run properly because it's sandboxed or something like that.

[ferdaarikan]

It seems the exact issue is caused by trying to load cross origin worker script.

I also managed to find a corresponding issue in Altair repo altair-graphql/altair#1254

Apparently they have a fallback solution I am not sure if the error needs to be ignored but in their fiddle also pre/post request scripts don't work. I will try to see if they have a solution over there.

[ferdaarikan]

The issue I created in Altair altair-graphql/altair#2403 seems to be fixed via altair-graphql/altair#2416 though I didn't have a chance to try it yet. Since server all pulls the latest of the ui dist's would it be fair to assume that we don't need to do any updates in graphql dotnet server.

[Shane32]

Thanks for the update. Perhaps when you test it, then just close this issue?

[ferdaarikan]

This seems to be fixed this time via altair-graphql/altair/pull/2492 though not released yet. I will close this issue anyway as this issue is not needed anymore. I understand that once altair is released we will be able to pick that up via cdn.

[ferdaarikan]

This issue is closed but thought might be good to have a resolution. The issue is now fixed in altair v7.1.0 as mentioned here altair-graphql/altair#2403 and it works as expected. No change required in dotnet tools by the looks of it.