CVE-2021-41249: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting') (CWE-79)
value: GraphQL Playground is a GraphQL IDE for development of graphQL focused applications. All versions of graphql-playground-react older than graphql-playground-react@1.7.28 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.
CWE description: The product does not neutralize or incorrectly neutralizes user-controllable input before it is placed in output that is used as a web page that is served to other users.
CVSS v3 base score: 4.7
Published: 2021-11-04T20:15Z
Repository: https://github.com/graphql/graphql-playground
Language: Markdown
Files changed: SECURITY.md, docs/security/2020-xss-template-injection.md, docs/security/2021-schema-xss-phishing-attack.md, packages/graphql-playground-react/package.json, packages/graphql-playground-react/src/__snapshots__/index.test.tsx.snap, packages/graphql-playground-react/src/components/Playground.tsx, packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts, packages/graphql-playground-react/src/components/Playground/onHasCompletion.tsx, packages/graphql-playground-react/src/components/Playground/util/InvalidSchemaError.ts, yarn.lock
Commit date: 2021-11-04 18:55:09 +0100
Commit message: Merge pull request from GHSA-59r9-6jp6-jcm7

This change fixes an XSS vulnerability that has been present since the first
commit of GraphQL Playground when used with an untrusted GraphQL server. It applies three
strategies to fix via defense-in-depth: HTML escaping a string in a context
that uses innerHTML; validating incoming schemas with graphql-js validateSchema;
and using a single up-to-date Markdown library.

See docs/security/2021-introspection-schema-xss.md for more details.
Diff: diff --git a/SECURITY.md b/SECURITY.md
index faafc91..aaf08d8 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -1,138 +1,4 @@
 # Known Vulnerabilities
 
-## XSS Reflection Vulnerability
-
-the origin of the vulnerability is in `renderPlaygroundPage`, found in `graphql-playground-html`
-
-### Impact
-
-When using
-
-- `renderPlaygroundPage()`,
-- `koaPlayground()`
-- `expressPlayground()`
-- `koaPlayground()`
-- `lambdaPlayground()`
-- any downstream dependent packages that use these functions
-
-without sanitization of user input, your application is vulnerable to an XSS Reflecton Attack. This is a serious vulnerability that could allow for exfiltration of data or user credentials, or to disrupt systems.
-
-We've provided ['an example of the xss using the express middleware]('https://github.com/prisma-labs/graphql-playground/tree/main/packages/graphql-playground-middleware-express/examples/xss-attack')
-
-### Impacted Packages
-
-**All versions of these packages are impacted until those specified below**, which are now safe for user defined input:
-
-- `graphql-playground-html`: **☔ safe** @ `1.6.22`
-- `graphql-playground-express` **☔ safe** @ `1.7.16`
-- `graphql-playground-koa` **☔ safe** @ `1.6.15`
-- `graphql-playground-hapi` **☔ safe** @ `1.6.13`
-- `graphql-playground-lambda` **☔ safe** @ `1.7.17`
-
-### Static input was always safe
-
-These examples are safe for _all versions_ **because input is static**
-
-with `express` and `renderPlaygroundPage`:
-
-```js
-app.get('/playground', (req) => {
-  res.html(
-    renderPlaygroundPage({
-      endpoint: `/our/graphql`,
-    }),
-  )
-  next()
-})
-```
-
-with `expressPlayground`:
-
-```js
-// params
-app.get('/playground', (req) =>
-  expressPlayground({
-    endpoint: `/our/graphql`,
-    settings: { 'editor.theme': req.query.darkMode ? 'dark' : 'light' },
-  }),
-)
-```
-
-with `koaPlayground`:
-
-```js
-const koa = require('koa')
-const koaRouter = require('koa-router')
-const koaPlayground = require('graphql-playground-middleware-koa')
-
-const app = new koa()
-const router = new koaRouter()
-
-router.all('/playground', koaPlayground({ endpoint: '/graphql' }))
-```
-
-### Vulnerable Examples
-
-Here are some examples where the vulnerability would be present before the patch, because of unfiltered user input
-
-```js
-const express = require('express')
-const expressPlayground = require('graphql-playground-middleware-express')
-  .default
-
-const app = express()
-
-app.use(express.json())
-
-// params
-app.get('/playground/:id', (req) =>
-  expressPlayground({
-    endpoint: `/our/graphql/${req.params.id}`,
-  }),
-)
-
-// params
-app.get('/playground', (req) =>
-  expressPlayground({
-    endpoint: `/our/graphql`,
-    // any settings that are unsanitized user input, not just `endpoint`
-    settings: { 'editor.fontFamily': req.query.font },
-  }),
-)
-```
-
-[See a proof of concept](packages/graphql-playground-html/examples/xss-attack) to understand the vulnerability better
-
-### Workaround
-
-To fix this issue without the update, you can sanitize however you want.
-
-We suggest using [`xss`](https://www.npmjs.com/package/xss) (what we use for our own fix)
-
-For example, with `graphql-playground-middleware-express`:
-
-```js
-const express = require('express')
-const { filterXSS } = require('xss')
-const expressPlayground = require('graphql-playground-middleware-express')
-  .default
-
-
-const app = express()
-
-const filter = (val) => filterXSS(val, {
-  whitelist: [],
-  stripIgnoreTag: true,
-  stripIgnoreTagBody: ['script']
-})
-
-// simple example
-app.get('/playground/:id', (req) =>
-  expressPlayground({ endpoint: `/graphql/${filter(req.params.id)}` })
-
-// advanced params
-app.get('/playground', (req) =>
-  expressPlayground(JSON.parse(filter(JSON.stringify(req.query))))
-```
-
-[See a proof of concept workaround](packages/graphql-playground-html/examples/xss-attack), example #3
+- [2021: Introspection Schema Phishing Attack XSS Vulnerability](docs/security/2021-schema-xss-phishing-attack.md)
+- [2020: XSS Reflection Vulnerability](docs/security/2020-xss-template-injection.md)
diff --git a/docs/security/2020-xss-template-injection.md b/docs/security/2020-xss-template-injection.md
new file mode 100644
index 0000000..485b7da
--- /dev/null
+++ b/docs/security/2020-xss-template-injection.md
@@ -0,0 +1,136 @@
+## XSS Reflection Vulnerability
+
+the origin of the vulnerability is in `renderPlaygroundPage`, found in `graphql-playground-html`
+
+### Impact
+
+When using
+
+- `renderPlaygroundPage()`,
+- `koaPlayground()`
+- `expressPlayground()`
+- `koaPlayground()`
+- `lambdaPlayground()`
+- any downstream dependent packages that use these functions
+
+without sanitization of user input, your application is vulnerable to an XSS Reflection Attack. This is a serious vulnerability that could allow for exfiltration of data or user credentials, or to disrupt systems.
+
+We've provided ['an example of the xss using the express middleware]('https://github.com/prisma-labs/graphql-playground/tree/main/packages/graphql-playground-middleware-express/examples/xss-attack')
+
+### Impacted Packages
+
+**All versions of these packages are impacted until those specified below**, which are now safe for user defined input:
+
+- `graphql-playground-html`: **☔ safe** @ `1.6.22`
+- `graphql-playground-express` **☔ safe** @ `1.7.16`
+- `graphql-playground-koa` **☔ safe** @ `1.6.15`
+- `graphql-playground-hapi` **☔ safe** @ `1.6.13`
+- `graphql-playground-lambda` **☔ safe** @ `1.7.17`
+
+### Static input was always safe
+
+These examples are safe for _all versions_ **because input is static**
+
+with `express` and `renderPlaygroundPage`:
+
+```js
+app.get('/playground', (req) => {
+  res.html(
+    renderPlaygroundPage({
+      endpoint: `/our/graphql`,
+    }),
+  )
+  next()
+})
+```
+
+with `expressPlayground`:
+
+```js
+// params
+app.get('/playground', (req) =>
+  expressPlayground({
+    endpoint: `/our/graphql`,
+    settings: { 'editor.theme': req.query.darkMode ? 'dark' : 'light' },
+  }),
+)
+```
+
+with `koaPlayground`:
+
+```js
+const koa = require('koa')
+const koaRouter = require('koa-router')
+const koaPlayground = require('graphql-playground-middleware-koa')
+
+const app = new koa()
+const router = new koaRouter()
+
+router.all('/playground', koaPlayground({ endpoint: '/graphql' }))
+```
+
+### Vulnerable Examples
+
+Here are some examples where the vulnerability would be present before the patch, because of unfiltered user input
+
+```js
+const express = require('express')
+const expressPlayground = require('graphql-playground-middleware-express')
+  .default
+
+const app = express()
+
+app.use(express.json())
+
+// params
+app.get('/playground/:id', (req) =>
+  expressPlayground({
+    endpoint: `/our/graphql/${req.params.id}`,
+  }),
+)
+
+// params
+app.get('/playground', (req) =>
+  expressPlayground({
+    endpoint: `/our/graphql`,
+    // any settings that are unsanitized user input, not just `endpoint`
+    settings: { 'editor.fontFamily': req.query.font },
+  }),
+)
+```
+
+[See a proof of concept](packages/graphql-playground-html/examples/xss-attack) to understand the vulnerability better
+
+### Workaround
+
+To fix this issue without the update, you can sanitize however you want.
+
+We suggest using [`xss`](https://www.npmjs.com/package/xss) (what we use for our own fix)
+
+For example, with `graphql-playground-middleware-express`:
+
+```js
+const express = require('express')
+const { filterXSS } = require('xss')
+const expressPlayground = require('graphql-playground-middleware-express')
+  .default
+
+
+const app = express()
+
+const filter = (val) => filterXSS(val, {
+  whitelist: [],
+  stripIgnoreTag: true,
+  stripIgnoreTagBody: ['script']
+})
+
+// simple example
+app.get('/playground/:id', (req) =>
+  expressPlayground({ endpoint: `/graphql/${filter(req.params.id)}` })
+
+// advanced params
+app.get('/playground', (req) =>
+  expressPlayground(JSON.parse(filter(JSON.stringify(req.query))))
+```
+
+[See a proof of concept workaround](packages/graphql-playground-html/examples/xss-attack), example #3
diff --git a/docs/security/2021-schema-xss-phishing-attack.md b/docs/security/2021-schema-xss-phishing-attack.md
new file mode 100644
index 0000000..ff069a0
--- /dev/null
+++ b/docs/security/2021-schema-xss-phishing-attack.md
@@ -0,0 +1,74 @@
+## 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](https://github.com/graphql/graphiql/security/advisories/GHSA-x4r7-m2q9-69c8).
+
+- [1. Impact](#1-impact)
+- [2. Scope](#2-scope)
+- [3. Patches](#3-patches)
+- [4. Reproducing the exploit](#4-reproducing-the-exploit)
+- [5. Credit](#5-credit)
+- [6. For more information](#6-for-more-information)
+
+### 1. Impact
+
+All versions of `graphql-playground-react` older than `graphql-playground-react@1.7.28` 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](https://github.com/graphql/graphiql/security/advisories/GHSA-x4r7-m2q9-69c8) 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 `graphql-playground-react@1.7.0` 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](https://github.com/apollographql/apollo-server/security/advisories/GHSA-qm7x-rc44-rrqw) for details.
+
+
+### 3. Patches
+
+`graphql-playground-react@1.7.28` 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 `graphql-playground-react@1.7.28`, GraphQL Playground used two separate libraries to render Markdown: `markdown-it` and `marked`. As part of the development of `graphql-playground-react@1.7.28`, 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](https://github.com/markdown-it/markdown-it/blob/master/docs/security.md) 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. `graphiql@1.4.3` 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`](https://github.com/markedjs/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 `graphql-playground-react@1.7.0` 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](https://github.com/Ry0taK), thank you! :1st_place_medal:
+
+Others who contributed:
+
+- extensive help from [@glasser](https://github.com/glasser) at [Apollo](https://github.com/apollographql)
+- [@acao](https://github.com/acao)
+- [@imolorhe](https://github.com/imolorhe)
+- [@divyenduz](https://github.com/divyenduz)
+- [@dotansimha](https://github.com/dotansimha)
+- [@timsuchanek](http://github.com/timsuchanek)
+- [@benjie](https://github.com/Ry0taK) and many others who provided morale support
+
+### 6. For more information
+
+If you have any questions or comments about this advisory:
+
+- The `graphiql` advisory document contains [more information](https://github.com/graphql/graphiql/blob/main/docs/security/2021-introspection-schema-xss.md#2-more-details-on-the-vulnerability) about how both the client-side and server-side vulnerabilities work
+- Open an issue in the [graphql-playground repo](https://github.com/graphql/graphql-playground/new/issues)
diff --git a/packages/graphql-playground-react/package.json b/packages/graphql-playground-react/package.json
index aacf1f1..9081d1d 100644
--- a/packages/graphql-playground-react/package.json
+++ b/packages/graphql-playground-react/package.json
@@ -50,11 +50,13 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@types/deasync": "0.1.0",
+    "@types/escape-html": "^1.0.1",
     "@types/jest": "22.2.3",
+    "@types/markdown-it": "^12.2.3",
     "@types/node": "12.12.34",
     "@types/react": "16.9.32",
     "@types/zen-observable": "^0.5.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.4.2",
@@ -117,21 +119,22 @@
     "codemirror": "^5.58.1",
     "codemirror-graphql": "^0.12.3",
     "copy-to-clipboard": "^3.0.8",
     "cryptiles": "4.1.2",
     "cuid": "^1.3.8",
+    "escape-html": "^1.0.3",
     "graphiql": "^0.17.5",
     "graphql": "^15.3.0",
     "immutable": "^4.0.0-rc.9",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.10.0",
     "json-stable-stringify": "^1.0.1",
     "keycode": "^2.1.9",
     "lodash": "^4.17.11",
     "lodash.debounce": "^4.0.8",
-    "markdown-it": "^8.4.1",
-    "marked": "^0.8.2",
+    "lru-cache": "^6.0.0",
+    "markdown-it": "^12.2.0",
     "prettier": "2.0.2",
     "prop-types": "^15.7.2",
     "query-string": "5",
     "react": "16.13.1",
     "react-addons-shallow-compare": "^15.6.2",
diff --git a/packages/graphql-playground-react/src/__snapshots__/index.test.tsx.snap b/packages/graphql-playground-react/src/__snapshots__/index.test.tsx.snap
index 0af6719..3a9ec6b 100644
--- a/packages/graphql-playground-react/src/__snapshots__/index.test.tsx.snap
+++ b/packages/graphql-playground-react/src/__snapshots__/index.test.tsx.snap
@@ -92,11 +92,11 @@ exports[`test MiddleWareApp passed default headers 1`] = `
         >
           <div
             class="sc-EHOje cIypmL"
           >
             <div
-              class="sc-ifAKCX dAtAHQ"
+              class="sc-ifAKCX cEPVvT"
             >
               <div
                 class="sc-cvbbAY kOflzg"
               >
                 <button
@@ -140,11 +140,11 @@ exports[`test MiddleWareApp passed default headers 1`] = `
               >
                 <div
                   class="sc-cMhqgX dUUizb"
                 >
                   <div
-                    class="sc-ifAKCX dAtAHQ"
+                    class="sc-ifAKCX cEPVvT"
                   >
                     <div
                       class="sc-bZQynM imcoIY"
                     />
                   </div>
@@ -401,11 +401,11 @@ exports[`test MiddleWareApp with tabs 1`] = `
         >
           <div
             class="sc-EHOje cIypmL"
           >
             <div
-              class="sc-ifAKCX dAtAHQ"
+              class="sc-ifAKCX cEPVvT"
             >
               <div
                 class="sc-cvbbAY kOflzg"
               >
                 <button
@@ -449,11 +449,11 @@ exports[`test MiddleWareApp with tabs 1`] = `
               >
                 <div
                   class="sc-cMhqgX dUUizb"
                 >
                   <div
-                    class="sc-ifAKCX dAtAHQ"
+                    class="sc-ifAKCX cEPVvT"
                   >
                     <div
                       class="sc-bZQynM imcoIY"
                     />
                   </div>
@@ -710,11 +710,11 @@ exports[`test MiddleWareApp without tabs 1`] = `
         >
           <div
             class="sc-EHOje cIypmL"
           >
             <div
-              class="sc-ifAKCX dAtAHQ"
+              class="sc-ifAKCX cEPVvT"
             >
               <div
                 class="sc-cvbbAY kOflzg"
               >
                 <button
@@ -758,11 +758,11 @@ exports[`test MiddleWareApp without tabs 1`] = `
               >
                 <div
                   class="sc-cMhqgX dUUizb"
                 >
                   <div
-                    class="sc-ifAKCX dAtAHQ"
+                    class="sc-ifAKCX cEPVvT"
                   >
                     <div
                       class="sc-bZQynM imcoIY"
                     />
                   </div>
diff --git a/packages/graphql-playground-react/src/components/Playground.tsx b/packages/graphql-playground-react/src/components/Playground.tsx
index 77efc7d..8f40b44 100644
--- a/packages/graphql-playground-react/src/components/Playground.tsx
+++ b/packages/graphql-playground-react/src/components/Playground.tsx
@@ -25,11 +25,11 @@ import {
   schemaFetchingError,
   schemaFetchingSuccess,
 } from '../state/sessions/actions'
 import { setConfigString } from '../state/general/actions'
 import { initState } from '../state/workspace/actions'
-import { GraphQLSchema } from 'graphql'
+import { GraphQLSchema, validateSchema } from 'graphql'
 import { createStructuredSelector } from 'reselect'
 import {
   getIsConfigTab,
   getIsSettingsTab,
   getIsFile,
@@ -49,10 +49,11 @@ import { Session } from '../state/sessions/reducers'
 import { getWorkspaceId } from './Playground/util/getWorkspaceId'
 import { getSettings, getSettingsString } from '../state/workspace/reducers'
 import { Backoff } from './Playground/util/fibonacci-backoff'
 import { debounce } from 'lodash'
 import { cachedPrintSchema } from './util'
+import { InvalidSchemaError } from './Playground/util/InvalidSchemaError'
 
 export interface Response {
   resultID: string
   date: string
   time: Date
@@ -180,10 +181,17 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
   private initialSchemaFetch = true
 
   constructor(props: Props & ReduxProps) {
     super(props)
 
+    if (props.schema) {
+      const validationErrors = validateSchema(props.schema)
+      if (validationErrors && validationErrors.length > 0) {
+        throw new InvalidSchemaError(validationErrors);
+      }  
+    }
+
     this.state = {
       schema: props.schema,
     }
     ;(global as any).p = this
 
@@ -245,10 +253,14 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     }
     if (nextProps.configString !== this.props.configString) {
       this.props.setConfigString(nextProps.configString)
     }
     if (nextProps.schema !== this.props.schema) {
+      const validationErrors = validateSchema(nextProps.schema)
+      if (validationErrors && validationErrors.length > 0) {
+        throw new InvalidSchemaError(validationErrors);
+      }  
       this.setState({ schema: nextProps.schema })
     }
   }
 
   async schemaGetter(propsInput?: Props & ReduxProps) {
diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts b/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts
index 9c64054..05d080d 100644
--- a/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts
+++ b/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts
@@ -1,12 +1,15 @@
 import {
   GraphQLSchema,
   getIntrospectionQuery,
   buildClientSchema,
+  validateSchema,
+  IntrospectionQuery,
 } from 'graphql'
 import { NoSchemaError } from './util/NoSchemaError'
-import { ApolloLink, execute } from 'apollo-link'
+import { InvalidSchemaError } from './util/InvalidSchemaError'
+import { ApolloLink, execute, toPromise } from 'apollo-link'
 import { Map, set } from 'immutable'
 import { makeOperation } from './util/makeOperation'
 import { parseHeaders } from './util/parseHeaders'
 import { LinkCreatorProps } from '../../state/sessions/fetchingSagas'
 import * as LRU from 'lru-cache'
@@ -90,77 +93,78 @@ export class SchemaFetcher {
     return this.fetchSchema(session)
   }
   hash(session: SchemaFetchProps) {
     return `${session.endpoint}~${session.headers || ''}`
   }
-  private getSchema(data: any) {
+  private getSchema(data: IntrospectionQuery) {
     const schemaString = JSON.stringify(data)
     const cachedSchema = this.schemaInstanceCache.get(schemaString)
     if (cachedSchema) {
       return cachedSchema
     }
 
-    const schema = buildClientSchema(data as any)
+    const schema = buildClientSchema(data)
 
+    const validationErrors = validateSchema(schema)
+    if (validationErrors && validationErrors.length > 0) {
+      throw new InvalidSchemaError(validationErrors)
+    }
     this.schemaInstanceCache.set(schemaString, schema)
 
     return schema
   }
-  private fetchSchema(
+  private async fetchSchema(
     session: SchemaFetchProps,
   ): Promise<{ schema: GraphQLSchema; tracingSupported: boolean } | null> {
     const hash = this.hash(session)
-    const { endpoint } = session
-    const headersTracing = {
-      ...parseHeaders(session.headers),
-      'X-Apollo-Tracing': '1',
-    }
-    const headersNoTracing = {
-      ...parseHeaders(session.headers),
-    }
-    const headers = session.useTracingHeader ? headersTracing : headersNoTracing
+    try {
+      const { endpoint } = session
+      const headersTracing = {
+        ...parseHeaders(session.headers),
+        'X-Apollo-Tracing': '1',
+      }
+      const headersNoTracing = {
+        ...parseHeaders(session.headers),
+      }
+      const headers = session.useTracingHeader
+        ? headersTracing
+        : headersNoTracing
 
-    const options = set(session, 'headers', headers) as any
+      const options = set(session, 'headers', headers) as any
 
-    const { link } = this.linkGetter(options)
+      const { link } = this.linkGetter(options)
 
-    const operation = makeOperation({ query: getIntrospectionQuery() })
+      const operation = makeOperation({ query: getIntrospectionQuery() })
 
-    return new Promise((resolve, reject) => {
-      execute(link, operation).subscribe({
-        next: schemaData => {
-          if (
-            schemaData &&
-            ((schemaData.errors && schemaData.errors.length > 0) ||
-              !schemaData.data)
-          ) {
-            throw new Error(JSON.stringify(schemaData, null, 2))
-          }
+      const schemaData = await toPromise(execute(link, operation))
+      if (
+        schemaData &&
+        ((schemaData.errors && schemaData.errors.length > 0) ||
+          !schemaData.data)
+      ) {
+        throw new Error(JSON.stringify(schemaData, null, 2))
+      }
 
-          if (!schemaData) {
-            throw new NoSchemaError(endpoint)
-          }
+      if (!schemaData) {
+        throw new NoSchemaError(endpoint)
+      }
 
-          const schema = this.getSchema(schemaData.data as any)
-          const tracingSupported =
-            (schemaData.extensions && Boolean(schemaData.extensions.tracing)) ||
-            false
-          const result: TracingSchemaTuple = {
-            schema,
-            tracingSupported,
-          }
-          this.sessionCache.set(this.hash(session), result)
-          resolve(result)
-          this.fetching = this.fetching.remove(hash)
-          const subscription = this.subscriptions.get(hash)
-          if (subscription) {
-            subscription(result.schema)
-          }
-        },
-        error: err => {
-          reject(err)
-          this.fetching = this.fetching.remove(this.hash(session))
-        },
-      })
-    })
+      const schema = this.getSchema(schemaData.data as IntrospectionQuery)
+
+      const tracingSupported =
+        (schemaData.extensions && Boolean(schemaData.extensions.tracing)) ||
+        false
+      const result: TracingSchemaTuple = {
+        schema,
+        tracingSupported,
+      }
+      this.sessionCache.set(this.hash(session), result)
+      const subscription = this.subscriptions.get(hash)
+      if (subscription) {
+        subscription(result.schema)
+      }
+      return result
+    } finally {
+      this.fetching.remove(hash)
+    }
   }
 }
diff --git a/packages/graphql-playground-react/src/components/Playground/onHasCompletion.tsx b/packages/graphql-playground-react/src/components/Playground/onHasCompletion.tsx
index 1106386..9afba22 100644
--- a/packages/graphql-playground-react/src/components/Playground/onHasCompletion.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/onHasCompletion.tsx
@@ -4,11 +4,14 @@
  *
  *  This source code is licensed under the license found in the
  *  LICENSE file in the root directory of this source tree.
  */
 
-import * as marked from 'marked'
+const escapeHTML = require('escape-html');
+import * as MD from 'markdown-it';
+
+const md = new MD();
 
 /**
  * Render a custom UI for CodeMirror's hint which includes additional info
  * about the type and description for the selected context.
  */
@@ -99,11 +102,11 @@ export default function onHasCompletion(cm, data, onHintInformationRender) {
       )
     }
 
     // Now that the UI has been set up, add info to information.
     const description = ctx.description
-      ? marked(ctx.description, { sanitize: true })
+      ? md.render(ctx.description)
       : ''
     const type =
       ctx.type && ctx.type !== 'undefined'
         ? '<span class="infoType">' + renderType(ctx.type) + '</span>'
         : ''
@@ -115,11 +118,11 @@ export default function onHasCompletion(cm, data, onHintInformationRender) {
         : type + description) +
       '</div>'
 
     if (ctx.isDeprecated) {
       const reason = ctx.deprecationReason
-        ? marked(ctx.deprecationReason, { sanitize: true })
+        ? md.render(ctx.deprecationReason)
         : ''
       deprecation.innerHTML =
         '<span class="deprecation-label">Deprecated</span>' + reason
       deprecation.style.display = 'block'
     } else {
@@ -132,7 +135,7 @@ export default function onHasCompletion(cm, data, onHintInformationRender) {
     }
   })
 }
 
 function renderType(type) {
-  return `<a class="typeName">${type}</a>`
+  return `<a class="typeName">${escapeHTML(type.toString())}</a>`
 }
diff --git a/packages/graphql-playground-react/src/components/Playground/util/InvalidSchemaError.ts b/packages/graphql-playground-react/src/components/Playground/util/InvalidSchemaError.ts
new file mode 100644
index 0000000..551f486
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/util/InvalidSchemaError.ts
@@ -0,0 +1,9 @@
+import type { GraphQLError } from "graphql";
+
+export class InvalidSchemaError extends Error {
+  constructor(validationErrors: readonly GraphQLError[]) {
+    super(
+      `Invalid schema Error:\n${validationErrors.join('\n')}`,
+    )
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 33e1f56..8e11c21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2312,10 +2312,15 @@
 "@types/debug@^4.1.5":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
   integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
 
+"@types/escape-html@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.1.tgz#b19b4646915f0ae2c306bf984dc0a59c5cfc97ba"
+  integrity sha512-4mI1FuUUZiuT95fSVqvZxp/ssQK9zsa86S43h9x3zPOSU9BBJ+BfDkXwuaU7BfsD+e7U0/cUUfJFk3iW2M4okA==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
   integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
 
@@ -2356,15 +2361,33 @@
 "@types/json-schema@^7.0.6":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
+"@types/linkify-it@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
+  integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
+
 "@types/lru-cache@^4.1.1":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-4.1.2.tgz#528ba392658055dba78fc3be906ca338a1a2d1c5"
   integrity sha512-ve2IoUJClE+4S/sG2zoLGEHP6DCvqgyz7UkHZdiICdQaAYRaCXsRWfJlbL8B0KvUyo9lgzD+oR0YSy4YikFyFQ==
 
+"@types/markdown-it@^12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
+  integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
+  dependencies:
+    "@types/linkify-it" "*"
+    "@types/mdurl" "*"
+
+"@types/mdurl@*":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
+  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
@@ -3090,10 +3113,15 @@ argparse@^1.0.7:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
   integrity sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=
   dependencies:
@@ -6916,10 +6944,15 @@ entities@^1.1.1, entities@~1.1.1:
 entities@^2.0.0, entities@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
   integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
 
+entities@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+
 env-paths@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
   integrity sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==
 
@@ -10699,10 +10732,17 @@ linkify-it@^2.0.0:
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
   integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
   dependencies:
     uc.micro "^1.0.1"
 
+linkify-it@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
+  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-6.1.0.tgz#28f600c10a6cbd249ceb003118a1552e53544a93"
   integrity sha512-RMB6BUd2bEKaPnj06F7j8RRB8OHM+UP4fQS2LT8lF+X9BjSaezw1oVB5hc4elLhYvzlFCkhAaatzYz+x53YHgw==
   dependencies:
@@ -11337,26 +11377,21 @@ markdown-it@^10.0.0:
     entities "~2.0.0"
     linkify-it "^2.0.0"
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-markdown-it@^8.4.1:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
-  integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
+markdown-it@^12.2.0:
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.2.0.tgz#091f720fd5db206f80de7a8d1f1a7035fd0d38db"
+  integrity sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==
   dependencies:
-    argparse "^1.0.7"
-    entities "~1.1.1"
-    linkify-it "^2.0.0"
+    argparse "^2.0.1"
+    entities "~2.1.0"
+    linkify-it "^3.0.1"
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-marked@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
-  integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==
-
 math-expression-evaluator@^1.2.14:
   version "1.2.22"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz#c14dcb3d8b4d150e5dcea9c68c8dad80309b0d5e"
   integrity sha512-L0j0tFVZBQQLeEjmWOvDLoRciIY8gQGWahvkztXUal8jH8R5Rlqo9GCvgqvXcy9LQhEWdQCVvzqAbxgYNt4blQ==
 

Vulnerable code: ## XSS Reflection Vulnerability

the origin of the vulnerability is in `renderPlaygroundPage`, found in `graphql-playground-html`

### Impact

When using

- `renderPlaygroundPage()`,
- `koaPlayground()`
- `expressPlayground()`
- `koaPlayground()`
- `lambdaPlayground()`
- any downstream dependent packages that use these functions

without sanitization of user input, your application is vulnerable to an XSS Reflecton Attack. This is a serious vulnerability that could allow for exfiltration of data or user credentials, or to disrupt systems.

We've provided ['an example of the xss using the express middleware]('https://github.com/prisma-labs/graphql-playground/tree/main/packages/graphql-playground-middleware-express/examples/xss-attack')

### Impacted Packages

**All versions of these packages are impacted until those specified below**, which are now safe for user defined input:

- `graphql-playground-html`: **☔ safe** @ `1.6.22`
- `graphql-playground-express` **☔ safe** @ `1.7.16`
- `graphql-playground-koa` **☔ safe** @ `1.6.15`
- `graphql-playground-hapi` **☔ safe** @ `1.6.13`
- `graphql-playground-lambda` **☔ safe** @ `1.7.17`

### Static input was always safe

These examples are safe for _all versions_ **because input is static**

with `express` and `renderPlaygroundPage`:

```js
app.get('/playground', (req) => {
  res.html(
    renderPlaygroundPage({
      endpoint: `/our/graphql`,
    }),
  )
  next()
})
```

with `expressPlayground`:

```js
// params
app.get('/playground', (req) =>
  expressPlayground({
    endpoint: `/our/graphql`,
    settings: { 'editor.theme': req.query.darkMode ? 'dark' : 'light' },
  }),
)
```

with `koaPlayground`:

```js
const koa = require('koa')
const koaRouter = require('koa-router')
const koaPlayground = require('graphql-playground-middleware-koa')

const app = new koa()
const router = new koaRouter()

router.all('/playground', koaPlayground({ endpoint: '/graphql' }))
```

### Vulnerable Examples

Here are some examples where the vulnerability would be present before the patch, because of unfiltered user input

```js
const express = require('express')
const expressPlayground = require('graphql-playground-middleware-express')
  .default

const app = express()

app.use(express.json())

// params
app.get('/playground/:id', (req) =>
  expressPlayground({
    endpoint: `/our/graphql/${req.params.id}`,
  }),
)

// params
app.get('/playground', (req) =>
  expressPlayground({
    endpoint: `/our/graphql`,
    // any settings that are unsanitized user input, not just `endpoint`
    settings: { 'editor.fontFamily': req.query.font },
  }),
)
```

[See a proof of concept](packages/graphql-playground-html/examples/xss-attack) to understand the vulnerability better

### Workaround

To fix this issue without the update, you can sanitize however you want.

We suggest using [`xss`](https://www.npmjs.com/package/xss) (what we use for our own fix)

For example, with `graphql-playground-middleware-express`:

```js
const express = require('express')
const { filterXSS } = require('xss')
const expressPlayground = require('graphql-playground-middleware-express')
  .default


const app = express()

const filter = (val) => filterXSS(val, {
  whitelist: [],
  stripIgnoreTag: true,
  stripIgnoreTagBody: ['script']
})

// simple example
app.get('/playground/:id', (req) =>
  expressPlayground({ endpoint: `/graphql/${filter(req.params.id)}` })

// advanced params
app.get('/playground', (req) =>
  expressPlayground(JSON.parse(filter(JSON.stringify(req.query))))
```

[See a proof of concept workaround](packages/graphql-playground-html/examples/xss-attack), example #3
    "markdown-it": "^8.4.1",
    "marked": "^0.8.2",
              class="sc-ifAKCX dAtAHQ"
                    class="sc-ifAKCX dAtAHQ"
              class="sc-ifAKCX dAtAHQ"
                    class="sc-ifAKCX dAtAHQ"
              class="sc-ifAKCX dAtAHQ"
                    class="sc-ifAKCX dAtAHQ"
import { GraphQLSchema } from 'graphql'
import { ApolloLink, execute } from 'apollo-link'
  private getSchema(data: any) {
    const schema = buildClientSchema(data as any)
  private fetchSchema(
    const { endpoint } = session
    const headersTracing = {
      ...parseHeaders(session.headers),
      'X-Apollo-Tracing': '1',
    }
    const headersNoTracing = {
      ...parseHeaders(session.headers),
    }
    const headers = session.useTracingHeader ? headersTracing : headersNoTracing
    const options = set(session, 'headers', headers) as any
    const { link } = this.linkGetter(options)
    const operation = makeOperation({ query: getIntrospectionQuery() })
    return new Promise((resolve, reject) => {
      execute(link, operation).subscribe({
        next: schemaData => {
          if (
            schemaData &&
            ((schemaData.errors && schemaData.errors.length > 0) ||
              !schemaData.data)
          ) {
            throw new Error(JSON.stringify(schemaData, null, 2))
          }
          if (!schemaData) {
            throw new NoSchemaError(endpoint)
          }
          const schema = this.getSchema(schemaData.data as any)
          const tracingSupported =
            (schemaData.extensions && Boolean(schemaData.extensions.tracing)) ||
            false
          const result: TracingSchemaTuple = {
            schema,
            tracingSupported,
          }
          this.sessionCache.set(this.hash(session), result)
          resolve(result)
          this.fetching = this.fetching.remove(hash)
          const subscription = this.subscriptions.get(hash)
          if (subscription) {
            subscription(result.schema)
          }
        },
        error: err => {
          reject(err)
          this.fetching = this.fetching.remove(this.hash(session))
        },
      })
    })
import * as marked from 'marked'
      ? marked(ctx.description, { sanitize: true })
        ? marked(ctx.deprecationReason, { sanitize: true })
  return `<a class="typeName">${type}</a>`
markdown-it@^8.4.1:
  version "8.4.2"
  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
  integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
    argparse "^1.0.7"
    entities "~1.1.1"
    linkify-it "^2.0.0"
marked@^0.8.2:
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
  integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==

Fixed code: - [2021: Introspection Schema Phishing Attack XSS Vulnerability](docs/security/2021-schema-xss-phishing-attack.md)
- [2020: XSS Reflection Vulnerability](docs/security/2020-xss-template-injection.md)
## XSS Reflection Vulnerability

the origin of the vulnerability is in `renderPlaygroundPage`, found in `graphql-playground-html`

### Impact

When using

- `renderPlaygroundPage()`,
- `koaPlayground()`
- `expressPlayground()`
- `koaPlayground()`
- `lambdaPlayground()`
- any downstream dependent packages that use these functions

without sanitization of user input, your application is vulnerable to an XSS Reflection Attack. This is a serious vulnerability that could allow for exfiltration of data or user credentials, or to disrupt systems.

We've provided ['an example of the xss using the express middleware]('https://github.com/prisma-labs/graphql-playground/tree/main/packages/graphql-playground-middleware-express/examples/xss-attack')

### Impacted Packages

**All versions of these packages are impacted until those specified below**, which are now safe for user defined input:

- `graphql-playground-html`: **☔ safe** @ `1.6.22`
- `graphql-playground-express` **☔ safe** @ `1.7.16`
- `graphql-playground-koa` **☔ safe** @ `1.6.15`
- `graphql-playground-hapi` **☔ safe** @ `1.6.13`
- `graphql-playground-lambda` **☔ safe** @ `1.7.17`

### Static input was always safe

These examples are safe for _all versions_ **because input is static**

with `express` and `renderPlaygroundPage`:

```js
app.get('/playground', (req) => {
  res.html(
    renderPlaygroundPage({
      endpoint: `/our/graphql`,
    }),
  )
  next()
})
```

with `expressPlayground`:

```js
// params
app.get('/playground', (req) =>
  expressPlayground({
    endpoint: `/our/graphql`,
    settings: { 'editor.theme': req.query.darkMode ? 'dark' : 'light' },
  }),
)
```

with `koaPlayground`:

```js
const koa = require('koa')
const koaRouter = require('koa-router')
const koaPlayground = require('graphql-playground-middleware-koa')

const app = new koa()
const router = new koaRouter()

router.all('/playground', koaPlayground({ endpoint: '/graphql' }))
```

### Vulnerable Examples

Here are some examples where the vulnerability would be present before the patch, because of unfiltered user input

```js
const express = require('express')
const expressPlayground = require('graphql-playground-middleware-express')
  .default

const app = express()

app.use(express.json())

// params
app.get('/playground/:id', (req) =>
  expressPlayground({
    endpoint: `/our/graphql/${req.params.id}`,
  }),
)

// params
app.get('/playground', (req) =>
  expressPlayground({
    endpoint: `/our/graphql`,
    // any settings that are unsanitized user input, not just `endpoint`
    settings: { 'editor.fontFamily': req.query.font },
  }),
)
```

[See a proof of concept](packages/graphql-playground-html/examples/xss-attack) to understand the vulnerability better

### Workaround

To fix this issue without the update, you can sanitize however you want.

We suggest using [`xss`](https://www.npmjs.com/package/xss) (what we use for our own fix)

For example, with `graphql-playground-middleware-express`:

```js
const express = require('express')
const { filterXSS } = require('xss')
const expressPlayground = require('graphql-playground-middleware-express')
  .default


const app = express()

const filter = (val) => filterXSS(val, {
  whitelist: [],
  stripIgnoreTag: true,
  stripIgnoreTagBody: ['script']
})

// simple example
app.get('/playground/:id', (req) =>
  expressPlayground({ endpoint: `/graphql/${filter(req.params.id)}` })

// advanced params
app.get('/playground', (req) =>
  expressPlayground(JSON.parse(filter(JSON.stringify(req.query))))
```

[See a proof of concept workaround](packages/graphql-playground-html/examples/xss-attack), example #3
## 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](https://github.com/graphql/graphiql/security/advisories/GHSA-x4r7-m2q9-69c8).

- [1. Impact](#1-impact)
- [2. Scope](#2-scope)
- [3. Patches](#3-patches)
- [4. Reproducing the exploit](#4-reproducing-the-exploit)
- [5. Credit](#5-credit)
- [6. For more information](#6-for-more-information)

### 1. Impact

All versions of `graphql-playground-react` older than `graphql-playground-react@1.7.28` 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](https://github.com/graphql/graphiql/security/advisories/GHSA-x4r7-m2q9-69c8) 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 `graphql-playground-react@1.7.0` 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](https://github.com/apollographql/apollo-server/security/advisories/GHSA-qm7x-rc44-rrqw) for details.


### 3. Patches

`graphql-playground-react@1.7.28` 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 `graphql-playground-react@1.7.28`, GraphQL Playground used two separate libraries to render Markdown: `markdown-it` and `marked`. As part of the development of `graphql-playground-react@1.7.28`, 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](https://github.com/markdown-it/markdown-it/blob/master/docs/security.md) 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. `graphiql@1.4.3` 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`](https://github.com/markedjs/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 `graphql-playground-react@1.7.0` 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](https://github.com/Ry0taK), thank you! :1st_place_medal:

Others who contributed:

- extensive help from [@glasser](https://github.com/glasser) at [Apollo](https://github.com/apollographql)
- [@acao](https://github.com/acao)
- [@imolorhe](https://github.com/imolorhe)
- [@divyenduz](https://github.com/divyenduz)
- [@dotansimha](https://github.com/dotansimha)
- [@timsuchanek](http://github.com/timsuchanek)
- [@benjie](https://github.com/Ry0taK) and many others who provided morale support

### 6. For more information

If you have any questions or comments about this advisory:

- The `graphiql` advisory document contains [more information](https://github.com/graphql/graphiql/blob/main/docs/security/2021-introspection-schema-xss.md#2-more-details-on-the-vulnerability) about how both the client-side and server-side vulnerabilities work
- Open an issue in the [graphql-playground repo](https://github.com/graphql/graphql-playground/new/issues)
    "@types/escape-html": "^1.0.1",
    "@types/markdown-it": "^12.2.3",
    "escape-html": "^1.0.3",
    "lru-cache": "^6.0.0",
    "markdown-it": "^12.2.0",
              class="sc-ifAKCX cEPVvT"
                    class="sc-ifAKCX cEPVvT"
              class="sc-ifAKCX cEPVvT"
                    class="sc-ifAKCX cEPVvT"
              class="sc-ifAKCX cEPVvT"
                    class="sc-ifAKCX cEPVvT"
import { GraphQLSchema, validateSchema } from 'graphql'
import { InvalidSchemaError } from './Playground/util/InvalidSchemaError'
    if (props.schema) {
      const validationErrors = validateSchema(props.schema)
      if (validationErrors && validationErrors.length > 0) {
        throw new InvalidSchemaError(validationErrors);
      }  
    }

      const validationErrors = validateSchema(nextProps.schema)
      if (validationErrors && validationErrors.length > 0) {
        throw new InvalidSchemaError(validationErrors);
      }  
  validateSchema,
  IntrospectionQuery,
import { InvalidSchemaError } from './util/InvalidSchemaError'
import { ApolloLink, execute, toPromise } from 'apollo-link'
  private getSchema(data: IntrospectionQuery) {
    const schema = buildClientSchema(data)
    const validationErrors = validateSchema(schema)
    if (validationErrors && validationErrors.length > 0) {
      throw new InvalidSchemaError(validationErrors)
    }
  private async fetchSchema(
    try {
      const { endpoint } = session
      const headersTracing = {
        ...parseHeaders(session.headers),
        'X-Apollo-Tracing': '1',
      }
      const headersNoTracing = {
        ...parseHeaders(session.headers),
      }
      const headers = session.useTracingHeader
        ? headersTracing
        : headersNoTracing
      const options = set(session, 'headers', headers) as any
      const { link } = this.linkGetter(options)
      const operation = makeOperation({ query: getIntrospectionQuery() })
      const schemaData = await toPromise(execute(link, operation))
      if (
        schemaData &&
        ((schemaData.errors && schemaData.errors.length > 0) ||
          !schemaData.data)
      ) {
        throw new Error(JSON.stringify(schemaData, null, 2))
      }
      if (!schemaData) {
        throw new NoSchemaError(endpoint)
      }
      const schema = this.getSchema(schemaData.data as IntrospectionQuery)

      const tracingSupported =
        (schemaData.extensions && Boolean(schemaData.extensions.tracing)) ||
        false
      const result: TracingSchemaTuple = {
        schema,
        tracingSupported,
      }
      this.sessionCache.set(this.hash(session), result)
      const subscription = this.subscriptions.get(hash)
      if (subscription) {
        subscription(result.schema)
      }
      return result
    } finally {
      this.fetching.remove(hash)
    }
const escapeHTML = require('escape-html');
import * as MD from 'markdown-it';

const md = new MD();
      ? md.render(ctx.description)
        ? md.render(ctx.deprecationReason)
  return `<a class="typeName">${escapeHTML(type.toString())}</a>`
import type { GraphQLError } from "graphql";

export class InvalidSchemaError extends Error {
  constructor(validationErrors: readonly GraphQLError[]) {
    super(
      `Invalid schema Error:\n${validationErrors.join('\n')}`,
    )
  }
}
"@types/escape-html@^1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.1.tgz#b19b4646915f0ae2c306bf984dc0a59c5cfc97ba"
  integrity sha512-4mI1FuUUZiuT95fSVqvZxp/ssQK9zsa86S43h9x3zPOSU9BBJ+BfDkXwuaU7BfsD+e7U0/cUUfJFk3iW2M4okA==

"@types/linkify-it@*":
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
  integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==

"@types/markdown-it@^12.2.3":
  version "12.2.3"
  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
  integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
  dependencies:
    "@types/linkify-it" "*"
    "@types/mdurl" "*"

"@types/mdurl@*":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==

argparse@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==

entities@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==

linkify-it@^3.0.1:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
  dependencies:
    uc.micro "^1.0.1"

markdown-it@^12.2.0:
  version "12.2.0"
  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.2.0.tgz#091f720fd5db206f80de7a8d1f1a7035fd0d38db"
  integrity sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==
    argparse "^2.0.1"
    entities "~2.1.0"
    linkify-it "^3.0.1"