Use subtle crypto for more browser support (#376)

guybedford · web-flow · commit e4c7d8a055c1 · 2024-09-02T13:02:59.000-07:00
diff --git a/src/common/integrity.ts b/src/common/integrity.ts
@@ -1,13 +1,18 @@
-import { createHash as _createHash } from "crypto";
+let _nodeCrypto;
 
-let createHash = _createHash;
-
-export function setCreateHash(_createHash) {
-  createHash = _createHash;
-}
-
-export function getIntegrity(buf: Uint8Array | string): `sha384-${string}` {
-  const hash = createHash("sha384");
+export async function getIntegrityNodeLegacy(buf: Uint8Array | string): Promise<`sha384-${string}`> {
+  const hash = (_nodeCrypto || (_nodeCrypto = (await (0, eval)('import("node:crypto")')))).createHash("sha384");
   hash.update(buf);
   return `sha384-${hash.digest("base64")}`;
 }
+
+export let getIntegrity = async function getIntegrity(buf: Uint8Array | string): Promise<`sha384-${string}`> {
+  const data = typeof buf === "string" ? new TextEncoder().encode(buf) : buf;
+  const hashBuffer = await crypto.subtle.digest("SHA-384", data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashBase64 = btoa(String.fromCharCode(...hashArray));
+  return `sha384-${hashBase64}`;
+}
+
+if (typeof crypto === 'undefined')
+  getIntegrity = getIntegrityNodeLegacy;
diff --git a/src/generator-deno.ts b/src/generator-deno.ts
@@ -8,11 +8,9 @@ import { pathToFileURL } from "url";
 import { setBabel as setBabelCjs } from "./trace/cjs.js";
 import { setBabel as setBabelTs } from "./trace/ts.js";
 import { setPathFns } from "./trace/resolver.js";
-import { setCreateHash } from "./common/integrity.js";
 
 setBabelCjs(babel);
 setBabelTs(babel, babelPresetTs, babelPluginSyntaxImportAttributes);
-setCreateHash(createHash);
 setPathFns(realpath, pathToFileURL);
 
 export * from "./generator.js";
diff --git a/src/generator.ts b/src/generator.ts
@@ -755,7 +755,7 @@ export class Generator {
 
       esms = `<script async src="${esmsUrl}" crossorigin="anonymous"${
         integrity
-          ? ` integrity="${getIntegrity(
+          ? ` integrity="${await getIntegrity(
               new Uint8Array(
                 await (
                   await fetch(esmsUrl, this.traceMap.resolver.fetchOpts)
diff --git a/src/trace/analysis.ts b/src/trace/analysis.ts
@@ -22,11 +22,11 @@ export interface Analysis {
 export { createTsAnalysis } from "./ts.js";
 export { createCjsAnalysis } from "./cjs.js";
 
-export function createEsmAnalysis(
+export async function createEsmAnalysis(
   imports: any[],
   source: string,
   url: string
-): Analysis {
+): Promise<Analysis> { // Change the return type to Promise<Analysis>
   if (!imports.length && registerRegEx.test(source))
     return createSystemAnalysis(source, imports, url);
   const deps: string[] = [];
@@ -59,17 +59,17 @@ export function createEsmAnalysis(
     cjsLazyDeps: null,
     size,
     format: "esm",
-    integrity: getIntegrity(source),
+    integrity: await getIntegrity(source),
   };
 }
 
 const registerRegEx =
   /^\s*(\/\*[^\*]*(\*(?!\/)[^\*]*)*\*\/|\s*\/\/[^\n]*)*\s*System\s*\.\s*register\s*\(\s*(\[[^\]]*\])\s*,\s*\(?function\s*\(\s*([^\),\s]+\s*(,\s*([^\),\s]+)\s*)?\s*)?\)/;
-export function createSystemAnalysis(
+export async function createSystemAnalysis(
   source: string,
   imports: string[],
   url: string
-): Analysis {
+): Promise<Analysis> {
   const [, , , rawDeps, , , contextId] = source.match(registerRegEx) || [];
   if (!rawDeps) return createEsmAnalysis(imports, source, url);
   const deps = JSON.parse(rawDeps.replace(/'/g, '"'));
@@ -101,6 +101,6 @@ export function createSystemAnalysis(
     cjsLazyDeps: null,
     size,
     format: "system",
-    integrity: getIntegrity(source),
+    integrity: await getIntegrity(source),
   };
 }
diff --git a/src/trace/cjs.ts b/src/trace/cjs.ts
@@ -110,7 +110,7 @@ export async function createCjsAnalysis(
     size: source.length,
     format: "commonjs",
     usesCjs,
-    integrity: getIntegrity(source),
+    integrity: await getIntegrity(source),
   };
 }
 
diff --git a/src/trace/resolver.ts b/src/trace/resolver.ts
@@ -900,7 +900,7 @@ export class Resolver {
           cjsLazyDeps: null,
           size: source.byteLength,
           format: "wasm",
-          integrity: getIntegrity(new Uint8Array(source)),
+          integrity: await getIntegrity(new Uint8Array(source)),
         };
       }
 
@@ -923,7 +923,7 @@ export class Resolver {
             cjsLazyDeps: null,
             size: source.length,
             format: "json",
-            integrity: getIntegrity(source),
+            integrity: await getIntegrity(source),
           };
         } catch {}
       }
@@ -936,7 +936,7 @@ export class Resolver {
             cjsLazyDeps: null,
             size: source.length,
             format: "css",
-            integrity: getIntegrity(source),
+            integrity: await getIntegrity(source),
           };
         } catch {}
       }
diff --git a/src/trace/ts.ts b/src/trace/ts.ts
@@ -117,7 +117,7 @@ export async function createTsAnalysis(
     cjsLazyDeps: null,
     size: source.length,
     format: "typescript",
-    integrity: getIntegrity(source),
+    integrity: await getIntegrity(source),
   };
 }
 
diff --git a/test/test.html b/test/test.html
@@ -11,10 +11,9 @@
     "../": {
       "#fetch": "../dist/fetch-native.js",
       "@babel/core": "https://ga.jspm.io/npm:@babel/core@7.25.2/lib/index.js",
-      "@babel/plugin-syntax-import-attributes": "https://ga.jspm.io/npm:@babel/plugin-syntax-import-attributes@7.24.7/lib/index.js",
+      "@babel/plugin-syntax-import-attributes": "https://ga.jspm.io/npm:@babel/plugin-syntax-import-attributes@7.25.6/lib/index.js",
       "@babel/preset-typescript": "https://ga.jspm.io/npm:@babel/preset-typescript@7.24.7/lib/index.js",
       "@jspm/import-map": "https://ga.jspm.io/npm:@jspm/import-map@1.1.0/dist/map.js",
-      "crypto": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/crypto.js",
       "es-module-lexer": "https://ga.jspm.io/npm:es-module-lexer@1.5.4/dist/lexer.js",
       "es-module-lexer/js": "https://ga.jspm.io/npm:es-module-lexer@1.5.4/dist/lexer.asm.js",
       "fs": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/fs.js",
@@ -30,13 +29,13 @@
       "#node.js": "https://ga.jspm.io/npm:browserslist@4.23.3/browser.js",
       "@ampproject/remapping": "https://ga.jspm.io/npm:@ampproject/remapping@2.3.0/dist/remapping.umd.js",
       "@babel/code-frame": "https://ga.jspm.io/npm:@babel/code-frame@7.24.7/lib/index.js",
-      "@babel/compat-data/native-modules": "https://ga.jspm.io/npm:@babel/compat-data@7.25.2/native-modules.js",
-      "@babel/compat-data/plugins": "https://ga.jspm.io/npm:@babel/compat-data@7.25.2/plugins.js",
+      "@babel/compat-data/native-modules": "https://ga.jspm.io/npm:@babel/compat-data@7.25.4/native-modules.js",
+      "@babel/compat-data/plugins": "https://ga.jspm.io/npm:@babel/compat-data@7.25.4/plugins.js",
       "@babel/core": "https://ga.jspm.io/npm:@babel/core@7.25.2/lib/index.js",
-      "@babel/generator": "https://ga.jspm.io/npm:@babel/generator@7.25.0/lib/index.js",
+      "@babel/generator": "https://ga.jspm.io/npm:@babel/generator@7.25.6/lib/index.js",
       "@babel/helper-annotate-as-pure": "https://ga.jspm.io/npm:@babel/helper-annotate-as-pure@7.24.7/lib/index.js",
       "@babel/helper-compilation-targets": "https://ga.jspm.io/npm:@babel/helper-compilation-targets@7.25.2/lib/index.js",
-      "@babel/helper-create-class-features-plugin": "https://ga.jspm.io/npm:@babel/helper-create-class-features-plugin@7.25.0/lib/index.js",
+      "@babel/helper-create-class-features-plugin": "https://ga.jspm.io/npm:@babel/helper-create-class-features-plugin@7.25.4/lib/index.js",
       "@babel/helper-member-expression-to-functions": "https://ga.jspm.io/npm:@babel/helper-member-expression-to-functions@7.24.8/lib/index.js",
       "@babel/helper-module-imports": "https://ga.jspm.io/npm:@babel/helper-module-imports@7.24.7/lib/index.js",
       "@babel/helper-module-transforms": "https://ga.jspm.io/npm:@babel/helper-module-transforms@7.25.2/lib/index.js",
@@ -48,16 +47,16 @@
       "@babel/helper-string-parser": "https://ga.jspm.io/npm:@babel/helper-string-parser@7.24.8/lib/index.js",
       "@babel/helper-validator-identifier": "https://ga.jspm.io/npm:@babel/helper-validator-identifier@7.24.7/lib/index.js",
       "@babel/helper-validator-option": "https://ga.jspm.io/npm:@babel/helper-validator-option@7.24.8/lib/index.js",
-      "@babel/helpers": "https://ga.jspm.io/npm:@babel/helpers@7.25.0/lib/index.js",
+      "@babel/helpers": "https://ga.jspm.io/npm:@babel/helpers@7.25.6/lib/index.js",
       "@babel/highlight": "https://ga.jspm.io/npm:@babel/highlight@7.24.7/lib/index.js",
-      "@babel/parser": "https://ga.jspm.io/npm:@babel/parser@7.25.3/lib/index.js",
+      "@babel/parser": "https://ga.jspm.io/npm:@babel/parser@7.25.6/lib/index.js",
       "@babel/plugin-syntax-jsx": "https://ga.jspm.io/npm:@babel/plugin-syntax-jsx@7.24.7/lib/index.js",
-      "@babel/plugin-syntax-typescript": "https://ga.jspm.io/npm:@babel/plugin-syntax-typescript@7.24.7/lib/index.js",
+      "@babel/plugin-syntax-typescript": "https://ga.jspm.io/npm:@babel/plugin-syntax-typescript@7.25.4/lib/index.js",
       "@babel/plugin-transform-modules-commonjs": "https://ga.jspm.io/npm:@babel/plugin-transform-modules-commonjs@7.24.8/lib/index.js",
       "@babel/plugin-transform-typescript": "https://ga.jspm.io/npm:@babel/plugin-transform-typescript@7.25.2/lib/index.js",
       "@babel/template": "https://ga.jspm.io/npm:@babel/template@7.25.0/lib/index.js",
-      "@babel/traverse": "https://ga.jspm.io/npm:@babel/traverse@7.25.3/lib/index.js",
-      "@babel/types": "https://ga.jspm.io/npm:@babel/types@7.25.2/lib/index.js",
+      "@babel/traverse": "https://ga.jspm.io/npm:@babel/traverse@7.25.6/lib/index.js",
+      "@babel/types": "https://ga.jspm.io/npm:@babel/types@7.25.6/lib/index.js",
       "@jridgewell/gen-mapping": "https://ga.jspm.io/npm:@jridgewell/gen-mapping@0.3.5/dist/gen-mapping.umd.js",
       "@jridgewell/resolve-uri": "https://ga.jspm.io/npm:@jridgewell/resolve-uri@3.1.2/dist/resolve-uri.umd.js",
       "@jridgewell/set-array": "https://ga.jspm.io/npm:@jridgewell/set-array@1.2.1/dist/set-array.umd.js",
@@ -66,13 +65,13 @@
       "ansi-styles": "https://ga.jspm.io/npm:ansi-styles@3.2.1/index.js",
       "browserslist": "https://ga.jspm.io/npm:browserslist@4.23.3/index.js",
       "buffer": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/buffer.js",
-      "caniuse-lite/dist/unpacker/agents": "https://ga.jspm.io/npm:caniuse-lite@1.0.30001649/dist/unpacker/agents.js",
+      "caniuse-lite/dist/unpacker/agents": "https://ga.jspm.io/npm:caniuse-lite@1.0.30001655/dist/unpacker/agents.js",
       "chalk": "https://ga.jspm.io/npm:chalk@2.4.2/index.js",
       "color-convert": "https://ga.jspm.io/npm:color-convert@1.9.3/index.js",
       "color-name": "https://ga.jspm.io/npm:color-name@1.1.3/index.js",
       "convert-source-map": "https://ga.jspm.io/npm:convert-source-map@2.0.0/index.js",
       "debug": "https://ga.jspm.io/npm:debug@4.3.6/src/browser.js",
-      "electron-to-chromium/versions": "https://ga.jspm.io/npm:electron-to-chromium@1.5.4/versions.js",
+      "electron-to-chromium/versions": "https://ga.jspm.io/npm:electron-to-chromium@1.5.13/versions.js",
       "escape-string-regexp": "https://ga.jspm.io/npm:escape-string-regexp@1.0.5/index.js",
       "fs": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/fs.js",
       "gensync": "https://ga.jspm.io/npm:gensync@1.0.0-beta.2/index.js",

Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ export async function createCjsAnalysis(`
`110`	`110`	`size: source.length,`
`111`	`111`	`format: "commonjs",`
`112`	`112`	`usesCjs,`
`113`		`- integrity: getIntegrity(source),`
	`113`	`+ integrity: await getIntegrity(source),`
`114`	`114`	`};`
`115`	`115`	`}`
`116`	`116`
Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ export async function createTsAnalysis(`
`117`	`117`	`cjsLazyDeps: null,`
`118`	`118`	`size: source.length,`
`119`	`119`	`format: "typescript",`
`120`		`- integrity: getIntegrity(source),`
	`120`	`+ integrity: await getIntegrity(source),`
`121`	`121`	`};`
`122`	`122`	`}`
`123`	`123`