CSP error when using next/image

[ennair]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.6.0: Sun Nov 6 23:29:57 PST 2022; root:xnu-8020.240.14~1/RELEASE_ARM64_T8101
Binaries:
Node: 18.12.1
npm: 9.3.1
Yarn: 3.3.1
pnpm: N/A
Relevant packages:
next: 13.1.5-canary.2
eslint-config-next: 13.1.4
react: 18.2.0
react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

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

Link to the code that reproduces this issue

https://github.com/ennair/next-test/tree/next-image-test

To Reproduce

1. Checkout the project.
2. Run yarn
3. Run yarn build
4. Run yarn start
5. Open localhost:3000
6. You will see the page loading with an image and in the console a CSP error.

Describe the Bug

When using next/image it always adds inline styling on the image. It adds: style="color:transparent".
Also in case I add my own styling. Because of this, I get a CSP error. I have to add style-src 'unsafe-inline', which I do not want to add.

Expected Behavior

Next/image should not add inline styling on the image component.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[MrEmanuel]

I have the same issue.
I'm generating my content-security-policy (csp) header in _document (not using the new app-structure), and adding it to a meta tag, and that seems to do the trick for all scripts and styles, except for static file images in the /public folder.

I haven't applied any inline styles, but as ennair says next seem to add style="color:transparent" which triggers an error.

[vzrenggamani]

Same problems here, does the color:transparent could be disabled in some reason or just we need blurdDataUrl @MrEmanuel ?

[basvkl]

Is there an update on this? I'm running into the same thing

[xecrets]

Still getting color:transparent inline style when using the <Image /> component in Next.js 13.4.19, and still causing SEO validation errors. Either get rid of the inline style, or provide a css that includes the required styles and use it.

[MathiasGruber]

This is quite annoying when trying to enforce strict CSP. A workaround is to add style={{ color: undefined }} to the <Image /> tag

[xecrets]

@MathiasGruber I just tried your style={{ color: undefined }} workaround, but I can't seem to get it to work. It seems to be just ignored, and I still get style="color: transparent;" in the generated img tag.

Are you sure your workaround works, what can I be doing wrong if so?

[jordanpurinton]

I also am experiencing this error. If we follow the CSP docs as laid out, you encounter errors in the console in prod mode when using the next image component since there is an inline style applied.

[icyJoseph]

This is still an issue. Though there's a workaround in Next 14.1.0, with getImageProps, and at the risk of having bad UI because of not applying the color transparent.

• inline style ``color:transparent`` in ``Image`` #61209 (reply in thread)

I wonder if there are grounds to have an API to tell Next.js to apply CSS classes instead? In a sort of, I know what I am doing, we'd tell Next.js that, these styles are found in a global CSS class, and it would have to trust that they do exist.

[sneko]

I found a way to use my custom style with next/image while being a minimal workaround: #61388 (comment)

[icyJoseph]

Now in 14.1.x, you can use getImageProps though, and peel out the style object if you don't want it.

[sneko]

Yeah, I started to make a reusable component at start, but at the end I preferred having the little style override.

For record:

// Image.tsx

import NextImage, { getImageProps } from 'next/image';
import { ComponentProps } from 'react';

export default function Image(props: ComponentProps<typeof NextImage>) {
  const { props: nextProps } = getImageProps({
    ...props,
  });

  const { style: _omit, ...delegated } = nextProps;

  return <img {...delegated} />;
}

Then use import Image from './Image'; instead of import Image from 'next/image';.

EDIT: my workaround mentioned above is more about using a custom style despite having the next/image workaround.

[BrianHHough]

Thank you for sharing this @sneko - this worked great for me and got me around the CSP issues I was facing! I like this reusable component approach and how it doesn't trigger the CSP error: Refused to apply inline style because it violates the following Content Security Policy directive:

Really appreciate you making this and sharing it!

[KoenBrouwer]

I'm facing the same issue, where the discussions about removing unsafe-inline from the Content Security Policy are driving me absolutely nuts.

@icyJoseph Now in 14.1.x, you can use getImageProps though, and peel out the style object if you don't want it.

I've (quickly) tested this today (on 14.2.1) and there doesn't seem to be any visual regression as far as I can see.
However in #45209 (comment) @leerob mentions that the styles are needed for the component to work properly.

Obviously @icyJoseph's solution will omit the style tag, and in #61388 (comment) @sneko's solution seems viable, but do we know if @leerob's claim that they are really necessary is valid? Why are the inline styles added in the first place? If they are needed, what breaks if they are not?

[psztoch]

style="color: transparent" is very bad for Svg with fill="currentColor"!

[Bernardoow]

Help us @leerob!!! .. can you explain why color: transparent is required ?

[icyJoseph]

Help us @leerob!!! .. can you explain why color: transparent is required ?

Some browsers show the alt text, while the image is loading, and that can cause CLS.

• Fix next/future/image alt text #39366

@Bernardoow I added a link to the PR that introduced that

[Bernardoow]

Heeeyy @icyJoseph !!

Thank you !! I'm new with NextJS and with your link I got what I was looking for.

I found where was added the color: transparent [1][2].
My solution is similar to @MathiasGruber solution but I added just an empty string. It worked to NextJS 14.2.4 and the CSP was gone.

<Image style={{color: ''}} />

[1] https://github.com/vercel/next.js/blob/30784418f8a3763273439cfd7bff133203fa8efd/packages/next/src/shared/lib/get-img-props.ts#L608C5-L608C16
[2]

next.js/packages/next/src/client/image-component.tsx

Line 394 in 3078441

const [showAltText, setShowAltText] = useState(false)

[Mithradatis]

@MathiasGruber I just tried your style={{ color: undefined }} workaround, but I can't seem to get it to work. It seems to be just ignored, and I still get style="color: transparent;" in the generated img tag.

Are you sure your workaround works, what can I be doing wrong if so?

This workground only works in client components

[styfle]

Why are the inline styles added in the first place? If they are needed, what breaks if they are not?

Without inline styles, these props won't work:

• placeholder
• fill
• objectFit
• objectPosition
• style

And the alt prop will be visible while loading the image (see PR #39366).

If you're not using any of those props or you don't mind the missing features, you can use getImageProps as suggested above in #45184 (comment)

If you want to submit a PR with a more comprehensive solution, the source code is here:

next.js/packages/next/src/shared/lib/get-img-props.ts

Line 691 in eca4c8d

style: { ...imgStyle, ...placeholderStyle },