From 1a7776b1c1b2cfdf4095cf8046fe5f97bb641fe1 Mon Sep 17 00:00:00 2001 From: Dustin Deus Date: Thu, 15 Aug 2024 23:01:16 +0200 Subject: [PATCH 1/5] fix: polyfill crypto.randomUUID for localhost (#1086) --- playground/src/App.tsx | 1 + playground/src/lib/random-uuid.ts | 15 +++++++++++++++ router/internal/graphiql/graphiql.html | 2 +- 3 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 playground/src/lib/random-uuid.ts diff --git a/playground/src/App.tsx b/playground/src/App.tsx index df1660de70..48681e3ad9 100644 --- a/playground/src/App.tsx +++ b/playground/src/App.tsx @@ -1,3 +1,4 @@ +import '@/lib/random-uuid'; // Polyfill import { Playground } from './components/playground'; export default function App() { diff --git a/playground/src/lib/random-uuid.ts b/playground/src/lib/random-uuid.ts new file mode 100644 index 0000000000..5aed5b0aea --- /dev/null +++ b/playground/src/lib/random-uuid.ts @@ -0,0 +1,15 @@ +// Polyfill for crypto.randomUUID +// crypto.randomUUID() is now standard on all modern browsers and JS runtimes. +// However, because new browser APIs are restricted to secure contexts, +// this method is only available to pages served locally (localhost or 127.0.0.1) or over HTTPS. +// This polyfill is a fallback for when crypto.randomUUID is not available. +// https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues +if (!('randomUUID' in crypto)) { + // https://stackoverflow.com/a/2117523/2800218 + // @ts-ignore-next-line + crypto.randomUUID = (): string => { + return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => + (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16), + ); + }; +} diff --git a/router/internal/graphiql/graphiql.html b/router/internal/graphiql/graphiql.html index 4cf84dd30a..95893359ea 100644 --- a/router/internal/graphiql/graphiql.html +++ b/router/internal/graphiql/graphiql.html @@ -38,7 +38,7 @@ * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. - */function ue(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n