graphql-yoga and helmet

[Marsup]

Hi,

I've just started using this module in an express app, it's very basic so far, a simple createYoga passed as a middleware to the express app. The problem I have is I can only access graphiql when I disable helmet (very simple as well, a default helmet() is used as middleware), otherwise I get CSP errors like so:

Is there any known fix to this? Has anyone managed to set up CSP properly to make graphiql work?

Thanks.

[EmrysMyrddin]

Hi,
Since the GraphiQL page is actually loaded from unpkg.com, you need to configure helmet to allow execution of scripts from this source. You will also need to allow inline scripts execution since GraphiQL is bundled using Webpack, which rely on injection of script tags at runtime.

Here is an example that worked for me:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        'style-src': ["'self'", 'unpkg.com'],
        'script-src': ["'self'", 'unpkg.com', "'unsafe-inline'"],
        'img-src': ["'self'", 'raw.githubusercontent.com']
      }
    }
  })
)

If you want this configuration to be enabled only for the graphiql route (to avoid enabling unsafe-inline everywhere on your site), you can use an express.Router and configure helmet both in the router and for globaly for the rest of your server:

import express from 'express'
import helmet from 'helmet'

const app = express()

const yoga = createYoga()
const yogaRouter = express.Router()
// GraphiQL specefic CSP configuration
yogaRouter.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        'style-src': ["'self'", 'unpkg.com'],
        'script-src': ["'self'", 'unpkg.com', "'unsafe-inline'"],
        'img-src': ["'self'", 'raw.githubusercontent.com']
      }
    }
  })
)
yogaRouter.use(yoga)

// By adding the GraphQL Yoga router before the global helmet middleware,
// you can be sure that the global CSP configuration will not be applied to the GraphQL Yoga endpoint
app.use(yoga.graphqlEndpoint, yogaRouter)

// Add the global CSP configuration for the rest of your server.
app.use(helmet())

// You can know register your other endpoints that will not be affected by the GraphiQL CSP configuration
app.get('/hello', (req, res) => {
  res.send('Hello World!')
})

app.listen(4000, () => {
  console.log('Running a GraphQL API server at http://localhost:4000/graphql')
})

You can find a working example of this configuration in this not yet merged PR: #2902

[Marsup]

Thanks a lot, it worked like a charm! 🙇🏻‍♂️