Gatsby，拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'

Question

这是我的 gatsby-plugin-csp 配置：

    {
      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'",
        },
      },
    },

当我运行 Gatsby V5 版本时，我在控制台中收到此错误：

不使用 unsafe-eval 修复此错误的最佳方法是什么？

Answer 1

首先，您提供的错误消息根本没有提到 eval，因此从提供的信息来看，您似乎不需要出于任何原因添加“unsafe-eval”。

错误消息表明有一个内联脚本违反了您的策略。看起来 Gatsby 确实会自动将哈希值添加到 script-src 中，但该脚本不包含在其中。单击错误中提供的代码链接可能会帮助您确定问题所在，但最可能的解释是：

• 它是一个内联脚本属性，如事件处理程序，而不是脚本标签。如果它是像“onchange”或“onload”这样的属性，则必须使用事件侦听器重写它。
• 它是一个动态脚本，脚本内容会发生变化。您要么必须获取实际脚本的哈希值，使用随机数，要么找到其他一些实现方式，例如从元素读取值。