Add support for SRI (Subresource Integrity)

[willdurand]

trafficstars

SRI used to be supported in CRA (facebook/create-react-app#1176) but it was removed because of some incompatibilities (facebook/create-react-app#1231).

Could we re-add SRI support in CRA? I feel like the reasons given in #1231 could be solved.

[kumar303]

Here are some benefits of SRI:

• It protects against CDN takeovers. This is important because CDNs are often third party services with separate credentials, etc.
• It adds defense in depth against DNS hijacking
• It adds defense in depth against malicious (or privacy invasive) browser extensions and / or anti-virus software
• It allows you to use a CDN without https more safely. Today, this is not so important since most CDNs use https.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[willdurand]

Well... this issue is rather waiting for constructive comments (not from a bot) :)

[cnorthwood]

I wonder if taking essentially the same approach as the original one in #1176, but with an env var to disable it if it causes issues (similar to INLINE_RUNTIME_CHUNK for those of use using strict CSP configurations that ban unsafe-inline) would be best? or even off by default with an env var to opt in (although imo making security opt-in isn't the best idea)

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[willdurand]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

Nope.

[murphman300]

Hi all, any headway/updates on this re-roll out? Thanks

[maxburke]

Any updates?

[audiolion]

this would be a nice feature in CRA for people who need stronger security defaults

[I-keep-trying]

I just read this article on the auth0.com blog - published in Nov 2020 - and there is a section titled "Locking Client-Side Assets with Subresource Integrity" that recommends using SRI, and uses react - v 17 even! - as an example. They provide a link in the article to unpkg where they ::also:: use react in all of their examples.

So, I am confused. I just looked at one of the react apps I am currently working on (v 17), and it seems that the script tags are created during build, so you cannot do what the article instructs you to do, i.e., add an unpkg script, or alternatively, without unpkg, add an SRI hash.

Is the information in that article ::and:: on unpkg's website just wrong?

[audiolion]

@I-keep-trying you are crossing wires here, this is create-react-app, tooling to build react apps, the article was showing how you could load the react.js script in a browser through a script tag from unpkg using subresource integrity. This issue is about create-react-app builds which contain all bundled code and are served from your own domain or CDN having subresource integrity attached.

[I-keep-trying]

@audiolion OK, I think I understand. So, the article's instructions would work on a webpack (ejected) react app, then, just not the cra, is that correct? And cra no longer has SRI? I'm still learning, so forgive me if this is very basic.

[audiolion]

@I-keep-trying yes SRI can work on an ejected create react app, you would have to integrate with the webpack plugin https://www.npmjs.com/package/webpack-subresource-integrity

I would ask that you move the convo to a place to ask questions like reactiflux discord or stack overflow so that we don't keep pinging everyone as this is off-topic to the main issue, thanks!

[copiali]

+1 would be nice if we can add this in without ejected

[llatinov]

No need to eject the app.

1. Install react-app-rewired NPM package.
2. Add config-overrides.js file with content:

module.exports = function override(config, env) {
  config.output.crossOriginLoading = 'use-credentials'
  config.plugins.push(
    new SriPlugin({
      hashFuncNames: ['sha256', 'sha384'],
      enabled: process.env.NODE_ENV === 'production'
    })
  )
  return config
}

3. Change build command from react-scripts build to react-app-rewired build

[codinronan]

@llatinov worked great for us, thanks!

[Zvezdin]

Any progress adding this back natively? Looking to sign webpages built by react and want to include hashes of all content there.

[aiavci]

@llatinov

SriPlugin Where's this plugin from?

[gautamkrishnar]

@aiavci https://www.npmjs.com/package/webpack-subresource-integrity

[nhandt2021]

@llatinov Thanks a lot. It works for us either.

[dtrenz]

FWIW, SRI will be a PCI compliance requirement (DSS 4.0 §6.4.3) in March, 2025. Hopefully this is supported well before then, so that ecommerce applications built with CRA don't lose their ability to handle payment card data.

[codinronan]

FWIW, SRI will be a PCI compliance requirement (DSS 4.0 §6.4.3) in March, 2025. Hopefully this is supported well before then, so that ecommerce applications built with CRA don't lose their ability to handle payment card data.

CRA is being end-of-lifed and will likely never receive these kinds of updates.

We are moving to either Vite or Remix, but take a look at Next.js, it provides this capability out of the box.

[justinbaker999]

I had a similar use case but with craco instead of react-app-rewired; using a similar config with the same Webpack plugin did the trick.

Install https://www.npmjs.com/package/webpack-subresource-integrity npm install webpack-subresource-integrity --save-dev

Add to your craco config file: craco.config.js

import {SubresourceIntegrityPlugin} from 'webpack-subresource-integrity';

export default {
  webpack: {
    output: {
      // the following setting is required for SRI to work:
      crossOriginLoading: 'anonymous'
    },
    plugins: {
      add: [new SubresourceIntegrityPlugin()]
    }
  }
};

[AndersRoseen]

Using craco as well, I did just like @justinbaker999 and it works fine. The output section had to go in a configure section though, like this:

webpack: {
    configure: {
        output: {
          // the following setting is required for SRI to work:
          crossOriginLoading: 'anonymous'
        },
    },
    ...
},