Skip to content

graphiql-cdn index.html example file is missing the integrity attribute on the scripts #3925

New issue
New issue
Open
Open
graphiql-cdn index.html example file is missing the integrity attribute on the scripts#3925
@jorgegalveias

Description

@jorgegalveias
jorgegalveias
opened on May 5, 2025 · edited by jorgegalveias

File /examples/graphiql-cdn/index.html should be enhanced with the integrity hash for each file that is downloaded from the CDN. I wanted to push an PR with this change but I do not have permissions to do so.
Here is the full content of the new file with the correct integrity attributes

<!--
 *  Copyright (c) 2021 GraphQL Contributors
 *  All rights reserved.
 *
 *  This source code is licensed under the license found in the
 *  LICENSE file in the root directory of this source tree.
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GraphiQL 4 with React 19 and GraphiQL Explorer</title>
    <style>
      body {
        margin: 0;
        overflow: hidden; /* in Firefox */
      }

      #graphiql {
        height: 100dvh;
      }

      .loading {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
      }
    </style>
    <link
      crossorigin
      rel="stylesheet"
      href="https://esm.sh/graphiql@4.0.0/dist/style.css"
      integrity="sha384-Y1uOwUBXJwdB3JhvvckujsRKqh6XlEKm9njwJt4DA0sVYcfowXKZI+2EiknFgUpA"
    />
    <link
      crossorigin
      rel="stylesheet"
      href="https://esm.sh/@graphiql/plugin-explorer@4.0.0/dist/style.css"
      integrity="sha384-XffIsImDMwexX8UM/Bg3tss0MZOeQmZcnHzk0avUrw9ff0IQ2g9j7QLA6m2lz5D0"
    />
    <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19.1.0",
          "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",

          "react-dom": "https://esm.sh/react-dom@19.1.0",
          "react-dom/client": "https://esm.sh/react-dom@19.1.0/client",

          "graphiql": "https://esm.sh/graphiql@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
          "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
          "@graphiql/react": "https://esm.sh/@graphiql/react@0.30.0?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",

          "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.2?standalone&external=graphql",
          "graphql": "https://esm.sh/graphql@16.11.0"
        },
        "integrity": {
          "https://esm.sh/react@19.1.0": "sha384-C3ApUaeHIj1v0KX4cY/+K3hQZ/8HcAbbmkw1gBK8H5XN4LCEguY7+A3jga11SaHF",
          "https://esm.sh/react@19.1.0/jsx-runtime": "sha384-ISrauaZAJlw0FRGhk9DBbU+2n4Bs1mrmh1kkJ63lTmkLTXYqpWTNFkGLPcK9C9BX",
          "https://esm.sh/react-dom@19.1.0": "sha384-CKiqgCWLo5oVMbiCv36UR0pLRrzeRKhw1jFUpx0j/XdZOpZ43zOHhjf8yjLNuLEy",
          "https://esm.sh/react-dom@19.1.0/client": "sha384-QH8CM8CiVIQ+RoTOjDp6ktXLkc0ix+qbx2mo7SSnwMeUQEoM4XJffjoSPY85X6VH",
          "https://esm.sh/graphiql@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react": "sha384-29iS2iGCm41yh7ZZyL/Dixa2KDcTG3juKjp8fpmRLXGZkGAseEl42grV2ZjUYLsW",
          "https://esm.sh/@graphiql/plugin-explorer@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql": "sha384-7WokznugiizL5pv0sUDAYghW3xNlKIRRoRwWFCaEYwwMs0TYqHIVCOZqhG09o51N",
          "https://esm.sh/@graphiql/react@0.30.0?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit": "sha384-lwCh4xjIhh0ER0/6UFs8E/PnneI6rLLOwNSsTO3iQQNRvqXOouJvyl20eXlJgPWU",
          "https://esm.sh/@graphiql/toolkit@0.11.2?standalone&external=graphql": "sha384-rBQAHYVA2lmWz3885mGgaGGC/O4N+uH6T3TNoLCOqSFJd6oI6sezQHBnF8C4QGuQ",
          "https://esm.sh/graphql@16.11.0": "sha384-uhRXaGfgCFqosYlwSLNd7XpDF9kcSUycv5yVbjjhH5OrE675kd0+MNIAAaSc+1Pi"
        }
      }
    </script>
    <script type="module">
      // Import React and ReactDOM
      import React from 'react';
      import ReactDOM from 'react-dom/client';
      // Import GraphiQL and the Explorer plugin
      import { GraphiQL } from 'graphiql';
      import { createGraphiQLFetcher } from '@graphiql/toolkit';
      import { explorerPlugin } from '@graphiql/plugin-explorer';

      const fetcher = createGraphiQLFetcher({
        url: 'https://countries.trevorblades.com',
      });
      const explorer = explorerPlugin();

      function App() {
        return React.createElement(GraphiQL, {
          fetcher,
          plugins: [explorer],
        });
      }

      const container = document.getElementById('graphiql');
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));
    </script>
  </head>
  <body>
    <div id="graphiql">
      <div class="loading">Loading…</div>
    </div>
  </body>
</html>

Activity

jorgegalveias
changed the title [-]graphqiq-cdn index.html example file is missing the file integrity attribute on the scripts[/-] [+]graphqiq-cdn index.html example file is missing the integrity attribute on the scripts[/+] on May 5, 2025
jorgegalveias
changed the title [-]graphqiq-cdn index.html example file is missing the integrity attribute on the scripts[/-] [+]graphiql-cdn index.html example file is missing the integrity attribute on the scripts[/+] on May 5, 2025
dimaMachina

dimaMachina commented on May 5, 2025

@dimaMachina
dimaMachina
on May 5, 2025 · Hidden as resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @dimaMachina@jorgegalveias

        Issue actions
          graphiql-cdn index.html example file is missing the integrity attribute on the scripts · Issue #3925 · graphql/graphiql