Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with gatsby-image #3

Open
thomkrupa opened this issue Mar 5, 2019 · 6 comments
Open

Issues with gatsby-image #3

thomkrupa opened this issue Mar 5, 2019 · 6 comments
Assignees

Comments

@thomkrupa
Copy link
Member

@thomkrupa thomkrupa commented Mar 5, 2019

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

gatsbyjs/gatsby#10890 (comment)

@thomkrupa thomkrupa added the bug label Mar 5, 2019
@thomkrupa thomkrupa self-assigned this Mar 5, 2019
@thomkrupa

This comment has been minimized.

Copy link
Member Author

@thomkrupa thomkrupa commented Mar 16, 2019

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.

@thomkrupa thomkrupa added help wanted question and removed bug labels May 22, 2019
@k8martian

This comment has been minimized.

Copy link

@k8martian k8martian commented Aug 7, 2019

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

This comment has been minimized.

Copy link
Member Author

@thomkrupa thomkrupa commented Aug 8, 2019

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

This comment has been minimized.

Copy link

@NWRichmond NWRichmond commented Aug 11, 2019

@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

This comment has been minimized.

Copy link

@NWRichmond NWRichmond commented Aug 13, 2019

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

This comment has been minimized.

Copy link
Member Author

@thomkrupa thomkrupa commented Aug 14, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.