Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'

Question

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?

Answer 1

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:

• It is an inline script attribute like an event handler, not a script tag. If it is an attribute like "onchange" or "onload" you'll have to rewrite this with an event listener instead.
• It is a dynamic script where the script content changes. You'll either have to get a hash of the actual script, use a nonce, or find some other way of implementing like reading a value from an element instead.