graphiql-cdn index.html example file is missing the integrity attribute on the scripts
- Dominant language
- TypeScript
- Stars
- 16.9k
- Forks
- 1.9k
- Avg merge
- 22h 45m
- Merged PRs (30d)
- 70
Description
File [/examples/graphiql-cdn/index.html ](https://github.com/graphql/graphiql/blob/main/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
```javascript
GraphiQL 4 with React 19 and GraphiQL Explorer
body {
margin: 0;
overflow: hidden; /* in Firefox */
}
#graphiql {
height: 100dvh;
}
.loading {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
{
"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"
}
}
// 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));
```
Contributor guide
Assessment
This issue has not been assessed yet.