NEXTJS_SAFE_SVG_IMAGES
Prevent dangerouslyAllowSVG without Content Security Policy in Next.js applications.Table of Contents
Conformance is available on Enterprise plans
SVG can do many of the same things that HTML/JS/CSS can, meaning that it can be dangerous to execute SVG as this can lead to vulnerabilities without proper Content Security Policy (CSP) headers.
If you need to serve SVG images with the default Image Optimization API, you
can set dangerouslyAllowSVG
inside your next.config.js
:
next.config.js
module.exports = {
images: {
dangerouslyAllowSVG: true,
contentDispositionType: 'attachment',
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
},
};
In addition, it is strongly recommended to also set contentDispositionType
to
force the browser to download the image, as well as contentSecurityPolicy
to
prevent scripts embedded in the image from executing.
Last updated on July 23, 2024
Was this helpful?