Next.js is a React framework. Starting with version 10.0.0 and prior to version 12.1.0, Next.js is vulnerable to User Interface (UI) Misrepresentation of Critical Information. In order to be affected, the next.config.js
file must have an images.domains
array assigned and the image host assigned in images.domains
must allow user-provided SVG. If the next.config.js
file has images.loader
assigned to something other than default, the instance is not affected. Version 12.1.0 contains a patch for this issue. As a workaround, change next.config.js
to use a different loader configuration
other than the default.
Impact
- Affected: All of the following must be true to be affected
- Next.js between version 10.0.0 and 12.0.10
- The
next.config.js
file has images.domains array assigned
- The image host assigned in images.domains allows user-provided SVG
- Not affected: The
next.config.js
file has images.loader assigned to something other than default
Patches
Next.js 12.1.0
Workarounds
Change next.config.js
to use a different loader configuration other than the default, for example:
module.exports = {
images: {
loader: 'imgix',
path: 'https://example.com/myaccount/',
},
}
Or if you want to use the loader
prop on the component, you can use custom
:
module.exports = {
images: {
loader: 'custom',
},
}
References
Next.js is a React framework. Starting with version 10.0.0 and prior to version 12.1.0, Next.js is vulnerable to User Interface (UI) Misrepresentation of Critical Information. In order to be affected, the
next.config.js
file must have animages.domains
array assigned and the image host assigned inimages.domains
must allow user-provided SVG. If thenext.config.js
file hasimages.loader
assigned to something other than default, the instance is not affected. Version 12.1.0 contains a patch for this issue. As a workaround, changenext.config.js
to use a differentloader configuration
other than the default.Impact
next.config.js
file has images.domains array assignednext.config.js
file has images.loader assigned to something other than defaultPatches
Next.js 12.1.0
Workarounds
Change
next.config.js
to use a different loader configuration other than the default, for example:Or if you want to use the
loader
prop on the component, you can usecustom
:References