graphql-playground 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
graphql-playground 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
graphql-playground 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT License
开发语言 Java
操作系统 跨平台
软件类型 开源软件
所属分类 大数据数据查询
地区 不详
投 递 者 首席测试
适用人群 未知
收录时间 2021-11-23


Note: The primary maintainer @acao is on hiatus until December 2020

SECURITY WARNING: both graphql-playground-html and all four (4) of it's middleware dependents until graphql-playground-html@1.6.22 were subject to an XSS Reflection attack vulnerability only to unsanitized user input strings to the functions therein. This was resolved in graphql-playground-html@^1.6.22. More Information CVE-2020-4038

npm version prisma-labs

Future of this repository: see the announcement issue for details.

GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).


$ brew install --cask graphql-playground


  • Context-aware autocompletion & error highlighting
  • 📚 Interactive, multi-column docs (keyboard support)
  • ⚡️ Supports real-time GraphQL Subscriptions
  • GraphQL Config support with multiple Projects & Endpoints
  • 🚥 Apollo Tracing support

Security Details

NOTE: only unsanitized user input to the functions in these packages is vulnerable to the recently reported XSS Reflection attack.


Impacted are any and all unsanitized user-defined input to: -renderPlaygroundPage() -koaPlayground() -expressPlayground() -koaPlayground() -`lambdaPlayground()

If you used static values, such as graphql-playground-electron does in it's webpack config, as well as the most common middleware implementations out there, they were not vulnerable to the attack.

The only reason this vulnerability exists is because we are using template strings in renderPlaygroundPage() with potentially unsanitized user defined variables. This allows an attacker to inject html and javascript into the page.

Common examples may be user-defined path parameters, query string, unsanitized UI provided values in database, etc., that are used to build template strings or passed directly to a renderPlaygroundPage() or the matching middleware function equivalent listed above.

Impacted Packages

All versions of these packages are impacted until the ones 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
  • graphql-playground-electron has always been safe from XSS attacks! This is because configuration is statically defined it's webpack config
  • graphql-playground-react is safe because it does not use renderPlaygroundPage() anywhere, and thus is not susceptible to template string XSS reflection attacks.

More Information

See the security docs for more details on how your implementation might be impacted by this vulnerability. It contains safe examples, unsafe examples, workarounds, and more details.

We've also provided 'an example of the xss using the express middleware


How is this different from GraphiQL?

GraphQL Playground uses components of GraphiQL under the hood but is meant as a more powerful GraphQL IDE enabling better (local) development workflows. Compared to GraphiQL, the GraphQL Playground ships with the following additional features:

  • Interactive, multi-column schema documentation
  • Automatic schema reloading
  • Support for GraphQL Subscriptions
  • Query history
  • Configuration of HTTP headers
  • Tabs

See the following question for more additonal features.

What's the difference between the desktop app and the web version?

The desktop app is the same as the web version but includes these additional features:

  • Partial support for graphql-config enabling features like multi-environment setups (no support for sending HTTP headers).
  • Double click on *.graphql files.

How does GraphQL Bin work?

You can easily share your Playgrounds with others by clicking on the "Share" button and sharing the generated link. You can think about GraphQL Bin like Pastebin for your GraphQL queries including the context (endpoint, HTTP headers, open tabs etc).

You can also find the announcement blog post here.


In the top right corner of the Playground window you can click on the settings icon. These are the settings currently available:

  'editor.cursorShape': 'line', // possible values: 'line', 'block', 'underline'
  'editor.fontFamily': `'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace`,
  'editor.fontSize': 14,
  'editor.reuseHeaders': true, // new tab reuses headers from last tab
  'editor.theme': 'dark', // possible values: 'dark', 'light'
  'general.betaUpdates': false,
  'prettier.printWidth': 80,
  'prettier.tabWidth': 2,
  'prettier.useTabs': false,
  'request.credentials': 'omit', // possible values: 'omit', 'include', 'same-origin'
  'schema.polling.enable': true, // enables automatic schema polling
  'schema.polling.endpointFilter': '*localhost*', // endpoint filter for schema polling
  'schema.polling.interval': 2000, // schema polling interval in ms
  'schema.disableComments': boolean,
  'tracing.hideTracingResponse': true,
  'tracing.tracingSupported': true, // set false to remove x-apollo-tracing header from Schema fetch requests



The React component <Playground /> and all middlewares expose the following options:

  • props (Middlewares & React Component)
    • endpoint string - the GraphQL endpoint url.
    • subscriptionEndpoint string - the GraphQL subscriptions endpoint url.
    • workspaceName string - in case you provide a GraphQL Config, you can name your workspace here
    • config string - the JSON of a GraphQL Config. See an example here
    • settings ISettings - Editor settings in json format as described here
interface ISettings {
  'editor.cursorShape': 'line' | 'block' | 'underline'
  'editor.fontFamily': string
  'editor.fontSize': number
  'editor.reuseHeaders': boolean
  'editor.theme': 'dark' | 'light'
  'general.betaUpdates': boolean
  'prettier.printWidth': number
  'prettier.tabWidth': number
  'prettier.useTabs': boolean
  'request.credentials': 'omit' | 'include' | 'same-origin'
  'request.globalHeaders': { [key: string]: string }
  'schema.polling.enable': boolean
  'schema.polling.endpointFilter': string
  'schema.polling.interval': number
  'schema.disableComments': boolean
  'tracing.hideTracingResponse': boolean
  'tracing.tracingSupported': boolean
  • schema IntrospectionResult - The result of an introspection query (an object of this form: {__schema: {...}}) The playground automatically fetches the schema from the endpoint. This is only needed when you want to override the schema.
  • tabs Tab[] - An array of tabs to inject. Note: When using this feature, tabs will be resetted each time the page is reloaded
interface Tab {
  endpoint: string
  query: string
  name?: string
  variables?: string
  responses?: string[]
  headers?: { [key: string]: string }

In addition to this, the React app provides some more properties:

  • props (React Component)
  • createApolloLink [(session: Session, subscriptionEndpoint?: string) => ApolloLink] - this is the equivalent to the fetcher of GraphiQL. For each query that is being executed, this function will be called

createApolloLink is only available in the React Component and not the middlewares, because the content must be serializable as it is being printed into a HTML template.

As HTML Page

If you simply want to render the Playground HTML on your own, for example when implementing a GraphQL Server, there are 2 options for you:

  1. The bare minimum HTML needed to render the Playground
  2. The Playground HTML with full loading animation

Note: In case you do not want to serve assets from a CDN (like jsDelivr) and instead use a local copy, you will need to install graphql-playground-react from npm, and then replace all instances of // with ./node_modules. An example can be found here

As React Component


yarn add graphql-playground-react


GraphQL Playground provides a React component responsible for rendering the UI and Session management. There are 3 dependencies needed in order to run the graphql-playground-react React component.

  1. Open Sans and Source Code Pro fonts
  2. Rendering the <Playground /> component

The GraphQL Playground requires React 16.

Including Fonts (1.)


Including stylesheet and the component (2., 3.)

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Playground, store } from 'graphql-playground-react'

  <Provider store={store}>
    <Playground endpoint='' />

As Server Middleware


# Pick the one that matches your server framework
yarn add graphql-playground-middleware-express  # for Express or Connect
yarn add graphql-playground-middleware-hapi
yarn add graphql-playground-middleware-koa
yarn add graphql-playground-middleware-lambda

Usage with example

We have a full example for each of the frameworks below:

As serverless handler


yarn add graphql-playground-middleware-lambda



import lambdaPlayground from 'graphql-playground-middleware-lambda'
// or using require()
// const lambdaPlayground = require('graphql-playground-middleware-lambda').default

exports.graphqlHandler = function graphqlHandler(event, context, callback) {
  function callbackFilter(error, output) {
    // eslint-disable-next-line no-param-reassign
    output.headers['Access-Control-Allow-Origin'] = '*'
    callback(error, output)

  const handler = graphqlLambda({ schema: myGraphQLSchema })
  return handler(event, context, callbackFilter)

exports.playgroundHandler = lambdaPlayground({
  endpoint: '/dev/graphql',


    handler: handler.graphqlHandler
      - http:
          path: graphql
          method: post
          cors: true
    handler: handler.playgroundHandler
      - http:
          path: playground
          method: get
          cors: true

Security Issue

There is an XSS Reflection Vulnerability when using these middlewares with unsanitized user input before


$ cd packages/graphql-playground-react
$ yarn
$ yarn start

Open localhost:3000/localDev.html?endpoint= for local development!

Contributing to this project

This repository is managed by EasyCLA. Project participants must sign the free (GraphQL Specification Membership agreement before making a contribution. You only need to do this one time, and it can be signed by individual contributors or their employers.

To initiate the signature process please open a PR against this repo. The EasyCLA bot will block the merge if we still need a membership agreement from you.

You can find detailed information here. If you have issues, please email

If your company benefits from GraphQL and you would like to provide essential financial support for the systems and people that power our community, please also consider membership in the GraphQL Foundation.

Custom Theme

From graphql-playground-react@1.7.0 on you can provide a codeTheme property to the React Component to customize your color theme. These are the available options:

export interface EditorColours {
  property: string
  comment: string
  punctuation: string
  keyword: string
  def: string
  qualifier: string
  attribute: string
  number: string
  string: string
  builtin: string
  string2: string
  variable: string
  meta: string
  atom: string
  ws: string
  selection: string
  cursorColor: string
  editorBackground: string
  resultBackground: string
  leftDrawerBackground: string
  rightDrawerBackground: string


This is repository is a "mono repo" and contains multiple packages using Yarn workspaces. Please be aware that versions are not synchronised between packages. The versions of the release page refer to the electron app.


In the folder packages you'll find the following packages:

  • graphql-playground-electron: Cross-platform electron app which uses graphql-playground-react
  • graphql-playground-html: Simple HTML page rendering a version of graphql-playground-react hosted on JSDeliver
  • graphql-playground-middleware-express: Express middleware using graphql-playground-html
  • graphql-playground-middleware-hapi: Hapi middleware using graphql-playground-html
  • graphql-playground-middleware-koa: Koa middleware using graphql-playground-html
  • graphql-playground-middleware-lambda: AWS Lambda middleware using graphql-playground-html
  • graphql-playground-react: Core of GraphQL Playground built with ReactJS

Help & Community Discord

Join our Discord Server if you run into issues or have questions. We love talking to you!





{{o.pubDate | formatDate}}


{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
{{o.pubDate | formatDate}}


{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
Google Chrome 信息泄露漏洞
Google Chrome是美国谷歌(Google)公司的一款Web浏览器。 Google chrome存在信息泄露漏洞,目前尚无此漏洞的更多信息,请随时关注CNNVD或厂商公告.
CVE-2021-37976 MPS-2021-28733
2022-08-08 19:10
Google Chrome堆缓冲区溢出漏洞
Chrome是由Google开发的一款Web浏览工具。                                                Google Chrome 94.0.4606.81之前版本中的WebRTC存在堆缓冲区溢出漏洞。攻击者可利用该漏洞通过精心制作的HTML页面利用堆损坏。
CVE-2021-37979 MPS-2021-28736
2022-08-08 19:10
Google Chrome 缓冲区错误漏洞
Google Chrome是美国谷歌(Google)公司的一款Web浏览器。 Google Chrome 存在缓冲区错误漏洞,该漏洞源于V8浏览器引擎中处理不受信任的HTML内容时边界错误。以下产品及版本受到影响:Google Chrome: 87.0.4280.66, 87.0.4280.141, 88.0.4324.96, 88.0.4324.146, 88.0.4324.150, 88.0.4324.182, 89.0.4389.72, 89.0.4389.90, 89.0.4389.114, 89.0.4389.128, 90.0.4430.72。
CVE-2021-21222 MPS-2021-5214
2022-08-08 19:10
Google Chrome 授权问题漏洞
Google Chrome是美国谷歌(Google)公司的一款Web浏览器。 Google Chrome 存在授权漏洞,该漏洞源于文件系统API组件中发现策略执行安全性不足的问题。
CVE-2021-21141 MPS-2021-1397
2022-08-08 19:10
istanbul-reports 存在通过 window.opener 访问使用指向不受信任目标的 Web 链接漏洞
通过 window.opener 访问使用指向不受信任目标的 Web 链接
由于指向 https://istanbul 的链接中没有 rel 属性,因此该软件包的受影响版本容易受到反向 Tabnabbing 的攻击。
2022-08-08 19:10
validator 存在拒绝服务漏洞
验证器是一个字符串验证器和消毒器库。此软件包的受影响版本通过 isSlug 函数容易受到正则表达式拒绝服务 (ReDoS) 的攻击。
2022-08-08 19:10
GraphQL Playground 跨站脚本漏洞
GraphQL Playground是德国Prisma实验室的一款基于GraphiQL的图形化、交互式、浏览器内的GraphQL IDE(集成开发环境)。 GraphQL Playground 1.4.7之前版本存在跨站脚本漏洞,该漏洞源于软件对于架构属性值或者GraphQL类型名称的HTTP架构内省响应缺少有效的过滤与转义,导致动态XSS攻击面,这允许攻击者可以利用该漏洞实现代码注入。
CVE-2021-41248 MPS-2021-32017
2022-08-08 19:10
Google Chrome 资源管理错误漏洞
Google Chrome是美国谷歌(Google)公司的一款Web浏览器。 Google Chrome 89.0.4389.114之前版本存在资源管理错误漏洞,该漏洞源于Chrome V8允许远程攻击者通过精心制作的HTML页面潜在地利用堆损坏。
CVE-2021-21195 MPS-2021-4280
2022-08-08 19:10
Google Chromium缓冲区溢出漏洞
Google Chromium是美国谷歌(Google)的一款开源的Web浏览器。 Google Chromium 90.0.4430.212版本之前存在安全漏洞。该漏洞源于程序的读取器模式组件中发现堆缓冲区溢出安全性问题。目前没有详细的漏洞细节提供。
CVE-2021-30518 MPS-2021-7561
2022-08-08 19:10
open 存在代码注入漏洞
open 是一个跨平台的包,可以打开 URL、文件、可执行文件等内容。当传入未经处理的用户输入时,此软件包的受影响版本容易受到任意代码注入的影响。
2022-08-08 19:10
Google Chrome堆缓冲区溢出漏洞
Chrome是由Google开发的一款Web浏览工具。                                                Google Chrome 94.0.4606.81之前版本中的Blink存在堆缓冲区溢出漏洞。攻击者可利用该漏洞通过精心制作的HTML页面潜在地利用堆损坏。
CVE-2021-37978 MPS-2021-28735
2022-08-08 19:10
Axios 拒绝服务 漏洞
Axios 是一个基于promise 网络请求库。 漏洞版本的axios 容易受到低效正则表达式复杂性的影响,从而引发拒绝服务 (ReDoS) 的攻击。
CVE-2021-3749 MPS-2021-30688
2022-08-08 19:10
Medialize URI.js 输入验证错误漏洞
Medialize URI.js是Medialize团队的一款基于Javascript的可用于高效拼接URL的代码库。 Medialize URI.js 存在输入验证错误漏洞,该漏洞源于 new URI 未能正确解析 https:/// ,该漏洞导致系统用户被定位到别的站点。
CVE-2021-3647 MPS-2021-10674
2022-08-08 19:10
Npm Node-tar 后置链接漏洞
node-tar是一款用于文件压缩/解压缩的软件包。 Npm Node-tar 中存在后置链接漏洞,该漏洞源于产品未对特殊字符做有效验证。攻击者可通过该漏洞在其他路径创建恶意文件。
CVE-2021-37701 MPS-2021-28486
2022-08-08 19:10
Electron 安全漏洞
Electron是个人开发者的一个用户编写跨平台桌面应用的 JavaScript 框架。该框架基于 nodejs 和 Chromium 可以使用HTML,CSS实现跨平台桌面应用的编写。 Electron存在安全漏洞,该漏洞源于应用在未配置配置自定义的“选择蓝牙设备”事件处理程序情况下,允许渲染器通过网络蓝牙API访问蓝牙设备。
CVE-2022-21718 MPS-2021-37076
2022-08-08 19:10
@hapi/statehood 存在ReDoS漏洞
@hapi/statehood 是一个 HTTP 状态管理实用程序包。由于不正确的正则表达式使用,此软件包的受影响版本容易通过 cookie 解析器受到正则表达式拒绝服务 (ReDoS) 的攻击。
2022-08-08 19:10
CodeMirror 资源管理错误漏洞
CodeMirror是CodeMirror(Codemirror)团队的一个使用JavaScript为浏览器实现的多功能文本编辑器。该软件专门用于编辑代码,并具有100多种语言模式和各种插件,可实现更高级的编辑功能,每种语言都带有功能齐全的代码和语法高亮显示,以帮助阅读和编辑复杂代码。 codemirror 5.58.2 之前版本和org.apache.marmotta.webjars:codemirror 5.58.2 之前版本存在资源管理错误漏洞。该漏洞源于blob/cdb228ac736369c685865b122b736cd0d397836c、mode/javascript/javascript.jsL 129行中的 (s|/*.*?*/)* 正则表达式逻辑错误。
CVE-2020-7760 MPS-2020-15782
2022-08-08 19:10
minimist 输入验证错误漏洞
minimist是一款命令行参数解析工具。 minimist 1.2.2之前版本存在输入验证错误漏洞。攻击者可借助‘constructor’和‘__proto__’ payload利用该漏洞添加或修改Object.prototype的属性。
CVE-2020-7598 MPS-2020-3516
2022-08-08 19:10
Google Chrome 缓冲区错误漏洞
Google Chrome是美国谷歌(Google)公司的一款Web浏览器。 Google Chrome 存在缓冲区错误漏洞,该漏洞源于V8浏览器引擎中处理不受信任的输入时出现边界错误。远程攻击者可利用该漏洞在目标系统上执行任意代码。以下产品及版本受到影响:Google Chrome: 87.0.4280.66, 87.0.4280.141, 88.0.4324.96, 88.0.4324.146, 88.0.4324.150, 88.0.4324.182, 89.0.4389.72, 89.0.4389.90, 89.0.4389.114, 89.0.4389.128, 90.0.4430.72。
CVE-2021-21225 MPS-2021-5211
2022-08-08 19:10
http-proxy 存在拒绝服务漏洞
http-proxy 是一个为大众提供 HTTP 代理的库。此软件包的受影响版本容易受到拒绝服务 (DoS) 的攻击。
2022-08-08 19:10
0 评论
0 收藏