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.jsfile must have animages.domainsarray assigned and the image host assigned inimages.domainsmust allow user-provided SVG. If thenext.config.jsfile hasimages.loaderassigned 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.jsto use a differentloader configurationother than the default.Impact
next.config.jsfile has images.domains array assignednext.config.jsfile has images.loader assigned to something other than defaultPatches
Next.js 12.1.0
Workarounds
Change
next.config.jsto use a different loader configuration other than the default, for example:Or if you want to use the
loaderprop on the component, you can usecustom:References