Description

Reflected XSS in GraphQL Playground

Impact

directly impacted:

graphql-playground-html@<1.6.22 - all unsanitized user input for renderPlaygroundPage()

all of our consuming packages of graphql-playground-html are impacted:

graphql-playground-middleware-express@<1.7.16 - unsanitized user input to expressPlayground()

graphql-playground-middleware-koa@<1.6.15 - unsanitized user input to koaPlayground()

graphql-playground-middleware-lambda@<1.7.17 - unsanitized user input to lambdaPlayground()

graphql-playground-middleware-hapi@<1.6.13 - unsanitized user input to hapiPlayground()

as well as any other packages that use these methods with unsanitized user input.

not impacted:

graphql-playground-electron - uses renderPlaygroundPage() statically for a webpack build for electron bundle, no dynamic user input

graphql-playground-react - usage of the component directly in a react application does not expose reflected XSS vulnerabilities. only the demo in public/ contains the vulnerability, because it uses an old version of the html pacakge.

Patches

upgrading to the above mentioned versions will solve the issue.

If you're using graphql-playground-html directly, then:

yarn add graphql-playground-html@^1.6.22

or

npm install --save graphql-playground-html@^1.6.22

Then, similar steps need to be taken for each middleware:

Upgrade Express Middleware

Upgrade Koa Middleware

Upgrade Lambda Middleware

Upgrade Hapi Middleware

Workarounds

Ensure you properly sanitize all user input for options you use for whatever function to initialize GraphQLPlayground:

for example, with graphql-playground-html and express:

const { sanitizeUrl } = require('@braintree/sanitize-url');

const qs = require('querystringify');

const { renderPlaygroundPage } = require('graphql-playground-html');

module.exports = (req, res, next) => {
	const { endpoint } = qs.parse(req.url)...
Show more

or, with graphql-playground-express:

const { expressPlayground } = require('graphql-playground-middleware-express');
const { sanitizeUrl } = require('@braintree/sanitize-url');

const qs = require('querystringify');

const { renderPlaygroundPage } = require('graphql-playground-html');

module.exports = (req, res, next) => {...
Show more

References

OWASP: How to Test for CSS Reflection Attacks

Original Report from Cure53 (jpg)

Credits

Masato Kinugawa of Cure53

For more information

If you have any questions or comments about this advisory:

Open an issue in graphql-playground

Email us at [email protected]

Mitigation

Aliases

References