CVE-2022-23646: Improper CSP in Image Optimization API for Next.js
Summary
CVE-2022-23646: Improper CSP in Image Optimization API for Next.js versions between 10.0.0 and 12.1.0. Affects next versions >= 10.0.0, < 12.1.0. Fixed in 12.1.0. How to fix ↓
Check if this vulnerability affects your application
Upload a manifest or SBOM and we'll show whether you're affected, plus every other risky package in the same scan.
No signup required · Results in about 60 seconds
Background
Next.js is a React framework that allows developers to build server-side rendered and static websites using React components. It provides features like automatic code splitting, server-side rendering, and static site generation. The Image Optimization API in Next.js allows for efficient loading and optimization of images on web pages. However, versions between 10.0.0 and 12.1.0 of Next.js are vulnerable to an issue that can lead to User Interface (UI) Misrepresentation of Critical Information.
Vulnerability Detail
The vulnerability arises when the next.config.js file has an images.domains array assigned and the image host assigned in images.domains allows user-provided SVG. This can allow an attacker to manipulate the UI and potentially misrepresent critical information. It is important to note that the instance is only affected if the next.config.js file has images.loader assigned to something other than the default. Version 12.1.0 of Next.js contains a patch for this vulnerability.
How To Fix
Latest published version: 16.4.2 as of 22 Oct 2026
npm install next@16.4.2Upgrading to it may include breaking changes; the version below is the minimum fixed release for this vulnerability.
If you need the minimum change
12.1.0
This is the first release that contains the fix.
npm install next@12.1.0Tip — Not sure which version your app runs? Vulert can match this fix to it. Scan free →
Workaround
If updating to version 12.1.0 is not immediately possible, a workaround is to change the next.config.js file to use a different loader configuration other than the default. For example:
module.exports = {
images: {
loader: 'imgix',
path: 'https://example.com/myaccount/',
},
}
Alternatively, if you want to use the loader prop on the component, you can use custom:
module.exports = {
images: {
loader: 'custom',
},
}
Conclusion
Next.js versions between 10.0.0 and 12.1.0 are vulnerable to User Interface (UI) Misrepresentation of Critical Information. It is recommended to update to version 12.1.0 or later to fix this vulnerability. If immediate update is not possible, a workaround is available by changing the next.config.js file. For further support on vulnerability remediation, contact DevNack.com.
See every vulnerability recorded for next →
FAQ
Next.js is a React framework that allows developers to build server-side rendered and static websites using React components.
The Image Optimization API in Next.js allows for efficient loading and optimization of images on web pages.
User Interface (UI) Misrepresentation of Critical Information refers to a vulnerability where the UI can be manipulated to misrepresent important information, potentially leading to security issues or user confusion.
To fix this vulnerability, update Next.js to version 12.1.0 or later and ensure that the next.config.js file does not have images.loader assigned to something other than the default.
Yes, a workaround is to change the next.config.js file to use a different loader configuration other than the default, or use the custom loader prop on the component.
References
Related vulnerabilities
Recent vulnerabilities recorded for next.
