diff --git a/README.md b/README.md index ef1a5803..2a648193 100644 --- a/README.md +++ b/README.md @@ -348,6 +348,41 @@ getGraphQLParams(request).then((params) => { }); ``` +### Integration with other express middlewares + +#### [Helmet](https://helmetjs.github.io/) + +When using Helmet the default CSP of helmet blocks graphiql's inline scripts support. To enable graphiql with helmet you need to update the contentSecurityPolicies with graphiql's needs. +The code snippet below makes use of Helmet's default CSP and adds what graphiql needs. + +```js +app.use( + helmet({ + /** + * Default helmet policy + own customizations - graphiql support + * - https://helmetjs.github.io/ + */ + contentSecurityPolicy: { + directives: { + ...helmet.contentSecurityPolicy.getDefaultDirectives(), + ['default-src']: [ + ...helmet.contentSecurityPolicy.getDefaultDirectives()['default-src'], + /** @by-us - adds graphiql support over helmet's default CSP */ + "'unsafe-inline'", + ], + ['script-src']: [ + ...helmet.contentSecurityPolicy.getDefaultDirectives()['script-src'], + /** @by-us - adds graphiql support over helmet's default CSP */ + "'unsafe-inline'", + /** @by-us - adds graphiql support over helmet's default CSP */ + "'unsafe-eval'", + ], + }, + }, + }), +); +``` + ## Debugging Tips During development, it's useful to get more information from errors, such as diff --git a/cspell.json b/cspell.json index b96b05ac..b939e042 100644 --- a/cspell.json +++ b/cspell.json @@ -14,7 +14,10 @@ "tsconfig.json" ], "words": [ + "eval", "graphiql", + "graphiql's", + "middlewares", "unfetch", "noindex", "codecov",