Open bneigher opened 3 years ago
Same...
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
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='",
},
},
As a work around for the style attributes on
gatsby-announcer
andgatsby-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 totrue
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?
@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.
Love this plugin, went from "what is CSP" to it's working in like 2 hours.
However I only got it working with the insecure directives:
I would like to get it working with the script and style hashes, but it seems that the generated hashes are not correct? When I have these options:
I see an error that implies incorrect hashing:
similar message for styles
Any ideas what I may be doing incorrect? Doesn't work in development nor production.