SRI for React CDN Builds

Securing React CDN Builds with SRI

While most React applications use bundlers like Webpack or Vite, some use cases call for loading React directly from a CDN — prototyping, documentation sites, legacy migrations, or environments where a build step is not available. In these scenarios, SRI is essential.

React CDN Script Tags with SRI

React requires two separate scripts: react (the core library) and react-dom (the DOM renderer):

<!-- React Core -->
<script
  src="https://unpkg.com/react@18/umd/react.production.min.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

<!-- ReactDOM -->
<script
  src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

Generating React SRI Hashes

Because React publishes UMD builds to npm, the CDN files are deterministic. To generate hashes:

1. Install the exact version: npm pack react@18.2.0
2. Extract umd/react.production.min.js
3. Compute the hash using this tool or the command line
4. Repeat for react-dom

Version Pinning for React

React uses semantic versioning, and even patch releases may contain different minified output. Always pin to an exact version:

<!-- Correct: exact version -->
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js" ...></script>

<!-- Incorrect: range version -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" ...></script>

Development vs. Production Builds

React provides both development and production UMD builds:

• react.development.js — includes warnings, larger size, not for production
• react.production.min.js — minified, no warnings, production-ready

Each build has a different hash. Never mix development and production integrity values.

React 19 and Beyond

As React evolves, new major versions introduce new files and entry points. When upgrading:

1. Identify all React-related CDN files you load
2. Download each file from the new version
3. Generate fresh SRI hashes for each
4. Test that your application works with the new version before updating production

Alternative: ES Module CDN

Modern CDNs like esm.sh and Skypack serve React as ES modules. SRI works with ES module scripts too:

<script type="module">
  import React from "https://esm.sh/react@18.2.0";
</script>

However, SRI for import statements inside modules is not yet standardized. Only the top-level <script> tag's integrity is verified.