Next Image and CSP
Unanswered
Polar bear posted this in #help-forum
Polar bearOP
Hi all 👋
I’m trying to set a strict CSP in a Next.js (App Router) app and want to avoid using style-src 'unsafe-inline'.
However, I’m running into issues with next/image, since it seems to always inject inline styles (e.g. style="color:transparent" or positioning styles when using fill), which then get blocked by CSP.
Is there any recommended way to use next/image without requiring unsafe-inline for styles?
For example:
• Can Next.js be configured to avoid inline styles for <Image />?
• Is there a workaround using nonces or hashes for these styles?
• Or is the only practical solution to switch to a plain <img>?
Would appreciate any insights or best practices 🙏
I’m trying to set a strict CSP in a Next.js (App Router) app and want to avoid using style-src 'unsafe-inline'.
However, I’m running into issues with next/image, since it seems to always inject inline styles (e.g. style="color:transparent" or positioning styles when using fill), which then get blocked by CSP.
Is there any recommended way to use next/image without requiring unsafe-inline for styles?
For example:
• Can Next.js be configured to avoid inline styles for <Image />?
• Is there a workaround using nonces or hashes for these styles?
• Or is the only practical solution to switch to a plain <img>?
Would appreciate any insights or best practices 🙏