CVE-2021-41249

GraphQL Playground is a GraphQL IDE for development of graphQL focused applications. 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. If you are using graphql-playground-react directly in your client app, upgrade to version 1.7.28 or later.

GraphQL Playground is a GraphQL IDE for development of graphQL focused applications. 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. If you are using graphql-playground-react directly in your client app, upgrade to version 1.7.28 or later.

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
• 2. Scope
• 3. Patches
• 4. Reproducing the exploit
• 5. Credit
• 6. For more information

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…

GraphQL Playground is a GraphQL IDE for development of graphQL focused applications. 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. If you are using graphql-playground-react directly in your client app, upgrade to version 1.7.28 or later.

GraphQL Playground is a GraphQL IDE for development of graphQL focused applications. 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. If you are using graphql-playground-react directly in your client app, upgrade to version 1.7.28 or later.

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
• 2. Scope
• 3. Patches
• 4. Reproducing the exploit
• 5. Credit
• 6. For more information

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…