introspection voyager

graphql-voyager

• 7 Dependencies
• 54 Dependents
• 39 Versions

GraphQL Voyager

Represent any GraphQL API as an interactive graph. It's time to finally see the graph behind GraphQL. You can also explore number of public GraphQL APIs from our list .

With graphql-voyager you can visually explore your GraphQL API as an interactive graph. This is a great tool when designing or discussing your data model. It includes multiple example GraphQL schemas and also allows you to connect it to your own GraphQL endpoint. What are you waiting for, explore your API!

GraphQL Weekly #42

• Quick navigation on graph
• Left panel which provides more detailed information about every type
• "Skip Relay" option that simplifies graph by removing Relay wrapper classes
• Ability to choose any type to be a root of the graph

GraphQL Voyager exports Voyager React component and helper init function. If used without module system it is exported as GraphQLVoyager global variable.

Voyager component accepts the following properties:

• introspection [ object ] - the server introspection response. If function is provided GraphQL Voyager will pass introspection query as a first function parameter. Function should return Promise which resolves to introspection response object.
• displayOptions.skipRelay [ boolean , default true ] - skip relay-related entities
• displayOptions.skipDeprecated [ boolean , default true ] - skip deprecated fields and entities that contain only deprecated fields.
• displayOptions.rootType [ string ] - name of the type to be used as a root
• displayOptions.sortByAlphabet [ boolean , default false ] - sort fields on graph by alphabet
• displayOptions.showLeafFields [ boolean , default true ] - show all scalars and enums
• displayOptions.hideRoot [ boolean , default false ] - hide the root type
• allowToChangeSchema [ boolean , default false ] - allow users to change schema
• hideDocs [ boolean , default false ] - hide the docs sidebar
• hideSettings [ boolean , default false ] - hide settings panel
• hideVoyagerLogo [ boolean , default true ] - hide voyager logo

Using pre-bundled version

You can get GraphQL Voyager bundle from the following places:

• some exact version - https://cdn.jsdelivr.net/npm/[email protected]/dist/voyager.standalone.js
• latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.standalone.js
• from dist folder of the npm package graphql-voyager

Note: voyager.standalone.js is bundled with react, so you just need to call renderVoyager function that's it.

HTML example

Using as a dependency.

Build for the web with webpack , or any other bundle.

Webpack example

GraphQL Voyager has middleware for the next frameworks:

Middleware supports the following properties:

• endpointUrl [ string ] - the GraphQL endpoint url.
• displayOptions [ object ] - same as here
• headersJS [ string , default "{}" ] - object of headers serialized in string to be used on endpoint url Note: You can also use any JS expression which results in an object with header names as keys and strings as values e.g. { Authorization: localStorage['Meteor.loginToken'] }

Version 17+

This tool is inspired by graphql-visualizer project.

Package Sidebar

npm i graphql-voyager

Git github.com/graphql-kit/graphql-voyager

github.com/graphql-kit/graphql-voyager#readme

Downloads Weekly Downloads

Unpacked size, total files, last publish, collaborators.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Exploring the best GraphQL data visualization tools

GraphQL is a popular, powerful query tool for APIs. It provides developers with an efficient and flexible way to access and manipulate data in our databases.

With its increasing popularity, many developers are seeking new ways to better understand and visualize their GraphQL data. There are a number of visualization tools that satisfy this need efficiently.

In this article, we will discuss using GraphQL Voyager, GraphiQL, and Altair for data visualization, exploring how you can use these tools to enhance your workflow and gain deeper insights into your data. We will cover:

• Use cases for GraphQL data visualizer

Exploring data with GraphQL Voyager

Graphql voyager caveats to consider, using powerful graphiql features to construct queries, important considerations while using graphiql, using graphql altair to work with apis, considerations to keep in mind for graphql altair, use cases for graphql data visualizers.

GraphQL data visualizers are useful tools for various scenarios, including:

• Debugging GraphQL APIs
• Collaborating with teams
• Optimizing performance
• Understanding API dependencies
• Testing GraphQL APIs

Let’s explore each of these use cases in more detail now.

GraphQL data visualizers can help developers debug their GraphQL APIs by giving them visual representations of the data they fetch from their servers. These data visualization tools show you how your queries work and which data they call so you can easily identify any mistakes or errors in your query.

You can also use GraphQL data visualizers to highlight performance issues in your queries and show you how you can optimize said queries. With GraphQL data visualization tools, it’s easy to debug your APIs and ensure that your app works as expected.

In a team setting, different members bring various skills from different areas of focus. A GraphQL data visualizer can help team members communicate better and leverage the team’s collective expertise more efficiently by allowing them to visualize the API and its components.

By visualizing a GraphQL API, developers can identify performance bottlenecks and inefficiencies in query execution. They can then optimize queries to improve response times and overall application performance.

In complex systems with multiple APIs and microservices, a GraphQL visualizer can help developers visualize dependencies between different services, making it easier to identify and resolve issues or bottlenecks.

Data visualization tools also help in testing GraphQL Apis by providing a good view of expected responses and identifying issues with queries.

One of the most popular and open source data visualization tools for GraphQL is GraphQL Voyager .

GraphQL Voyager provides an interactive visual representation of your GraphQL schema and allows you to look through your API by visually browsing its object types, fields, and relationships.

With its simple and user-friendly interface, you can zoom into and out of your schema easily, search for particular fields, and see data types.

Over 200k developers use LogRocket to create better digital experiences

GraphQL Voyager demo

GraphQL Voyager works by parsing a GraphQL schema and generating a visual representation of its types and fields.

The tool uses the GraphQL introspection query to obtain the schema, making it compatible with any GraphQL server that supports this query. Once the schema is obtained, GraphQL Voyager generates the interactive graph that visualizes the schema.

Let’s explore an example of GraphQL Voyager in action.

Navigate to the live demo of GraphQL Voyager on GitHub to see APIs represented as interactive graphs. For this example, we’ll analyze the Star Wars API.

Click on the “Change Schema” button on the top left side of the screen and select Star Wars:

You’ll see a graphical representation of the schema in the center of the screen. Familiarize yourself with the interface.

The pane on the left side of the screen lists all the object types in the Star Wars schema. The pane on the right side of the screen shows information about the currently selected type or field.

This schema is based on the Star Wars universe and includes object types for characters, films, planets, and other entities from the Star Wars saga. Each type is depicted as a node in the graph.

You can click on a node to view the type details, which include the type name, description, and the fields it contains. The lines you see on the interface represent the relationships between different types and fields in the schema.

In GraphQL, types are connected to each other through their fields, and these connections are represented as edges in the visualization. The edges are directed, meaning that they point from the type that declares the field to the type that the field returns:

Select a type to explore

To explore a type in your schema, you can click on its name in the left pane. This will highlight the type in the graphical representation and display its information in the right pane.

As an example, select Film . The Film object type represents a film in the Star Wars universe. It has fields like title , episodeID , openingCrawl , characters , etc.

In GraphQL Voyager, fields are used to define the data that can be queried for a given type. You can explore the fields in Film by clicking on them in the left-side pane.

Once you have selected a field to explore, you can view its details, which include the field name, description, and the arguments it takes. You can also view the type of data returned by the field. Also, it highlights the fields in the right pane.

View relationships between types

You can explore relationships between types by clicking on the links between types in the graphical representation. This will highlight the related types and display information about the relationship in the right pane.

Search for types and fields

If you have a large schema with many types and fields, you can use the search box at the top of the screen to search for specific types and fields. Just type in a few letters of the name of the type or field you’re looking for, and GraphQL Voyager will filter the list of types and fields accordingly:

Filtering your search

GraphQL Voyager offers various options to help you refine your search further:

The “Sort by Alphabet” setting allows you to sort the nodes — i.e., types — in the schema alphabetically. By default, the nodes are sorted by the order in which they appear in the schema, but using this option can make it easier to find a specific node in a large schema.

Relay is a framework developed by Facebook for building data-driven React applications. If your schema includes Relay-specific types and fields, you can use the “Skip Relay” setting to exclude them from the visualization. This can be useful if you are not using Relay in your application and want to simplify the visualization.

The “Skip deprecated” setting allows you to exclude deprecated fields and types from the visualization. Deprecated fields and types are marked with a strikethrough in the visualization, but excluding them entirely can make the visualization easier to read.

By default, GraphQL Voyager only shows the top-level fields of each type in the visualization. Enabling the “Show leaf fields” setting will also show any “leaf” fields, which are fields that do not have any subfields. This can make it easier to see all the fields available on a type at a glance.

It’s important to consider compatibility when working with GraphQL Voyager. This data visualization tool relies on introspection queries to generate its visual representation of the schema. If the GraphQL server doesn’t support introspection, Voyager won’t work.

When it comes to performance, Voyager generates a visual representation of the entire schema, which can be a challenge for large and complex schemas. Make sure you monitor performance metrics and optimize queries as needed.

GraphiQL is an interactive web-based IDE that provides a user-friendly interface for writing and executing GraphQL queries.

The GraphiQL IDE is widely used by developers, as it allows you to explore and visualize your GraphQL schema by displaying the useable types and fields, as well as their documentation. With its built-in support explorer, you can easily view the information you need to write your queries.

One of the most useful features of GraphiQL is its power to provide real-time feedback on the GraphQL queries that are constructed.

As a user types a query into GraphiQL, it will immediately highlight any syntax errors and provide autocomplete suggestions for fields and arguments. This makes it easy to quickly write complex queries without having to remember the right syntax for each field.

Let’s go ahead and explore the GraphiQL interface with the Star Wars API (SWAPI) as an example.

SWAPI is a public API that provides data about Star Wars movies, characters, planets, and more. We will use GraphiQL to explore SWAPI and demonstrate some of the key features of the GraphiQL interface.

The GraphiQL interface has two main sections — the query editor and the results pane:

The query editor section is where we construct our GraphQL queries. The results pane displays the results of our queries in real-time. In the results pane, we can find the data that is returned by the API. Errors or warnings that are generated by our queries appear there as well.

Now let’s start with a simple query that retrieves information about all Star Wars films. To construct this, we will use the allFilms field and retrieve three fields under it. Run the query below in the editor:

Click the “play” button after pasting. This will transport the query to the SWAPI API, and display the results in the results pane. As you can see, the results pane displays the data that is returned by the API:

Using autocomplete in GraphiQL

One of the most powerful features of GraphiQL is its autocomplete functionality. As you type a query into the query editor, GraphiQL will provide autocomplete suggestions for fields and arguments. This way, you can create queries quickly without needing to remember the precise syntax for each field.

You can try creating a query that retrieves information about Luke Skywalker to test how autocomplete operates. As you start to type, GraphiQL will display autocomplete suggestions for available fields and arguments:

The GraphiQL interface includes a number of buttons, features, and settings that allow you to customize GraphQL queries and view the data that is returned by the API. Here are some of the features you’ll find on the GraphiQL interface:

The query editor is the main text editor in the GraphiQL interface where you can write and edit your GraphQL queries. The editor program provides syntax highlighting, autocompletion, and error highlighting, making it easy to construct and debug complex queries.

The “play” button is one of the most important features on the GraphiQL interface, this button executes the GraphQL query that is currently in the query editor. When the Play button is clicked, your query is sent to the API and the results are displayed in the results pane.

The query variables panel allows you to define variables that can be used in your GraphQL queries. Variables can be defined with different data types and can be either required or optional.

As previously mentioned, the results panel displays the information that is returned by the GraphQL API in response to the query. The results are displayed in JSON format and can be expanded or collapsed to view nested data.

The query history feature allows you to save and manage your GraphQL queries. Saved queries can be easily retrieved and executed with a single click.

The settings panel allows you to customize the behavior of GraphiQL. The settings include options for enabling or disabling query validation, enabling or disabling schema introspection, and changing the theme of the interface:

Finally, the documentation explorer feature provides support for the GraphQL API, including descriptions of types, fields, and arguments. This feature allows users to quickly and easily search for information about the API and its model.

Security is important in modern development. GraphiQL is a tool for debugging and exploring GraphQL APIs, but it’s not intended for production use. Ensure that proper security measures are in place when you’re interacting with sensitive data.

Additionally, like GraphQL Voyager, GraphiQL also relies on introspection queries to generate its interface. If the GraphQL server doesn’t support introspection, GraphiQL won’t work.

GraphQL Altair is a powerful GraphQL client that provides a user-friendly interface for working with GraphQL APIs. It’s an open source project that allows developers to easily interact with GraphQL APIs, making it easier to test, debug, and optimize queries.

Altair’s interface is divided into several panels that allow you to perform various tasks. Here are the key features of the Altair interface:

The endpoint panel allows you to enter the endpoint URL of the GraphQL API you want to connect to. Once you enter the URL, you can click the “Send Request” button to connect to the API and start working with its schema.

The query editor panel allows you to construct your GraphQL queries, mutations, and subscriptions. Altair provides you with syntax highlighting, code auto-completion, and error highlighting to make it easier to write valid GraphQL queries.

The panel labeled “VARIABLES” allows you to define variables that can be used in your GraphQL queries. You can create variables with different data types, and Altair will automatically generate the right input fields in the query editor:

Altair also has a feature for setting headers that allows you to add custom headers to your GraphQL requests. You can define headers for authentication, caching, or other purposes:

The response panel displays the response from the GraphQL API you sent your query. You receive the response in either a JSON or a tree view format.

If you select “Docs” at the top right of your screen, to the left of the “Send Request” button, you should see a panel that provides a graphical representation of the GraphQL schema of the API you are working with. You can use this panel to explore the various types, fields, and relationships in the schema:

The “Settings” panel allows you to customize the appearance and behavior of Altair. You can tinker with settings such as theme, font size, and query timeout.

Altair keeps a history of all the queries you have executed, making it easy to revisit previous queries and results. It also provides real-time validation of your GraphQL queries, helping you to highlight errors and syntax issues as you write your queries.

Finally, Altair also provides an easy way to export your GraphQL queries as code snippets in various programming languages.

Demo of GraphQL Altair features

To see how Altair works, we can use any online demo of GraphQL Altair with the Trevorblades API .

Open the GraphQL Altair demo page . In the “Endpoint” panel on the left-hand side of the page, paste the following endpoint URL:

Next, click on the “Send Request” button to connect to the Trevorblades API endpoint. If everything is set up correctly, you should see the schema of the API displayed in the right-side panel.

To test a query, mutation, or subscription, click on the “Query” button at the top of the page. This will open the query editor, where you can enter your GraphQL query.

Next, enter a GraphQL query for the countries API in the editor. For example, you can try the following query to get information about all the countries in the API:

After you have entered your query, click on the “Send Request” button to execute it. The results of your query will be displayed in the response pane beside the query editor.

Altair has a slightly steeper learning curve than Voyager or GraphiQL, as it offers a greater range of features and customization options. This means you may need to invest time in learning the interface and functionality of Altair before you can fully benefit from it.

Furthermore, Altair requires additional dependencies to be installed, such as the Altair GraphQL client library. Ensure that you have the necessary dependencies installed and configured correctly to avoid any issues or errors.

When it comes to visualizing data for GraphQL, there are several great options available.

GraphQL Voyager offers a visually stunning representation of your GraphQL schema, while GraphiQL provides a straightforward and user-friendly interface. Altair, on the other hand, offers advanced features for debugging and testing your GraphQL queries.

Ultimately, the best data visualizer for GraphQL depends on your specific needs and preferences. Whether you’re looking for a simple and intuitive tool or a more advanced debugging and testing environment, there’s a data visualizer out there that’s right for you.

No matter which tool you choose, it’s important to remember that data visualization is a crucial part of working with GraphQL. By using a high-quality data visualizer, you can gain deeper insights into your data, identify potential issues more easily, and streamline your development process.

Don’t be afraid to try out different options and find the one that works best for you!

Monitor failed and slow GraphQL requests in production

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic GraphQL requests to quickly understand the root cause. In addition, you can track Apollo client state and inspect GraphQL queries' key-value pairs.

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Handling file uploads in Next.js using UploadThing

Manage file uploads in your Next.js app using UploadThing, a file upload tool to be used in full-stack TypeScript applications.

Exploring advanced support for Vite 5 in Storybook 8

Explore the latest updates in Storybook 8, focusing on its improved support for Vite 5 as a build tool.

Using Next.js with Suspense to create a loading component

Next.js 13 introduced some new features like support for Suspense, a React feature that lets you delay displaying a component until the children have finished loading.

Exploring Angular 18’s RedirectCommand class and @let block

Angular’s latest update brings greater control over redirects and the ability to define and assign variables within the template.

Leave a Reply Cancel reply

Introspection

It’s often useful to ask a GraphQL schema for information about what queries it supports. GraphQL allows us to do so using the introspection system!

For our Star Wars example, the file starWarsIntrospection-test.ts contains a number of queries demonstrating the introspection system, and is a test file that can be run to exercise the reference implementation’s introspection system.

We designed the type system, so we know what types are available, but if we didn’t, we can ask GraphQL, by querying the __schema field, always available on the root type of a Query. Let’s do so now, and ask what types are available.

Wow, that’s a lot of types! What are they? Let’s group them:

• Query , Character , Human , Episode , Droid - These are the ones that we defined in our type system.
• String , Boolean - These are built-in scalars that the type system provided.
• __Schema , __Type , __TypeKind , __Field , __InputValue , __EnumValue , __Directive - These all are preceded with a double underscore, indicating that they are part of the introspection system.

Now, let’s try and figure out a good place to start exploring what queries are available. When we designed our type system, we specified what type all queries would start at; let’s ask the introspection system about that!

And that matches what we said in the type system section, that the Query type is where we will start! Note that the naming here was just by convention; we could have named our Query type anything else, and it still would have been returned here had we specified it was the starting type for queries. Naming it Query , though, is a useful convention.

It is often useful to examine one specific type. Let’s take a look at the Droid type:

What if we want to know more about Droid, though? For example, is it an interface or an object?

kind returns a __TypeKind enum, one of whose values is OBJECT . If we asked about Character instead we’d find that it is an interface:

It’s useful for an object to know what fields are available, so let’s ask the introspection system about Droid :

Those are our fields that we defined on Droid !

id looks a bit weird there, it has no name for the type. That’s because it’s a “wrapper” type of kind NON_NULL . If we queried for ofType on that field’s type, we would find the ID type there, telling us that this is a non-null ID.

Similarly, both friends and appearsIn have no name, since they are the LIST wrapper type. We can query for ofType on those types, which will tell us what these are lists of.

Let’s end with a feature of the introspection system particularly useful for tooling; let’s ask the system for documentation!

So we can access the documentation about the type system using introspection, and create documentation browsers, or rich IDE experiences.

This has just scratched the surface of the introspection system; we can query for enum values, what interfaces a type implements, and more. We can even introspect on the introspection system itself. The specification goes into more detail about this topic in the “Introspection” section, and the introspection file in GraphQL.js contains code implementing a specification-compliant GraphQL query introspection system.

A Visual Guide to GraphiQL and GraphQL Voyager

• May 17, 2021

The development experience offered by GraphQL shines. It is one of its greatest qualities, one that makes GraphQL stand out over other API formats. This is achieved, in no small part, thanks to the availability of several open source clients, which enable you to interact with the GraphQL service in a visual manner.

Among those clients, there are two prominent ones: GraphiQL, and the GraphQL Voyager. In this article, let's do a tour of how to use these two clients, step by step, via screenshots.

Intro to GraphiQL

GraphiQL is the first killer app delivered with GraphQL. It was originally developed by the Facebook team who created the GraphQL spec, and released alongside it, back in 2015.

GraphiQL is an IDE for composing GraphQL queries, executing them against the endpoint, and visualizing the response:

Let's see how to use it, step by step.

StepZen actually includes a customized version of GraphiQL within its CLI that launches for local testing when using stepzen start --dashboard=local .

GraphiQL via screenshots

We compose the GraphQL query on the panel on the left-side:

GraphiQL has a syntax highlighter for the GraphQL syntax . As we start composing the query, we can appreciate how the operation name, the opening and closing brackets, fields, arguments, directives and comments all have a distinct color, helping us to make sense of the query:

When first loading, GraphiQL will retrieve the GraphQL schema's metadata, via introspection . Thanks to the schema metadata, at every moment while composing the query, GraphiQL will suggest autocomplete options:

We can also browse the schema metadata via the Documentation Explorer. To open it, we must click on the "Docs" button:

The Documentation Explorer will appear on the right-hand side:

By clicking on the GraphQL type's name, the Documentation Explorer will display its information:

• Its description
• What interfaces it implements
• What arguments they receive
• Their return type (on which we can also click)
• Their description

At any moment, we can also search for, and retrieve info for, any element from the schema:

Hovering on any element from the query will display its information, and ctrl (or cmd ) + clicking on it will display it in the Documentation Explorer:

Clicking on the "Query variables" panel at the bottom, we can compose variables to pass to the query, as a JSON map of variable => value :

To execute the GraphQL query, we press on the "Run" button, or press ctrl (or cmd ) + enter :

The GraphQL response will be displayed on the central panel:

On the top panel, there are different addons for GraphiQL:

Clicking on each addon button, will perform a certain action:

• "Prettify" formats the GraphQL query
• "History" displays the list of most-recent previous queries, and clicking on any of them will input it into the query editor
• "Explorer" opens the GraphiQL Explorer panel

The GraphiQL Explorer is a great addon. It displays the list of all the fields, and clicking on them adds them to the query in the editor, enabling to compose the GraphQL query in a visual manner:

Intro to GraphQL Voyager

GraphQL Voyager is a tool to visualize the GraphQL schema, which excels and displaying how every element relates to each other:

GraphQL Voyager via screenshots

Voyager provides a birds-eye view of the GraphQL schema:

It makes it simple to understand how all elements in the schema relate to each other, using arrows to show the connections between types:

The schema has a starting point, which is a type from which all relationships are calculated. By default, this is the query root (in this case, handled via the QueryRoot type), which is indicated in the floating panel at the bottom. To visualize the schema around mutations, we can select the corresponding mutation root type (in this case, MutationRoot ):

Clicking on a type on the schema will highlight its connections and display the metadata for its fields (the same outcome happens when clicking on the type's name on the left-side panel):

The search input on the left-side panel enables to filter the schema elements:

Clicking on a connection will highlight it, both in the schema and on the left-side panel:

We can use the mouse (and, to some extent, the buttons on the bottom-right of the screen) to navigate the graph, zooming in and out, moving in any direction, and focusing on elements:

On the floating panel on the bottom, we have a few additional options:

• "Sort by alphabet" alphabetically sorts all fields in each type
• "Skip Relay" removes Relay 's wrapper classes
• "Skip deprecated" hides all deprecated fields
• "Show leaf fields" displays all fields which are not a connection

Wrapping up

The GraphiQL and GraphQL Voyager clients provide pretty useful features, enhancing GraphQL's development experience. These tools allow us to better understand the schema, improve the collaboration with team members, and integrate our APIs within the application in a shorter amount of time. Now that you've seen how to use them, I hope you're able to leverage them to improve your development workflow using GraphQL. I hope you find them useful!

About the Author

Leonardo losoviz, freelance developer.

Leonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless PHP, server-side components, GraphQL) into existing PHP frameworks (WordPress, Symfony, Laravel), and unifying all of them into a single mental model. He gives account of his progress on Smashing Magazine, on his own blog leoloso.com, and in whichever event he is accepted to speak.

More From the Blog

Build a game voting system using CockroachDB, Steam and StepZen

Most of the time when you’re building a backend, it takes more than a database. In this blog post, we’ll create voting system for games that uses CockroachDB and the Steam REST API. Data from both sources is combined in a GraphQL API using StepZen.

Streamline Your API Development With Neo4j GraphQL, and StepZen

In this blog post, we will explore how developers can use StepZen and Neo4j to build powerful GraphQL APIs that can transform how we build applications.

Measure GraphQL API Performance in the Dashboard

StepZen is dedicated to simplifying the creation of secure, high-performance GraphQL APIs. With our new reporting feature, you can easily monitor your GraphQL API's performance and identify areas for improvement.

Best served on bigger screen sizes

Demystifying GraphQL Introspection: Risks, Visualization and Analysis

October 24, 2023 by Pedro Tavares -->

GraphQL has revolutionized how APIs are designed and consumed, offering flexibility and efficiency in data fetching. One of the key features of GraphQL is Introspection, which allows clients to query the schema and discover the available types, fields, and operations. While introspection is a powerful tool for development and debugging, it’s crucial to understand its implications and ensure it is disabled in production environments.

What is GraphQL Introspection?

GraphQL introspection is a mechanism that enables clients to query the schema itself. It allows clients to retrieve detailed information about the available types, their fields, and the operations that can be performed. This feature is incredibly useful during development and debugging, as it helps developers understand and interact with the API schema.

Introspection queries typically involve querying the __schema and __type objects, which are built into every GraphQL schema. These queries can provide information about query types, mutations, input types, and more.

You can read more about Introspection on GraphQL’s official documentation here .

The Risks of Enabling Introspection in Production

While GraphQL introspection is a powerful tool during development, it should never be enabled in production environments . Enabling introspection in production poses significant security risks:

• Exposing Sensitive Information : Introspection allows anyone with access to the GraphQL endpoint to explore the schema’s structure. This includes potentially sensitive information about your data models, operations, and types.
• Schema Enumeration : Attackers can use introspection to discover vulnerabilities in your schema, including finding unused or deprecated fields that may be exploitable.
• Query Complexity Attacks : Introspection can be used to analyze query complexity and depth, which can help attackers craft malicious queries designed to overload your server.

To mitigate these risks, GraphQL Introspection should be disabled in production environments. You can achieve this by configuring your GraphQL server to reject Introspection queries or by setting up middleware to handle Introspection requests differently.

Visualize Introspection Data with GraphQL Voyager

GraphQL Voyager is an open-source tool that provides a graphical representation of GraphQL schema. It offers an interactive, node-based diagram that allows to explore the schema’s types, fields, and relationships visually.

Local Installation (Open-Source)

GitHub : You can find the GraphQL Voyager GitHub repository at https://github.com/graphql-kit/graphql-voyager. Follow the installation and setup instructions provided in the repository’s README to set up GraphQL Voyager in your project.

Using GraphQL Voyager Online

Web Service : If you prefer not to install GraphQL Voyager locally or want a quick way to explore your schema without any setup, we can use the online service provided at https://graphql-kit.com/graphql-voyager/ . This web-based version of GraphQL Voyager allows us to upload our introspection query result to visualize our schema instantly.

This tool enables us to navigate the schema, inspect types, fields, and relationships, and uncover potentially overlooked attack vectors. By exploring the GraphQL schema visually, we can identify hidden data paths, pinpoint deprecated fields that might be exploitable, and assess query complexity, all of which are essential for a thorough security assessment.

Demo Example

To see how it all works, we’ll use a demo available on the web at https://graphql-demo.mead.io/ .

We will use the Introspection query to acquire the entire GraphQL schema for this host. Introspection query:

Next, we’ll copy the entire response and paste on GraphQL Voyager:

After making the “ Display ”, we will get the graphic information from the Introspection and we will have the various interconnections between the different objects:

One of the great advantages of this service is that we can use the search field to filter by what we want to look for, and we can also search within objects. With this, we can easily search for highly important information, such as whether an object invokes the password field, for example.

Analyze Introspection Data using Postman

Postman is a versatile and powerful API development and testing tool that enables developers and testers to streamline the process of working with APIs. Much like tools such as Burp Suite, Postman offers a user-friendly interface for designing, testing, and documenting APIs. It allows users to send HTTP requests to APIs, inspect responses, and automate various aspects of the testing and integration process. This makes it an good resource for developers, quality assurance professionals or security auditors when it comes to ensuring the functionality, reliability and security of APIs in today’s interconnected software ecosystem.

Using Postman for GraphQL queries

Postman now has the ability to execute GraphQL queries more easily in its service, being able to automatically search for the existence of active Introspection. To do this, start a new project by clicking on the “ GraphQL ” button.

When we insert the link in the URL box identified in the image below, Postman automatically tries to run the Introspection, automatically obtaining the data if Introspection is active in the application to be audited.

As we can see in the image above, queries have been generated for the different existing objects on the Query tab.

From that moment on, everything becomes simpler. All you have to do is select the query you want to execute and execute the POST query. If authentication is required, use the “ Authorization ” tab, which already contains some authentication methods such as Bearer or OAuth, which must be filled in with the respective session token.

By using GraphQL Voyager to analyze the interconnections between objects and make searches that easily identify critical fields, we can more quickly identify queries that should be reviewed with greater emphasis, and with Postman quickly move on to the process of executing those same queries seen earlier and obtain the respective response data.

Conclusions

GraphQL Introspection is a powerful feature that should be used with caution. While it’s invaluable for development and debugging, enabling it in production can introduce serious security risks. Always remember to disable introspection in your production environment to protect your API.

To make the most of Introspection data for development purposes, tools like GraphQL Voyager can be incredibly helpful. They provide a visual representation of your schema, making it easier to understand and navigate the complex world of GraphQL APIs. Postman offers a light and easy-to-use service, and the combination of these two is a great starting point for analyzing GraphQL schemes.

In summary, GraphQL Introspection is a double-edged sword. Use it wisely during development, and make sure it’s sheathed when your GraphQL API goes into production.

Bernardo Rodrigues

GraphQL Voyager – an interactive GraphQL schema explorer

I came across Eve Porcello's Twitter thread about GraphQL tricks , and she included an excellent tool that I didn't know before.

GraphQL Voyager is a tool that you can use to visualise your GraphQL API's schema. Copy and paste the introspection query or the SDL of the GraphQL API (you can find it in GraphiQL or the tool your use to write GraphQL queries) and get a visualised result such as the one below.

Pretty cool! If you're using any other GraphQL online tools, please let me know! I'd love to include more GraphQL tools on tiny-helpers.dev .

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger , conference speaker , and Open Source maintainer .

Related Topics

Related articles.

• Should every error result in an error in GraphQL, too?
• GraphQL Playground offers a protocol handler

This website uses cookies to analyze our traffic and only share that information with our analytics partners.

WSTG - Latest

Testing graphql.

GraphQL has become very popular in modern APIs. It provides simplicity and nested objects, which facilitate faster development. While every technology has advantages, it can also expose the application to new attack surfaces. The purpose of this scenario is to provide some common misconfigurations and attack vectors on applications that utilize GraphQL. Some vectors are unique to GraphQL (e.g. Introspection Query ) and some are generic to APIs (e.g. SQL injection ).

Examples in this section will be based on a vulnerable GraphQL application poc-graphql , which is run in a docker container that maps localhost:8080/GraphQL as the vulnerable GraphQL node.

Test Objectives

• Assess that a secure and production-ready configuration is deployed.
• Validate all input fields against generic attacks.
• Ensure that proper access controls are applied.

How to Test

Testing GraphQL nodes is not very different than testing other API technologies. Consider the following steps:

Introspection Queries

Introspection queries are the method by which GraphQL lets you ask what queries are supported, which data types are available, and many more details you will need when approaching a test of a GraphQL deployment.

The GraphQL website describes Introspection :

“It’s often useful to ask a GraphQL schema for information about what queries it supports. GraphQL allows us to do so using the introspection system!”

There are a couple of ways to extract this information and visualize the output, as follows.

Using Native GraphQL Introspection

The most straightforward way is to send an HTTP request (using a personal proxy) with the following payload, taken from an article on Medium :

The result will usually be very long (and hence has been shortened here), and it will contain the entire schema of the GraphQL deployment.

A tool such as GraphQL Voyager can be used to get a better understanding of the GraphQL endpoint:

This tool creates an Entity Relationship Diagram (ERD) representation of the GraphQL schema, allowing you to get a better look into the moving parts of the system you’re testing. Extracting information from the drawing allows you to see you can query the Dog table for example. It also shows which properties a Dog has:

• veterinary (ID)

There is one downside to using this method: GraphQL Voyager does not display everything that can be done with GraphQL. For example, the mutations available are not listed in the drawing above. A better strategy would be to use both Voyager and one of the methods listed below.

Using GraphiQL

GraphiQL is a web-based IDE for GraphQL. It is part of the GraphQL project, and it is mainly used for debugging or development purposes. The best practice is to not allow users to access it on production deployments. If you are testing a staging environment, you might have access to it and can thus save some time when working with introspection queries (although you can, of course, use introspection in the GraphiQL interface).

GraphiQL has a documentation section, which uses the data from the schema in order to create a document of the GraphQL instance that is being used. This document contains the data types, mutations, and basically every piece of information that can be extracted using introspection.

Using GraphQL Playground

GraphQL Playground is a GraphQL client. It can be used to test different queries, as well as divide GraphQL IDEs into different playgrounds, and group them by theme or by assigning a name to them. Much like GraphiQL, Playground can create documentation for you without the need for manually sending introspection queries and processing the response(s). It has another great advantage: It doesn’t need the GraphiQL interface to be available. You can direct the tool to the GraphQL node via a URL, or use it locally with a data file. GraphQL Playground can be used to test for vulnerabilities directly, so you don’t need to use a personal proxy to send HTTP requests. This means you can use this tool for simple interaction with and assessment of GraphQL. For other more advanced payloads, use a personal proxy.

Note that in some cases, you will need to set the HTTP headers at the bottom, to include session ID or other mechanism of authentication. This still allows creating multiple “IDEs” with different permissions to verify if there are in fact authorization issues.

You can even download the schemas to use in Voyager.

Introspection Conclusion

Introspection is a useful tool that allows users to gain more information about the GraphQL deployment. However, this will also allow malicious users to gain access to the same information. The best practice is to limit access to the introspection queries, since some tools or requests might fail if this feature is disabled altogether. As GraphQL usually bridges to the backend APIs of the system, it’s better to enforce strict access control.

Authorization

Introspection is the first place to look for authorization problems. As noted, access to introspection should be restricted as it allows for data extraction and data gathering. Once a tester has access to the schema and knowledge of the sensitive information there is to extract, they should then send queries that will not be blocked due to insufficient privileges. GraphQL does not enforce permissions by default, and so it is up to the application to perform authorization enforcement.

In the earlier examples, the output of the introspection query shows there is a query called auth . This seems like a good place to extract sensitive information such as API tokens, passwords, etc.

Testing the authorization implementation varies from deployment to deployment since each schema will have different sensitive information, and hence, different targets to focus on.

In this vulnerable example, every user (even unauthenticated) can gain access to the auth tokens of every veterinarian listed in the database. These tokens can be used to perform additional actions the schema allows, such as associating or disassociating a dog from any specified veterinarian using mutations, even if there is no matching auth token for the veterinarian in the request.

Here is an example in which the tester uses an extracted token they do not own to perform an action as the veterinarian “Benoit”:

And the response:

All of the Dogs in the list belong to Benoit, and not to the auth token owner. It’s possible to perform this type of action when proper authorization enforcement is not implemented.

GraphQL is the implementation of the API layer of an application, and as such, it usually forwards the requests to a backend API or the database directly. This allows you to utilize any underlying vulnerability such as SQL injection, command injection, cross-site scripting, etc. Using GraphQL just changes the entry point of the malicious payload.

You can refer to other scenarios within the OWASP testing guide to get some ideas.

GraphQL also has scalars, which are usually used for custom data types that do not have native data types, such as DateTime. These types of data do not have out-of-the-box validation, making them good candidates for testing.

SQL Injection

The example application is vulnerable by design in the query dogs(namePrefix: String, limit: Int = 500): [Dog!] since the parameter namePrefix is concatenated in the SQL query. Concatenating user input is a common malpractice of applications that can expose them to SQL injection.

The following query extracts information from the CONFIG table within the database:

The response to this query is:

The query contains the secret that signs JWTs in the example application, which is very sensitive information.

In order to know what to look for in any particular application, it will be helpful to collect information about how the application is built and how the database tables are organized. You can also use tools like sqlmap to look for injection paths and even automate the extraction of data from the database.

Cross-Site Scripting (XSS)

Cross-site scripting occurs when an attacker injects executable code that is subsequently run by the browser. Learn about tests for XSS in the Input Validation chapter. You may test for reflected XSS using a payload from Testing for Reflected Cross Site Scripting .

In this example, errors might reflect the input and could cause XSS to occur.

Denial of Service (DoS) Queries

GraphQL exposes a very simple interface to allow developers to use nested queries and nested objects. This ability can also be used in a malicious way, by calling a deep nested query similar to a recursive function and causing a denial of service by using up CPU, memory, or other compute resources.

Looking back at Figure 12.1-1 , you can see that it is possible to create a loop where a Dog object contains a Veterinary object. There could be an endless amount of nested objects.

This allows for a deep query which has the potential to overload the application:

There are multiple security measures that can be implemented to prevent these types of queries, listed in the Remediation section. Abusive queries can cause issues like DoS for GraphQL deployments and should be included in testing.

Batching Attacks

GraphQL supports batching of multiple queries into a single request. This allows users to request multiple objects or multiple instances of objects efficiently. However, an attacker can utilize this functionality in order to perform a batching attack. Sending more than a single query in one request looks like the following:

In the example application, a single request can be sent in order to extract all of the veterinary names using the guessable ID (it’s an increasing integer). An attacker can then utilize the names in order to get access tokens. Instead of doing so in many requests, which might be blocked by a network security measure like a web application firewall or a rate limiter like Nginx, these requests may be batched. This means there would only be a couple of requests, which may allow for efficient brute forcing without being detected. Here is an example query:

This will provide the attacker with the names of the veterinaries and, as shown before, the names can be used to batch multiple queries requesting the auth tokens of those veterinaries. For example:

Batching attacks can be used to bypass many security measures enforced on sites. It can also be used to enumerate objects and attempt to brute force multi-factor authentication or other sensitive information.

Detailed Error Message

GraphQL can encounter unexpected errors during runtime. When such an error occurs, the server may send an error response that may reveal internal error details or application configurations or data. This allows a malicious user to acquire more information about the application. As part of testing, error messages should be checked by sending unexpected data, a process known as fuzzing. The responses should be searched for potentially sensitive information that may be revealed using this technique.

Exposure of Underlying API

GraphQL is a relatively new technology, and some applications are transitioning from old APIs to GraphQL. In many cases, GraphQL is deployed as a standard API which translates requests (sent using GraphQL syntax) to an underlying API, as well as the responses. If requests to the underlying API are not properly checked for authorization, it could lead to a possible escalation of privileges.

For example, a request containing the parameter id=1/delete might be interpreted as /api/users/1/delete . This could extend to the manipulation of other resources belonging to user=1 . It is also possible that the request is interpreted to have the authorization given to the GraphQL node, instead of the true requester.

A tester should try and gain access to underlying API methods as it may be possible to escalate privileges.

Remediation

• Restrict access to introspection queries.
• GraphQL does not have a native way to validate input, however, there is an open source project called “graphql-constraint-directive” which allows for input validation as part of the schema definition.
• Input validation alone is helpful, but it is not a complete solution and additional measures should be taken to mitigate injection attacks.
• Timeouts: restrict the amount of time that a query is permitted to run.
• Maximum query depth: limit the depth of allowed queries, which may prevent queries that are too deep from abusing resources.
• Set maximum query complexity: limit the complexity of queries to mitigate the abuse of GraphQL resources.
• Use server-time-based throttling: limit the amount of server time a user can consume.
• Use query-complexity-based throttling: limit the total complexity of queries a user can consume.
• Send generic error messages: use generic error messages that do not reveal details of the deployment.
• Add object request rate limiting in code.
• Prevent batching for sensitive objects.
• Limit the number of queries that can run at one time.

For more on remediating GraphQL weaknesses, refer to the GraphQL Cheat Sheet .

• GraphQL Playground
• GraphQL Voyager
• InQL (Burp Extension)
• GraphQL Raider (Burp Extension)
• GraphQL (Add-on for ZAP)
• poc-graphql
• GraphQL Official Site
• Howtographql - Security
• GraphQL Constraint Directive
• Client-side Testing (XSS and other vulnerabilities)
• 5 Common GraphQL Security Vulnerabilities
• GraphQL common vulnerabilities and how to exploit them

WSTG Contents

• 0. Foreword by Eoin Keary
• 1. Frontispiece
• 2. Introduction
• 2.1 The OWASP Testing Project
• 2.2 Principles of Testing
• 2.3 Testing Techniques Explained
• 2.4 Manual Inspections and Reviews
• 2.5 Threat Modeling
• 2.6 Source Code Review
• 2.7 Penetration Testing
• 2.8 The Need for a Balanced Approach
• 2.9 Deriving Security Test Requirements
• 2.10 Security Tests Integrated in Development and Testing Workflows
• 2.11 Security Test Data Analysis and Reporting
• 3. The OWASP Testing Framework
• 3.1 The Web Security Testing Framework
• 3.2 Phase 1 Before Development Begins
• 3.3 Phase 2 During Definition and Design
• 3.4 Phase 3 During Development
• 3.5 Phase 4 During Deployment
• 3.6 Phase 5 During Maintenance and Operations
• 3.7 A Typical SDLC Testing Workflow
• 3.8 Penetration Testing Methodologies
• 4. Web Application Security Testing
• 4.0 Introduction and Objectives
• 4.1 Information Gathering
• 4.1.1 Conduct Search Engine Discovery Reconnaissance for Information Leakage
• 4.1.2 Fingerprint Web Server
• 4.1.3 Review Webserver Metafiles for Information Leakage
• 4.1.4 Enumerate Applications on Webserver
• 4.1.5 Review Web Page Content for Information Leakage
• 4.1.6 Identify Application Entry Points
• 4.1.7 Map Execution Paths Through Application
• 4.1.8 Fingerprint Web Application Framework
• 4.1.9 Fingerprint Web Application
• 4.1.10 Map Application Architecture
• 4.2 Configuration and Deployment Management Testing
• 4.2.1 Test Network Infrastructure Configuration
• 4.2.2 Test Application Platform Configuration
• 4.2.3 Test File Extensions Handling for Sensitive Information
• 4.2.4 Review Old Backup and Unreferenced Files for Sensitive Information
• 4.2.5 Enumerate Infrastructure and Application Admin Interfaces
• 4.2.6 Test HTTP Methods
• 4.2.7 Test HTTP Strict Transport Security
• 4.2.8 Test RIA Cross Domain Policy
• 4.2.9 Test File Permission
• 4.2.10 Test for Subdomain Takeover
• 4.2.11 Test Cloud Storage
• 4.2.12 Test for Content Security Policy
• 4.2.13 Test for Path Confusion
• 4.3 Identity Management Testing
• 4.3.1 Test Role Definitions
• 4.3.2 Test User Registration Process
• 4.3.3 Test Account Provisioning Process
• 4.3.4 Testing for Account Enumeration and Guessable User Account
• 4.3.5 Testing for Weak or Unenforced Username Policy
• 4.4 Authentication Testing
• 4.4.1 Testing for Credentials Transported over an Encrypted Channel
• 4.4.2 Testing for Default Credentials
• 4.4.3 Testing for Weak Lock Out Mechanism
• 4.4.4 Testing for Bypassing Authentication Schema
• 4.4.5 Testing for Vulnerable Remember Password
• 4.4.6 Testing for Browser Cache Weaknesses
• 4.4.7 Testing for Weak Password Policy
• 4.4.8 Testing for Weak Security Question Answer
• 4.4.9 Testing for Weak Password Change or Reset Functionalities
• 4.4.10 Testing for Weaker Authentication in Alternative Channel
• 4.4.11 Testing Multi-Factor Authentication
• 4.5 Authorization Testing
• 4.5.1 Testing Directory Traversal File Include
• 4.5.2 Testing for Bypassing Authorization Schema
• 4.5.3 Testing for Privilege Escalation
• 4.5.4 Testing for Insecure Direct Object References
• 4.5.5 Testing for OAuth Weaknesses
• 4.5.5.1 Testing for OAuth Authorization Server Weaknesses
• 4.5.5.2 Testing for OAuth Client Weaknesses
• 4.6 Session Management Testing
• 4.6.1 Testing for Session Management Schema
• 4.6.2 Testing for Cookies Attributes
• 4.6.3 Testing for Session Fixation
• 4.6.4 Testing for Exposed Session Variables
• 4.6.5 Testing for Cross Site Request Forgery
• 4.6.6 Testing for Logout Functionality
• 4.6.7 Testing Session Timeout
• 4.6.8 Testing for Session Puzzling
• 4.6.9 Testing for Session Hijacking
• 4.6.10 Testing JSON Web Tokens
• 4.6.11 Testing for Concurrent Sessions
• 4.7 Input Validation Testing
• 4.7.1 Testing for Reflected Cross Site Scripting
• 4.7.2 Testing for Stored Cross Site Scripting
• 4.7.3 Testing for HTTP Verb Tampering
• 4.7.4 Testing for HTTP Parameter Pollution
• 4.7.5 Testing for SQL Injection
• 4.7.5.1 Testing for Oracle
• 4.7.5.2 Testing for MySQL
• 4.7.5.3 Testing for SQL Server
• 4.7.5.4 Testing PostgreSQL
• 4.7.5.5 Testing for MS Access
• 4.7.5.6 Testing for NoSQL Injection
• 4.7.5.7 Testing for ORM Injection
• 4.7.5.8 Testing for Client-side
• 4.7.6 Testing for LDAP Injection
• 4.7.7 Testing for XML Injection
• 4.7.8 Testing for SSI Injection
• 4.7.9 Testing for XPath Injection
• 4.7.10 Testing for IMAP SMTP Injection
• 4.7.11 Testing for Code Injection
• 4.7.11.1 Testing for File Inclusion
• 4.7.12 Testing for Command Injection
• 4.7.13 Testing for Format String Injection
• 4.7.14 Testing for Incubated Vulnerability
• 4.7.15 Testing for HTTP Splitting Smuggling
• 4.7.16 Testing for HTTP Incoming Requests
• 4.7.17 Testing for Host Header Injection
• 4.7.18 Testing for Server-side Template Injection
• 4.7.19 Testing for Server-Side Request Forgery
• 4.7.20 Testing for Mass Assignment
• 4.8 Testing for Error Handling
• 4.8.1 Testing for Improper Error Handling
• 4.8.2 Testing for Stack Traces
• 4.9 Testing for Weak Cryptography
• 4.9.1 Testing for Weak Transport Layer Security
• 4.9.2 Testing for Padding Oracle
• 4.9.3 Testing for Sensitive Information Sent via Unencrypted Channels
• 4.9.4 Testing for Weak Encryption
• 4.10 Business Logic Testing
• 4.10.0 Introduction to Business Logic
• 4.10.1 Test Business Logic Data Validation
• 4.10.2 Test Ability to Forge Requests
• 4.10.3 Test Integrity Checks
• 4.10.4 Test for Process Timing
• 4.10.5 Test Number of Times a Function Can Be Used Limits
• 4.10.6 Testing for the Circumvention of Work Flows
• 4.10.7 Test Defenses Against Application Misuse
• 4.10.8 Test Upload of Unexpected File Types
• 4.10.9 Test Upload of Malicious Files
• 4.10.10 Test Payment Functionality
• 4.11 Client-side Testing
• 4.11.1 Testing for DOM-Based Cross Site Scripting
• 4.11.1.1 Testing for Self DOM Based Cross-Site Scripting
• 4.11.2 Testing for JavaScript Execution
• 4.11.3 Testing for HTML Injection
• 4.11.4 Testing for Client-side URL Redirect
• 4.11.5 Testing for CSS Injection
• 4.11.6 Testing for Client-side Resource Manipulation
• 4.11.7 Testing Cross Origin Resource Sharing
• 4.11.8 Testing for Cross Site Flashing
• 4.11.9 Testing for Clickjacking
• 4.11.10 Testing WebSockets
• 4.11.11 Testing Web Messaging
• 4.11.12 Testing Browser Storage
• 4.11.13 Testing for Cross Site Script Inclusion
• 4.11.14 Testing for Reverse Tabnabbing
• 4.12 API Testing
• 4.12.0 API Testing Overview
• 4.12.1 Testing GraphQL
• 5. Reporting
• 5.1 Reporting Structure
• 5.2 Naming Schemes
• Appendix A. Testing Tools Resource
• Appendix B. Suggested Reading
• Appendix C. Fuzzing
• Appendix D. Encoded Injection
• Appendix E. History
• Appendix F. Leveraging Dev Tools

Upcoming OWASP Global Events

Owasp news & opinions.

learn-bug-bounty

How to exploit GraphQL endpoint: introspection, query, mutations & tools

March 24, 2021

From many years, GraphQL has been presented as a good alternative for REST APIs. We will not debate if this is true or not, what are con or pro, but we will see how we can proceed when we found a GraphQL endpoint in our target. How GraphQL works? How to perform Introspection? How to use Mutations? Exploitation of GraphQL endpoint can have a big impact and can bring high rewards, let’s take a look!

Just for a history part, GraphQL is a query language developed by Facebook and used internally since 2012, it has been open-source licensed since 2015. For technical reasons, more and more company use GraphQL and switch their backend to this new system, but, while this query language can have many advantages, it also has a number of security issues as the queries become more complex. Information Disclosure (PII leak), Business Logic Errors, IDORs and Improper Access Control are the most vulnerabilities which can be found on GraphQL endpoint.

This article aims to list some possible attacks on GraphQL and is not a development tutorial, if you want to learn more, I invite you to read this .

Examples of GraphQL endpoints

It’s difficult to list all possible endpoints to find a GraphQL instance but many of them use a framework like “Appollo” and they use common GraphQL endpoints:

You can find more complete list on SecLists . Another way to identify an hidden endpoint by searching some keywords in JavaScripts files like “ query “, “ mutation “, “ graphql ” and it could be reveal the presence of GraphQL decommissioned/unofficial endpoint.

Introspection

Now, you have identified a GraphQL endpoint, the first attempt that you can do and which could be helpful is: introspection . You said what?

Introspection is the ability to query which resources are available in the current API schema. Given the API, via introspection, we can see the queries, types, fields, and directives it supports.

So, if introspection is authorized on your target it’s a good news, you will have the possibility to see all useful information to inspect and go deeper on it.

How to perform introspection in GraphQL ?

This is the full request to perform you GraphQL introspection on your target (if enabled):

The server should response with the full schema (query, mutation, objects, fields…). Even if schema is displayed in JSON, it can be quickly unreadable. In my opinion, once you have the schema, the best way is to import it in a tool like “ GraphQL Voyager ” ( I talk about below in “Tools” chapter ).

Introspection is disabled ? Fuzz!

If introspection is disabled on your target ( it should be in a safe world ), this is a good opportunity to start finding out what they don’t want us to see. By default, GraphQL backend have a feature for fields and operations suggestions. If you try to query a field but you have made a typo, GraphQL will attempt to suggest fields that are similar to the initial attempt.

Field suggestions is not a vulnerability, but from hacker’s side, this feature can be abused to gain more insight into GraphQL’s schema, especially when Introspection is not allowed.

To perform this suggestion abuse, I highly recommend to use tools. You could use Intruder tool in Burp Suite but not always appropriate for this step.

• Clairvoyance : https://github.com/nikitastupin/clairvoyance
• GraphQLmap : https://github.com/swisskyrepo/GraphQLmap

Query flaws

The principal problem in GraphQL is: by design, you don’t have any control access system, developer has to write “resolvers” which will map the data to the queries for the database of his choice.

This is why the most commons issues which happens in Query are authorization logic flaw like Improper Access Control and IDOR.

For example, you have a initial legit Query called “ currentUser ” which take a variable parameter “ internalId “. This request should only return information from current connected user.

Try to replace the value of internalId by another one, and check if you can fetch information from another users. Classic IDOR, but common in GraphQL.

Query are also interesting, as it is sometimes possible to use a legitimate query and add fields to get juicy stuff. For example, you have a Query “listPosts” which is used by a newsletter web application.

By using introspection ( the best case ) or fuzzing, you could also discover a “user” object in this Query. Which could be used to fetch additional information:

Mutations flaws

Mutations are used when web application perform modification actions on data. And like Query, mutations suffers of same problems and can also have others flaws, like mass assignment vulnerability.

Let’s assume you have a mutation called “ registerAccount ” which is used by your target to create a simple user account. This mutation have these fields: nickname, email, password .

In addition, we can also observe that a field “role” is on returned values by GraphQL in “user” object once the mutation is sent.

In this case, it’s a good opportunity to see what happen if we add a field “role” in our mutation!

As mentioned earlier, the most difficult part of GraphQL for developers is having a granular access control for each request and implementing a resolver for that will integrate with the appropriate access controls.

SQL injection, debug information, batching attack (brute force and rate-limit bypass)

• SQL Injection : simple but classic, try SQL and NoSQL injection in fields values,
• Debug & information disclosure : Insert bad characters in object or fields name, sometimes DEBUG mode is activated and even if you have a 403 status, you could have a good surprise,
• Batching Attack : Batching is the process of taking a group of requests, combining them into one, and making a single request with the same data that all of the other queries would have made ( more here ) . When authentication process is used with GraphQL, batch attack can be performed to simultaneously sending many queries with different credentials, it’s like a bruteforce attack but only with one request. Also, batch attack can be used against 2FA authentication, to bypass rate-limit (if it’s based on number of query by IP for example).

If you want to know more about Batching Attack, I invite you to read this excellent article

More and more tools dedicated to GraphQL attacks are developed, but I would like to recommend two of them in addition to those I’ve indicated in the previous chapters.

GraphQL Voyager

Event if you’re a master of JSON, I think we will be OK to said when you have a GraphQL schema in front of your eyes, to have a clear idea about each object, each mutation and each query, it’s not the simplest.

I think this screenshot is enough to understand the point.

InQL (Burp Suite)

InQL is originally a command line tool to facilitate certain attacks against a GraphQL endpoint. Luckily, a Burp Suite extension has also been developed and I recommend you to install it (available in BurpApp Store).

It allows you to directly perform an introspection query (if authorized, of course) and to have all the queries and mutations in Burp, in a readable format.

GitHub repository : https://github.com/doyensec/inql

Need some training?

If you need to practice with GraphQL before you start digging into your target, I highly recommend using these docker projects “ Damn Vulnerable GraphQL Application ” and “ PoC graphql ” which are two great projects available on GitHub. They will allow you to use many different attacks and approaches with GraphQL that I mentioned in this article.

• https://github.com/righettod/poc-graphql
• https://github.com/dolevf/Damn-Vulnerable-GraphQL-Application
• https://raz0r.name/articles/looting-graphql-endpoints-for-fun-and-profit
• https://github.com/swisskyrepo/PayloadsAllTheThings/tree/master/GraphQL%20Injection
• https://labs.detectify.com/2018/03/14/graphql-abuse
• https://lab.wallarm.com/graphql-batching-attack

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

option to show only ERD on voyager #2569

lidorcg commented Jul 18, 2019 • edited

• 👍 9 reactions

rikinsk-zz commented Jul 23, 2019

• 👍 2 reactions

Sorry, something went wrong.

mnlbox commented Dec 9, 2019

rikinsk commented Dec 9, 2019

up-to-you commented Sep 18, 2021

No branches or pull requests

We will keep fighting for all libraries - stand with us!

Internet Archive Audio

• This Just In
• Grateful Dead
• Old Time Radio
• 78 RPMs and Cylinder Recordings
• Audio Books & Poetry
• Computers, Technology and Science
• Music, Arts & Culture
• News & Public Affairs
• Spirituality & Religion
• Radio News Archive

• Flickr Commons
• Occupy Wall Street Flickr
• NASA Images
• Solar System Collection
• Ames Research Center

• All Software
• Old School Emulation
• MS-DOS Games
• Historical Software
• Classic PC Games
• Software Library
• Kodi Archive and Support File
• Vintage Software
• CD-ROM Software
• CD-ROM Software Library
• Software Sites
• Tucows Software Library
• Shareware CD-ROMs
• Software Capsules Compilation
• CD-ROM Images
• ZX Spectrum
• DOOM Level CD

• Smithsonian Libraries
• FEDLINK (US)
• Lincoln Collection
• American Libraries
• Canadian Libraries
• Universal Library
• Project Gutenberg
• Children's Library
• Biodiversity Heritage Library
• Books by Language
• Additional Collections

• Prelinger Archives
• Democracy Now!
• Occupy Wall Street
• TV NSA Clip Library
• Animation & Cartoons
• Arts & Music
• Computers & Technology
• Cultural & Academic Films
• Ephemeral Films
• Sports Videos
• Videogame Videos
• Youth Media

Search the history of over 866 billion web pages on the Internet.

Mobile Apps

• Wayback Machine (iOS)
• Wayback Machine (Android)

Browser Extensions

Archive-it subscription.

• Explore the Collections
• Build Collections

Save Page Now

Capture a web page as it appears now for use as a trusted citation in the future.

Please enter a valid web address

• Donate Donate icon An illustration of a heart shape

Introspective voyager : the poetic development of Wallace Stevens

Bookreader item preview, share or embed this item, flag this item for.

• Graphic Violence
• Explicit Sexual Content
• Hate Speech
• Misinformation/Disinformation
• Marketing/Phishing/Advertising
• Misleading/Inaccurate/Missing Metadata

This book contains pen markings

plus-circle Add Review comment Reviews

52 Previews

2 Favorites

Better World Books

DOWNLOAD OPTIONS

No suitable files to display here.

EPUB and PDF access not available for this item.

IN COLLECTIONS

Uploaded by station09.cebu on February 23, 2019

SIMILAR ITEMS (based on metadata)

• Bahasa Indonesia
• Eastern Europe
• Moscow Oblast

Elektrostal

Elektrostal Localisation : Country Russia , Oblast Moscow Oblast . Available Information : Geographical coordinates , Population, Area, Altitude, Weather and Hotel . Nearby cities and villages : Noginsk , Pavlovsky Posad and Staraya Kupavna .

Information

Find all the information of Elektrostal or click on the section of your choice in the left menu.

• Update data

Elektrostal Demography

Information on the people and the population of Elektrostal.

Elektrostal Geography

Geographic Information regarding City of Elektrostal .

Elektrostal Distance

Distance (in kilometers) between Elektrostal and the biggest cities of Russia.

Elektrostal Map

Locate simply the city of Elektrostal through the card, map and satellite image of the city.

Elektrostal Nearby cities and villages

Elektrostal weather.

Weather forecast for the next coming days and current time of Elektrostal.

Elektrostal Sunrise and sunset

Find below the times of sunrise and sunset calculated 7 days to Elektrostal.

Elektrostal Hotel

Our team has selected for you a list of hotel in Elektrostal classified by value for money. Book your hotel room at the best price.

Elektrostal Nearby

Below is a list of activities and point of interest in Elektrostal and its surroundings.

Elektrostal Page

• Information /Russian-Federation--Moscow-Oblast--Elektrostal#info
• Demography /Russian-Federation--Moscow-Oblast--Elektrostal#demo
• Geography /Russian-Federation--Moscow-Oblast--Elektrostal#geo
• Distance /Russian-Federation--Moscow-Oblast--Elektrostal#dist1
• Map /Russian-Federation--Moscow-Oblast--Elektrostal#map
• Nearby cities and villages /Russian-Federation--Moscow-Oblast--Elektrostal#dist2
• Weather /Russian-Federation--Moscow-Oblast--Elektrostal#weather
• Sunrise and sunset /Russian-Federation--Moscow-Oblast--Elektrostal#sun
• Hotel /Russian-Federation--Moscow-Oblast--Elektrostal#hotel
• Nearby /Russian-Federation--Moscow-Oblast--Elektrostal#around
• Page /Russian-Federation--Moscow-Oblast--Elektrostal#page
• Terms of Use
• Copyright © 2024 DB-City - All rights reserved
• Change Ad Consent Do not sell my data