Graphiql cannot be used with helmet on fresh browsers

[capaj]

ATM graphiql cannot be used with helmet. This config has worked for me in the past, but I suspect new browser versions broke it:

app.register(fastifyCors)
  const trustedDomains = ['https://unpkg.com']

  app.register(fastifyHelmet, {
    // TODO figure this out
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"].concat(
          trustedDomains
        ),

        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"].concat(
          trustedDomains
        ),
        styleSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"].concat(
          trustedDomains
        )
      }
    }
  })

and with the newest chrome(100)/firefox(99) I started getting:

main.js:11          GET https://unpkg.com/[email protected]/browser/client.js net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
(anonymous) @ main.js:11
url @ main.js:5
urls @ main.js:15
importDependencies @ main.js:50
Promise.then (async)
(anonymous) @ main.js:62
main.js:48          GET https://unpkg.com/[email protected]/graphiql.css net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
importDependencies @ main.js:48
Promise.then (async)
(anonymous) @ main.js:62
main.js:11          GET https://unpkg.com/[email protected]/graphiql.min.js net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

But it worked a few chrome versions back for sure.
As a workaround I won't use helmet for now, but it certainly isn't ideal.

Not sure how to fix it-maybe as a workaround serve those packages from node_modules?

[mcollina]

I would still prefer to keep serving them from unpkg so that we avoid their weight on the package and avoid a build step here. Anyway, everything is up for grabs.

[mcollina]

When was this changed? Because things where working for me two weeks ago.

[conradthegray]

I'm looking into this. I have recreated the issue.

[conradthegray]

From what I gathered, unpkg is not sending the required header to allow cross-origin content loading. There is an issue for that in unpkg repo mjackson/unpkg#290

Here are the possible solutions:

1. switch from unpkg to https://www.jsdelivr.com/ I've made a test change and it works. The downside is that this could be a breaking change. For example, with that solution the code above would need to be changed to allow jsdelivr to load content
2. add crossOrigin attribute to files loaded from unpkg. Here is a draft PR showing how it would look like fix: allow cross origin loading for graphiql #775

[kurtmilam]

For a little more detail about the underlying cause of the behavior:

1. helmet sends a Cross-Origin-Embedder-Policy: require-corp (COEP) header, by default.
2. unpkg should send a Cross-Origin-Resource-Policy: cross-origin (CORP) header with its resources, but it doesn't. In the absence of this header, the browser defaults to 'same-origin' for this setting, and refuses to load scripts from unpkg via non CORS requests.
3. Adding the crossorigin='anonymous' attribute to links to scripts hosted by unpkg forces the requests to be made as anonymous CORS requests, which then succeed because unpkg's CORS settings do allow cross-site embedding via CORS requests.

As to why this started to fail recently, I haven't found the exact culprit, but this article on COEP and COOP suggests that browsers have been actively adjusting the way they handle COEP recently.

[mcollina]

Can we document what config is needed for helmet to work?