GraphQL Playground introspection schema template injection attack: Advisory Statement
This is a security advisory for an XSS vulnerability in graphql-playground.
A similar vulnerability affects graphiql, the package from which graphql-playground was forked. There is a corresponding graphiql advisory.
1. Impact
All versions of graphql-playground-react older than [email protected] are vulnerable to compromised HTTP schema introspection responses or schema prop values with malicious GraphQL type names, exposing a dynamic XSS attack surface that can allow code injection on operation autocomplete.
In order for the attack to take place, the user must load a malicious schema in graphql-playground. There are several ways this can occur, including by specifying the URL to a malicious schema in the endpoint query parameter. If a user clicks on a link to a GraphQL Playground installation that specifies a malicious server, arbitrary JavaScript can run in the user's browser, which can be used to exfiltrate user credentials or other harmful goals.
2. Scope
This advisory describes the impact on the graphql-playground-react package. The vulnerability also affects graphiql, the package from which graphql-playground was forked, with a less severe impact; see the graphiql advisory for details. It affects all versions of graphql-playground-react older than v1.7.28.
This vulnerability was introduced with the first public release of graphql-playground, so it impacts both the original legacy graphql-playground and the contemporary graphql-playground-react npm package. It is most easily exploited on [email protected] and newer, as that release added functionality which made it possible to override the endpoint URL via query parameter even if it is explicitly specified in the code.
graphql-playground-react is commonly loaded via the graphql-playground-html package or a middleware package that wraps it (graphql-playground-express, graphql-playground-middleware-koa, graphql-playground-middleware-hapi, or graphql-playground-middleware-lambda). By default, these packages render an HTML page which loads the latest version of graphql-playground-react through a CDN. If you are using one of these packages to install GraphQL Playground on your domain and you do not explicitly pass the version option to renderPlaygroundPage or the middleware function, then you do not need to take any action to resolve this vulnerability, as the latest version of the React app will automatically be loaded.
graphql-playground-react is also commonly loaded via HTML served by Apollo Server. Apollo Server always pins a specific version of graphql-playground-react, so if you are using Apollo Server you do need to take action to resolve this vulnerability. See the Apollo Server advisory for details.
3. Patches
[email protected] addresses this issue via defense in depth:
-
HTML-escaping text that should be treated as text rather than HTML. In most of the app, this happens automatically because React escapes all interpolated text by default. However, one vulnerable component uses the unsafe innerHTML API and interpolated type names directly into HTML. We now properly escape that type name, which fixes the known vulnerability.
-
Validates the schema upon receiving the introspection response or schema changes. Schemas with names that violate the GraphQL spec will no longer be loaded. (This includes preventing the Doc Explorer from loading.) This change is also sufficient to fix the known vulnerability.
-
Ensuring that user-generated HTML is safe. Schemas can contain Markdown in description and deprecationReason fields, and the web app renders them to HTML using the markdown-it library. Prior to [email protected], GraphQL Playground used two separate libraries to render Markdown: markdown-it and marked. As part of the development of [email protected], we verified that our use of markdown-it prevents the inclusion of arbitrary HTML. We use markdown-it without setting html: true, so we are comfortable relying on markdown-it's HTML escaping here. We considered running a second level of sanitization over all rendered Markdown using a library such as dompurify but believe that is unnecessary as markdown-it's sanitization appears to be adequate. [email protected] does update to the latest version of markdown-it (v12, from v10) so that any security fixes in v11 and v12 will take effect. On the other hand, marked recommends the use of a separate HTML sanitizer if its input is untrusted. In this release, we switch the one component which uses marked to use markdown-it like the rest of the app.
If you are using graphql-playground-react directly in your client app, upgrade to version 1.7.28 or later.
If you are using graphql-playground-html or a package which starts with graphql-playground-middleware- in your server and you are passing the version option to a function imported from that package, change that version option to be at least "1.7.28".
If you are using graphql-playground-html or a package which starts with graphql-playground-middleware- in your server and you are NOT passing the version option to a function imported from that package, no action is necessary; your app automatically loads the latest version of graphql-playground-react from CDN.
4. Reproducing the exploit
We are hosting a "malicious" server at https://graphql-xss-schema.netlify.app/graphql . This server has a hard-coded introspection result that includes unsafe HTML in type names.
If you manually change a GraphQL Playground installation to use that endpoint, clear the operation pane, and type {x into the operation pane, an alert will pop up; this demonstrates execution of code provided by the malicious server.
An URL like https://YOUR-PLAYGROUND-SERVER/?endpoint=https%3A%2F%2Fgraphql-xss-schema.netlify.app%2Fgraphql&query=%7B will load already configured with the endpoint in question. (This URL-based exploit works on [email protected] and newer; older versions may be protected from this particular URL-based exploit depending on their configuration.)
5. Credit
This vulnerability was discovered by @Ry0taK, thank you! 🥇
Others who contributed:
6. For more information
If you have any questions or comments about this advisory:
GraphQL Playground introspection schema template injection attack: Advisory Statement
This is a security advisory for an XSS vulnerability in
graphql-playground.A similar vulnerability affects
graphiql, the package from whichgraphql-playgroundwas forked. There is a correspondinggraphiqladvisory.1. Impact
All versions of
graphql-playground-reactolder than[email protected]are vulnerable to compromised HTTP schema introspection responses orschemaprop values with malicious GraphQL type names, exposing a dynamic XSS attack surface that can allow code injection on operation autocomplete.In order for the attack to take place, the user must load a malicious schema in
graphql-playground. There are several ways this can occur, including by specifying the URL to a malicious schema in theendpointquery parameter. If a user clicks on a link to a GraphQL Playground installation that specifies a malicious server, arbitrary JavaScript can run in the user's browser, which can be used to exfiltrate user credentials or other harmful goals.2. Scope
This advisory describes the impact on the
graphql-playground-reactpackage. The vulnerability also affectsgraphiql, the package from whichgraphql-playgroundwas forked, with a less severe impact; see thegraphiqladvisory for details. It affects all versions ofgraphql-playground-reactolder thanv1.7.28.This vulnerability was introduced with the first public release of
graphql-playground, so it impacts both the original legacygraphql-playgroundand the contemporarygraphql-playground-reactnpm package. It is most easily exploited on[email protected]and newer, as that release added functionality which made it possible to override the endpoint URL via query parameter even if it is explicitly specified in the code.graphql-playground-reactis commonly loaded via thegraphql-playground-htmlpackage or a middleware package that wraps it (graphql-playground-express,graphql-playground-middleware-koa,graphql-playground-middleware-hapi, orgraphql-playground-middleware-lambda). By default, these packages render an HTML page which loads the latest version ofgraphql-playground-reactthrough a CDN. If you are using one of these packages to install GraphQL Playground on your domain and you do not explicitly pass theversionoption torenderPlaygroundPageor the middleware function, then you do not need to take any action to resolve this vulnerability, as the latest version of the React app will automatically be loaded.graphql-playground-reactis also commonly loaded via HTML served by Apollo Server. Apollo Server always pins a specific version ofgraphql-playground-react, so if you are using Apollo Server you do need to take action to resolve this vulnerability. See the Apollo Server advisory for details.3. Patches
[email protected]addresses this issue via defense in depth:HTML-escaping text that should be treated as text rather than HTML. In most of the app, this happens automatically because React escapes all interpolated text by default. However, one vulnerable component uses the unsafe
innerHTMLAPI and interpolated type names directly into HTML. We now properly escape that type name, which fixes the known vulnerability.Validates the schema upon receiving the introspection response or schema changes. Schemas with names that violate the GraphQL spec will no longer be loaded. (This includes preventing the Doc Explorer from loading.) This change is also sufficient to fix the known vulnerability.
Ensuring that user-generated HTML is safe. Schemas can contain Markdown in
descriptionanddeprecationReasonfields, and the web app renders them to HTML using themarkdown-itlibrary. Prior to[email protected], GraphQL Playground used two separate libraries to render Markdown:markdown-itandmarked. As part of the development of[email protected], we verified that our use ofmarkdown-itprevents the inclusion of arbitrary HTML. We usemarkdown-itwithout settinghtml: true, so we are comfortable relying onmarkdown-it's HTML escaping here. We considered running a second level of sanitization over all rendered Markdown using a library such asdompurifybut believe that is unnecessary asmarkdown-it's sanitization appears to be adequate.[email protected]does update to the latest version ofmarkdown-it(v12, from v10) so that any security fixes in v11 and v12 will take effect. On the other hand,markedrecommends the use of a separate HTML sanitizer if its input is untrusted. In this release, we switch the one component which usesmarkedto usemarkdown-itlike the rest of the app.If you are using
graphql-playground-reactdirectly in your client app, upgrade to version 1.7.28 or later.If you are using
graphql-playground-htmlor a package which starts withgraphql-playground-middleware-in your server and you are passing theversionoption to a function imported from that package, change thatversionoption to be at least"1.7.28".If you are using
graphql-playground-htmlor a package which starts withgraphql-playground-middleware-in your server and you are NOT passing theversionoption to a function imported from that package, no action is necessary; your app automatically loads the latest version ofgraphql-playground-reactfrom CDN.4. Reproducing the exploit
We are hosting a "malicious" server at https://graphql-xss-schema.netlify.app/graphql . This server has a hard-coded introspection result that includes unsafe HTML in type names.
If you manually change a GraphQL Playground installation to use that endpoint, clear the operation pane, and type
{xinto the operation pane, an alert will pop up; this demonstrates execution of code provided by the malicious server.An URL like https://YOUR-PLAYGROUND-SERVER/?endpoint=https%3A%2F%2Fgraphql-xss-schema.netlify.app%2Fgraphql&query=%7B will load already configured with the endpoint in question. (This URL-based exploit works on
[email protected]and newer; older versions may be protected from this particular URL-based exploit depending on their configuration.)5. Credit
This vulnerability was discovered by @Ry0taK, thank you! 🥇
Others who contributed:
6. For more information
If you have any questions or comments about this advisory:
graphiqladvisory document contains more information about how both the client-side and server-side vulnerabilities work