Skip to content

Reflected XSS in GraphQL Playground React, HTML and Middlewares

High
acao published GHSA-4852-vrh7-28rf Jun 7, 2020

Package

npm graphql-playground-react (npm)

Affected versions

< 1.6.24

Patched versions

1.6.24

Description

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:

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)
	res.html(renderPlaygroundPage({endpoint: sanitizeUrl(endpoint) })).status(200)
	next()
}

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) => {
	const { endpoint } = qs.parse(req.url)
	res.html(expressPlayground({endpoint: sanitizeUrl(endpoint) })).status(200)
	next()
}

References

Credits

Masato Kinugawa of Cure53

For more information

If you have any questions or comments about this advisory:

Severity

High

CVSS overall score

This score calculates overall vulnerability severity from 0 to 10 and is based on the Common Vulnerability Scoring System (CVSS).
/ 10

CVSS v3 base metrics

Attack vector
Network
Attack complexity
High
Privileges required
None
User interaction
Required
Scope
Unchanged
Confidentiality
High
Integrity
High
Availability
Low

CVSS v3 base metrics

Attack vector: More severe the more the remote (logically and physically) an attacker can be in order to exploit the vulnerability.
Attack complexity: More severe for the least complex attacks.
Privileges required: More severe if no privileges are required.
User interaction: More severe when no user interaction is required.
Scope: More severe when a scope change occurs, e.g. one vulnerable component impacts resources in components beyond its security scope.
Confidentiality: More severe when loss of data confidentiality is highest, measuring the level of data access available to an unauthorized user.
Integrity: More severe when loss of data integrity is the highest, measuring the consequence of data modification possible by an unauthorized user.
Availability: More severe when the loss of impacted component availability is highest.
CVSS:3.1/AV:N/AC:H/PR:N/UI:R/S:U/C:H/I:H/A:L

CVE ID

CVE-2020-4038

Weaknesses