This is my gatsby-plugin-csp config:
{
resolve: `gatsby-plugin-csp`,
options: {
disableOnDev: true,
reportOnly: false, // Changes header to Content-Security-Policy-Report-Only for csp testing purposes
mergeStyleHashes: false, // you can disable styles sha256 hashes
mergeScriptHashes: true, // you can disable scripts sha256 hashes
mergeDefaultDirectives: true,
directives: {
'default-src': "'self'",
'style-src': "'self' https://fonts.googleapis.com https://optimize.google.com 'unsafe-inline'",
'script-src': `'self' https://static.cdn.prismic.io/prismic.js https://widget.surveymonkey.com https://static.ads-twitter.com https://www.youtube.com https://assets.customer.io https://cdn.segment.io https://connect.facebook.net https://googleads.g.doubleclick.net https://maps.googleapis.com https://posthog.datascience.hmb.sh https://snap.licdn.com https://static.cdn.prismic.io https://edge.fullstory.com https://prismic.io https://vercel.live https://www.google-analytics.com https://vercel.live/ https://www.googleadservices.com https://www.redditstatic.com https://www.googletagmanager.com https://hmbradley.featurebase.app https://assets.vercel.com https://www.googleoptimize.com`,
'object-src': "'none'",
'base-uri': "'self'",
'connect-src': `'self' https://*.hmbradley.com ...`,
'font-src': "'self' data: https://fonts.gstatic.com",
'frame-src': `'self' https://www.surveymonkey.com ...`,
'img-src': `'self' data: https://t.co https://analytics.twitter.com ...`,
'manifest-src': "'self'",
'media-src': "'self' https://wubrfk.cloudfront.net",
'worker-src': "'none'",
},
},
},
when I am running my Gatsby V5 build I get this error in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://static.cdn.prismic.io/prismic.js https://widget.surveymonkey.com https://static.ads-twitter.com https://www.youtube.com https://d33wubrfki0l68.cloudfront.net https://assets.customer.io https://cdn.segment.io https://connect.facebook.net https://googleads.g.doubleclick.net https://maps.googleapis.com https://posthog.datascience.hmb.sh https://snap.licdn.com https://static.cdn.prismic.io https://edge.fullstory.com https://prismic.io https://vercel.live https://www.google-analytics.com https://vercel.live/ https://www.googleadservices.com https://www.redditstatic.com https://www.googletagmanager.com https://hmbradley.featurebase.app https://assets.vercel.com https://www.googleoptimize.com 'sha256-bCZ0zz9wfiY2bxHGobkRfWBChUplcZk53St0Wuqtv9A=' 'sha256-ZqOcy6JL4KtVNFs/iMgy9jOCevwMuuEE9+NpO4WYh9A=' 'sha256-U7dY4FVGGEFL4ZtQn2xJPPjejms0kRyTKOiuSrx3bmQ=' 'sha256-RkfVz9+kg/tSpafnLk6K3tkj2RUiFpyHlvF5YPBPGwA=' 'sha256-RtX8Hy3LRhJPIHRSxb+KGY6AN0stjq9/o515KjKnFmc=' 'sha256-v1oYH69RcooFs6F5XhMTzHiWlftYwnuQHDxIz0suNeo=' 'sha256-E0Dik1O/52lriwuBY1EUow03Mm8//3L0B2GDkyfutoA=' 'sha256-hbR1RFBnS2Fts3BAROZCNfPKOxT4xqWBezrtFbG2W00='". Either the 'unsafe-inline' keyword, a hash ('sha256-QwQbfeHqkRlzqa0kE/D0dycwgrORiSsL0zezNNSbgPE='), or a nonce ('nonce-...') is required to enable inline execution.
The error leads to this script, this is a Gatsby and Webpack scripts and I don't know how I can add a nonce to it:
<script id="gatsby-chunk-mapping">
window.___chunkMapping = "{\"app\":[\"/app-a55898d960b9565a05a9.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-b04285fef9a32869b906.js\"],\"component---src-pages-ad-tsx\":[\"/component---src-pages-ad-tsx-d9d0dcc8a3b738f40d74.js\"],\"component---src-pages-atm-tsx\":[\"/component---src-pages-atm-tsx-2cefab49d4116e9ea360.js\"],\"component---src-pages-blog-tsx\":[\"/component---src-pages-blog-tsx-7adc690a44cf3ceb02a9.js\"],\"component---src-pages-founder-tsx\":[\"/component---src-pages-founder-tsx-c422f7e43bb08c81d61b.js\"],\"component---src-pages-index-tsx\":[],\"component---src-pages-more-money-tsx\":[\"/component---src-pages-more-money-tsx-2347e4fca3c655b12164.js\"],\"component---src-pages-preview-tsx\":[\"/component---src-pages-preview-tsx-32c0aaeb781c6fe47a6a.js\"],\"component---src-pages-privacy-policies-tsx\":[\"/component---src-pages-privacy-policies-tsx-0451e3aa45330ef53798.js\"],\"component---src-pages-products-save-more-tsx\":[\"/component---src-pages-products-save-more-tsx-c280ce664f4c00a34ec2.js\"],\"component---src-pages-products-spend-wisely-tsx\":[\"/component---src-pages-products-spend-wisely-tsx-95be67b88e9d10a69f6c.js\"],\"component---src-pages-referrals-tsx\":[\"/component---src-pages-referrals-tsx-3ea72e453fc42d7fe8c3.js\"],\"component---src-pages-routines-ideas-tsx\":[\"/component---src-pages-routines-ideas-tsx-628b5ffb07fe8772b4e8.js\"],\"component---src-pages-routines-index-tsx\":[\"/component---src-pages-routines-index-tsx-c5cde077b9dc044485e5.js\"],\"component---src-pages-routines-listing-tsx\":[\"/component---src-pages-routines-listing-tsx-cb9a03870ed04081270a.js\"],\"component---src-pages-security-tsx\":[\"/component---src-pages-security-tsx-7e37bd9debd1ab04de8e.js\"],\"component---src-templates-post-page-template-index-tsx\":[\"/component---src-templates-post-page-template-index-tsx-e7b59c00a411b1f803d5.js\"],\"component---src-templates-routine-template-index-tsx\":[\"/component---src-templates-routine-template-index-tsx-fec0f5b3c78fcef5c7fd.js\"],\"component---src-templates-system-pages-index-tsx\":[\"/component---src-templates-system-pages-index-tsx-ee67f40e9359ad36c214.js\"]}";
</script>
<script>
window.___webpackCompilationHash = "08c026389e67499562ec";
</script>
What is the best way to fix this error without using unsafe-eval?
First of all the error message you have provided doesn't mention eval at all, so from the info provided it doesn't seem like you need to add 'unsafe-eval' for any reason.
The error message says that there is an inline script violating your policy. It seems like Gatsby does add hashes automatically to script-src, but that one script is not covered by this. Clicking on the code link provided in the error might help you determine what the problem is, but the most likely explanations are: