CVE-2020-4038: Reflected XSS in GraphQL Playground
Summary
CVE-2020-4038: Reflected XSS in GraphQL Playground. Affects graphql-playground-html versions < 1.6.22. Fixed in 1.6.22. How to fix ↓
Check if this vulnerability affects your application
Upload a manifest or SBOM and we'll show whether you're affected, plus every other risky package in the same scan.
No signup required · Results in about 60 seconds
Background
The package under scrutiny is graphql-playground-html, an npm package used for rendering the GraphQL Playground interface. It allows users to interact with GraphQL APIs and execute queries. The package includes several middleware packages for popular frameworks like Express, Koa, Lambda, and Hapi. These middleware packages provide easy integration of the GraphQL Playground into applications built with these frameworks. However, versions prior to 1.6.22 of graphql-playground-html and its middleware packages are vulnerable to a reflected cross-site scripting (XSS) attack.
Vulnerability Detail
The vulnerability allows an attacker to inject malicious scripts into the GraphQL Playground interface, which are then executed in the context of the user's browser. This can lead to various attacks, such as stealing sensitive information, session hijacking, or performing actions on behalf of the user. The vulnerability arises from unsanitized user input in the renderPlaygroundPage() function of graphql-playground-html and its corresponding middleware functions. Any package that uses these methods with unsanitized user input is also affected. The impact is considered high, with a CVSS score of 7.4.
How To Fix
Minimum fixed version
1.6.22
This is the first release that contains the fix.
npm install graphql-playground-html@1.6.22Tip — Not sure which version your app runs? Vulert can match this fix to it. Scan free →
Workaround
A workaround to mitigate the vulnerability is to properly sanitize all user input for options used to initialize GraphQL Playground. For example, with graphql-playground-html and Express, the following code snippet demonstrates how to sanitize the 'endpoint' option:
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();
}
Conclusion
The vulnerability in graphql-playground-html and its middleware packages can be mitigated by upgrading to version 1.6.22 or higher. It is crucial to sanitize all user input used to initialize GraphQL Playground to prevent reflected XSS attacks. For further support on vulnerability remediation, please contact DevNack.com.
See every vulnerability recorded for graphql-playground-html →
FAQ
The vulnerability allows an attacker to execute arbitrary scripts in the context of the user's browser, potentially leading to sensitive information theft or unauthorized actions on behalf of the user.
All versions prior to 1.6.22 of graphql-playground-html are affected.
Yes, all middleware packages of graphql-playground-html, including graphql-playground-middleware-express, graphql-playground-middleware-koa, graphql-playground-middleware-lambda, and graphql-playground-middleware-hapi, are affected if they use unsanitized user input.
No, the graphql-playground-electron package is not affected as it uses a static webpack build for the electron bundle and does not have dynamic user input.
No, the usage of the graphql-playground-react component directly in a React application does not expose reflected XSS vulnerabilities. Only the demo in the 'public/' directory contains the vulnerability due to its use of an old version of the html package.
