Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

External Asset Integrity and Module Resolution

Last updated: 5 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

A browser may fetch JavaScript or CSS from another origin after the HTML document arrives. An integrity value lets the browser compare received bytes against an expected digest before executing or applying the asset. Cross-origin integrity also needs a compatible CORS response. An import map controls how module specifiers resolve in a document, but it is not a general rule for workers or ordinary script src attributes. These mechanisms protect different steps; neither replaces a content security policy, dependency review, or a coherent deployment manifest.

Working case

The case dashboard loads a reviewed charting module from an external asset host. The release manifest records its exact URL and digest. If the asset host serves altered bytes, the browser refuses that module and the dashboard shows a text summary for the affected chart. The import map points the named chart module to the reviewed release path and is shipped before application modules use it. A worker that processes scan thumbnails has its own explicit module URL; the team does not assume the document import map governs the worker.

Implementation boundary

javascript
function assetMatchesRelease(asset, release) {
  return asset.releaseId === release.id && release.integrityByPath[asset.path] === asset.integrity;
}
console.log(assetMatchesRelease({ releaseId: 47, path: '/assets/chart-47.js', integrity: 'sha384-approved' }, { id: 47, integrityByPath: { '/assets/chart-47.js': 'sha384-approved' } }));
// Output: true

Generate integrity metadata from the final deployed asset bytes, after minification and any transformation. Pair external script or style fetches with the appropriate CORS setting and test the response headers in the target environment. Keep import-map entries and their asset paths in the same release unit as the HTML that uses them. If the platform supports integrity metadata in an import map, verify that exact behavior in the browser targets; otherwise pin external modules through a build or direct element integrity contract. A failed asset needs a visible fallback, not a silent missing chart. Treat unexpected CDN redirects and mutable URLs as release failures.

Cost and boundaries

Digest comparison is linear in downloaded bytes and normally small beside transfer and parsing, but every external request adds latency and failure surface. A self-hosted immutable asset may reduce cross-origin complexity while moving bandwidth and patch ownership to your service. Import maps can simplify module names but add a deployment coordination point: a stale HTML document may resolve a name to an asset removed by a newer release. Retain old hashed assets for the maximum supported document lifetime, and measure failed loads before cleanup.

Failure trace

A CDN optimizer rewrites the file after the team computed its digest. The browser blocks the chart module, while the rest of the case page continues. Another release updates the import map but deletes the previous hashed module before open tabs refresh. Reproduce a mismatched digest, a missing CORS header, a stale open tab, and a worker import that ignores the document map. The page should state which function is unavailable and keep the text report usable. Rollback must restore a matching HTML-map-asset set.

Verification

  • Changed bytes fail the integrity check in a browser test.
  • A missing chart leaves a text equivalent.
  • Open tabs can still fetch their release's hashed assets.

Practice drill

Build release 47 with a hashed chart asset and record its digest. Mutate one byte in a test server response; prove that the browser blocks execution and shows the text fallback. Serve release 48 HTML while retaining release 47 assets, then remove one old asset in staging to observe open-tab behavior. Record how long old assets must remain and which telemetry proves they are no longer requested.

Decision note

Bind external browser bytes and module paths to one reviewed release, with an explicit failure path.

Common Mistakes

  • Computing a digest before a CDN rewrites the file.
  • Assuming an import map changes worker imports.
  • Deleting old hashed assets during a rolling release.

Connected lessons

Build Project: frontend artifact promotion and rollback and review Web Development: embedded interfaces and build integrity quiz; follow Frontend Build and Artifact Integrity; Locked Dependency Resolution and Clean Installs; Dependency Admission, Install Scripts, and Provenance; Artifact Manifest, Rollout, and Rollback Coherence; Content Negotiation and Compression Contracts; Accessible Graphic Controls and Text Equivalents.

web-tech
web-development
Storage details