Improper CSP in Image Optimization API for Next.js versions between 10.0.0 and 12.1.0

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',
  },
}