Issues with gatsby-image

[thomkrupa]

I'm having issues with gatsby-image that generates inline styles.

gatsbyjs/gatsby#10890 (comment)

[thomkrupa]

Unfortunately, it's not a bug and can't be fixed unless the gatsby-image changes its behavior.

Gatsby-image uses inline styles in style attributes (as opposed to inline <style> elements). According to the CSP specification, hashes should apply to inline <style> elements only, not to style attributes.

[k8martian]

I have my image mess up to 20x20 size. I am unsure if this is the cause of that. Any suggestion how to use this with gatsby image?

[thomkrupa]

hey @k8martian, you can add a custom style-src directive with unsafe-inline value, something like:

{
      resolve: `gatsby-plugin-csp`,
      options: {
        directives: {
          "style-src": "'self' 'unsafe-inline'",
        }
      }
}

That should resolve your issue with gatsby-image.

[NWRichmond]

@thomkrupa I'm having issues with that, because a nonce is set in style-src, so 'unsafe-inline' is ignored.

From the browser console:
"Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' <URL> 'sha256-...[TRIMMED] 'sha256-...[TRIMMED]'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

[NWRichmond]

It looks like mergeStyleHashes should be set to false if you want to include unsafe-inline in style-src without having it be ignored due to the presence of a hash value.

{
      resolve: `gatsby-plugin-csp`,
      options: {
        mergeStyleHashes: false, // you can disable styles sha256 hashes
        directives: {
          "style-src": "'self' 'unsafe-inline'",
        }
      }
}

[thomkrupa]

@NWRichmond exactly. I will update readme to make it more clear.

[titenis]

readme still not updated

[skoldborg]

CSP rules are there for a reason, setting "style-src" to "unsafe-inline" is convenient for the developer but bad for the user as it's a possible vector for XSS attacks.

See these references for more info:
https://developers.google.com/web/fundamentals/security/csp#inline-code-considered-harmful
https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#rule-4---css-escape-and-strictly-validate-before-inserting-untrusted-data-into-html-style-property-values

[NWRichmond]

@skoldborg while I agree that the best practice is to have a totally buttoned-up CSP, at the time of this Issue's creation, unsafe-inline was required in order to use gatsby-image:

Unfortunately, it's not a bug and can't be fixed unless the gatsby-image changes its behavior.

Gatsby-image uses inline styles in style attributes (as opposed to inline <style> elements). According to the CS

If you have suggestions for accommodating inline styles in style attributes without unsafe-inline, please share them.

[yesh]

Hi, same here, I'm trying to add CSP to my gatsby project and solved almost all the issues, but the problem comes with gatsby-plugin-image.

afaik this CSP plugin does not look for, and apply hashes to, scripts and styles outside of head, prebody, etc, as noted here.

the possible solution is to make the plugin generate sha256 hashes also for styles and scripts inside the body.

anyone able to create a pr with a fix?
I'd do it myself if I knew how.

cheers!