[Feature request] Support for SRI

[Exelord]

Feature request

Is your feature request related to a problem? Please describe.

Subresource Integrity (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation.

Describe the solution you'd like

Implement webpack plugin (https://www.npmjs.com/package/webpack-subresource-integrity) as default, or under a flag just for production environment.

Thanks to it every external resource should have generated integrity hash and specified crossorigin policy. Example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Describe alternatives you've considered

There are other alternative plugins as well. We can also develop an in-house solution.
This feature can also be handled "per app", however, in my opinion, things related to the security of resources loading should be handled by the framework.

[CodingFlow]

How do I implement this "per app" for now until it's made part of the framework? My next.config.js:

const withPrefresh = require('@prefresh/next')
const SriPlugin = require('webpack-subresource-integrity')

module.exports = withPrefresh({
  webpack(config, { dev, isServer }) {

    // Preact config that is not relevant

    config.output.crossOriginLoading = 'anonymous'
    config.plugins.push(new SriPlugin({
        hashFuncNames: ['sha256', 'sha384'],
        enabled: true,
    }))

    return config
  },
})

[Starefossen]

@CodingFlow is this example still valid? I should see integrity="…" attributes in the final import in my app after build, right?

[bmadone]

@Starefossen did you figure it out?

[Starefossen]

@Starefossen did you figure it out?

Nope!

[jscheid]

I'm the principal author of webpack-subresource-integrity, I would also like to see this feature and could maybe help build it.

The snippet above is a start, except it should only be executed when !isServer. It will enable SRI for lazy-loaded (dynamically imported) chunks, but of course that doesn't help much when the top-level assets (those loaded from HTML files) don't carry hashes.

Without knowing much about next.js code, it looks like these hashes will have to be extracted from the result of the client build (somewhere around here?) and injected into the HTML pages (here?).

How would this data be ferried from one place to the other? I've seen mention of a manifest for this purpose, which should do the trick for the production server. Would that be a good place for it? For static builds the hashes are not needed in a manifest as they will already be baked into the HTML.

I've also seen mention of the client-side router injecting <script> tags; these would need treatment as well. It could probably use the hashes that soon will be exposed on the __webpack_require__ object, assuming that the router feature builds on top of Webpack chunks. Where does that code live?

One other consideration is that when enabled, the Cache-Control: no-transform header should be set. I assume this is straightforward now that next.js has a facility for managing server headers. People who export static pages and host them without TLS might have to be told that they need to ensure this header is set, or opt out of the feature.

[samuelgoff]

I'm currently trying to implement a Content Security Policy (CSP), and having integrity values added to script tags (or the CSP itself) is crucial to making this work well. IMO, having the integrity values live inside the script tags is vastly more readable than a big blob of hash values living inside the CSP.

I discovered webpack-subresource-integrity and based on its current usage (1.84M downloads per week!), it looks like others have arrived at the same conclusion I have -- that it's a great solution to this problem.

The only concern I have is that I am planning to add TypeScript to my codebase, which means I'll switch over to SWC + Spack, which (as I understand it) replaces babel/webpack.

Is a solution being pursued for SRI in Nextjs? I think it would be low-hanging fruit to significantly improve security of Nextjs apps. If so, will the solution work with the SWC/Spack build, as well?

[morgansson]

I'm currently facing this issue, I need SRI and my app is built using Nextjs.

I believe SRI is the future and the decentralized internet that's ahead of us requires that top frameworks like Nextjs adapt to support this technology.

I loved the term you've used "low-hanging fruit" to describe how easy would be to implement this. I'm thinking of doing some kind of parser to apply the SRI tags after the build is complete, as a separate task. I don't know how to actually fix this in any other way with Nextjs 12, as I'm using the swc compiler. Any ideas would be great.

Thanks a lot to everyone.

[sambacha]

does esm modules support SRI even?

[ajinabraham]

Any plans on supporting SRI at framework level?

[Starefossen]

Does anyone know if the the per-app solution is still working with current version of next.js and webpack? I can not see any integrity attributes being applied for this next.config.js when I run yarn build && yarn start 😭

/** @type {import('next').NextConfig} */
const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack(config) {
    config.output.crossOriginLoading = "anonymous";
    config.plugins.push(
      new SubresourceIntegrityPlugin({
        hashFuncNames: ["sha256", "sha384"],
        enabled: true,
      })
    );

    return config;
  },
}

module.exports = nextConfig

[praxxis]

There's been some movement on the SRI front in #39729, has anyone worked with the new option yet?

[pkreissel]

Unfortunately I couldn't find documentation for this. Did you already figure out how to implement this?

[RodrigoTomeES]

Hi, Is there any update for pages directory? The plugin webpack-subresource-integritydoesn't work anymore 😢

[bmadone]

@RodrigoTomeES any updates?

[RodrigoTomeES]

@bmadone no, I didn't it work

[komw]

Hi, it there any update of this FR?

[timneutkens]

There's an experimental feature for SRI:

next.js/packages/next/src/server/config-shared.ts

Line 342 in 1ce3913

algorithm?: SubresourceIntegrityAlgorithm

experimental.sri.algorithm

[gutisalex]

also mentioning this setting only works on webpack...

but what exactly does it do? In my case it does nothing...

How is it supposed to work? Is there any official documentation on that? Is it the only thing I do in the config? Or do I have to do something else? When can we expect turbo support for it (apparently they are working on it...)?

[felipedeboni]

@gutisalex looks like it had a bug, probably it's coming soon now given this PR was merged.

[lilong7676]

I see there is a canary update that supports SRI on App Router mode，my question is will support Page Route later or not?