Incorrect hashes being generated for styles and src? about gatsby-plugin-csp

[arielperez82]

Tracked it down to these two divs Gatsby wraps the body with:
<div style="outline: none;" tabindex="-1" id="gatsby-focus-wrapper">
and
<div id="gatsby-announcer" style="position: absolute; top: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;" aria-live="assertive" aria-atomic="true"></div>

If you calculate the sha-256 for those two styles, you'll see they match the ones in the browser error i.e. xEAI9+h/o3bZk3pUT7XDH9K7x5IOvG0FbJpal6UC/m8= and g6+1wt4NLfWDgcHpASzi98yBTZMT5MvrI31KNOqoXC4=, respectively.

This plugin only calculates the sha-256 on <style> or <script> tags found in the head, pre-body, or post-body. It doesn't look for any in the body and also doesn't look for either inline style attributes or inline event handlers.

Most likely the same issue as #14 and #16

[MHarmony]

Same...

[niklasnordlund]

As a work around for the style attributes on gatsby-announcer and gatsby-focus-wrapper you can add a style-src config like this:
'style-src': "'self' 'unsafe-hashes' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI='"

(unsafe-hashes option is required in some browsers to make it work for style attributes)

Note that if a future Gatsby update changes the style attribute on these divs these hashes would need to be updated again.

Also make sure you have mergeStyleHashes set to true for this to work.

Full example:

{
  resolve: 'gatsby-plugin-csp',
  options: {
    disableOnDev: true,
    mergeStyleHashes: true,
    mergeDefaultDirectives: true,
    directives: {
      'style-src':
        // hashes for #gatsby-focus-wrapper and #gatsby-announcer style attribute
        "'self' 'unsafe-hashes' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI='",
    },
},

[potatowave]

As a work around for the style attributes on gatsby-announcer and gatsby-focus-wrapper you can add a style-src config like this: 'style-src': "'self' 'unsafe-hashes' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI='"

(unsafe-hashes option is required in some browsers to make it work for style attributes)

Note that if a future Gatsby update changes the style attribute on these divs these hashes would need to be updated again.

Also make sure you have mergeStyleHashes set to true for this to work.

Full example:

{
  resolve: 'gatsby-plugin-csp',
  options: {
    disableOnDev: true,
    mergeStyleHashes: true,
    mergeDefaultDirectives: true,
    directives: {
      'style-src':
        // hashes for #gatsby-focus-wrapper and #gatsby-announcer style attribute
        "'self' 'unsafe-hashes' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI='",
    },
},

I'm not clear on where this sha key should come from?

[bneigher]

@potatowave check the console CSP error/warning in the browser after a deployment and it will say hash was provided but was expected. Then just change it to <2>. That's how I did it.

In my case it looked like this:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: 'sha256-VQmEp0Z3hhXpgyR8eLC7h/m/fuPoIu20hDeWkLfFJt8='". Either the 'unsafe-inline' keyword, a hash ('sha256-rstJb4fHq3envUwqc55dL7f2YwhXthb/y9glQxrlm+Y='), or a nonce ('nonce-...') is required to enable inline execution.