next/Image uses unsafe inline style

[0xdbe]

Link to the code that reproduces this issue

https://github.com/0xdbe/vercel-gtm

To Reproduce

1. Start Application: npm run dev
2. Open http://localhost:3000/

Current vs. Expected behavior

With a strict Content Security Policy, the following error appears in browser console (chrome):

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-xxx'". Either the 'unsafe-inline' keyword, a hash ('sha256-zlqnbDt84zf1iSefLU/ImC54isoprH/MRiVZGskwexk='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

This error is due to next/Image which adds a style attribute:

<img 
  alt="Next.js Logo" 
  ...
  style="color:transparent" 
  src="/next.svg">

next/Image should not produce unsafe inline style, or at least, provide a way to disable this for secure website.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun, 21 Jan 2024 22:14:10 +0000
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 8.14.3
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image optimization (next/image, next/legacy/image)

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

• Tested with 14.1.1-canary.21: https://github.com/0xdbe/vercel-gtm/tree/next-canary
• Discussion: https://github.com/vercel/next.js/discussions/61209
• Workaround using getImageProps: https://github.com/0xdbe/vercel-gtm/tree/fix/image-inline-style