next/image - XSS concern with content-security-policy

[barrymay]

Describe the feature you'd like to request

When researching how to implement a proper img-src setting for an XSS-protective content-security-policy, a raised concern is to avoid putting "data:" in your img-src setting. (see the scheme-source entry at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src)

With all the benefits of using the next/image component, I'm wondering if there's an alternative to the embedded src="data:image/svg+xml..." node that's added with the image.

Example of the inject code here:

<div style="box-sizing:border-box;display:block;max-width:100%">
  <img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE1IiBoZWlnaHQ9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg==">
</div>

(For clarity this concern is with next.js 10 and 11 - great job all around, keep up the amazing work!)

Describe the solution you'd like

A way to allow use next/image while avoiding the data: img-src override.

I'm certainly open to hearing why the MDN concern may be overblown as well (I've also noted a great many popular websites have this img-src data: setting applied to their CSP's)

Describe alternatives you've considered

The only (very obvious) alternative I can use is to avoid the next/image tag altogether and use a straight img tag.

[ShuPink]

Hmm I was also hoping to find some guidance on whether it was okay to add data: to img-src, or if there was a way to get around this empty placeholder gif.

But I guess if anyone else stumbles across this thread, this is what guidance I could find on this:
https://security.stackexchange.com/questions/94993/is-including-the-data-scheme-in-your-content-security-policy-safe

I also tried just blocking it with my csp to see what happened, and my images seemed to load okay, (disclaimer: I'm not recommending this, I'm not sure of the implications) but obviously you do also get spammed with errors in the console as a consequence.

[BrianHHough]

Sharing in case this is helpful - I'm currently considering using SVGs exported as TSX components instead of the next/image Image component.

Spent a good amount of time trying to see how to remove the inline-styles from the next/image Image component but it doesn't seem to be possible.

There are several tools I've used for converting images to SVGs:

• Figma (free)
• Canva
• Photoshop
• Illustrator

Sharing in case this helps anyone in the meantime.

@leerob - is there any chance the next/image Image component could have a prop to disable inline-styles? I love the next/image Image component but the fact I can't render these Image components without needing unsafe-inline means I can't ship with that unfortunately. Love building with Next.js though - you all have crushed this framework!!