内联脚本违反CSP的script-src指令无法执行该如何解决？

你遇到的是CSP（内容安全策略）禁止内联脚本执行的典型报错，目前有4种可行解决方案，按推荐优先级排序如下：

• 方案1（推荐，无需修改前端代码）：将报错提示中给出的内联脚本哈希值'sha256-AchpXWJVta1Kal3dZ49Zq4Or0DgNsfAgebn6LioP0Zo='添加到你站点CSP配置的script-src指令末尾即可。该方案适合内联脚本内容固定不会频繁修改的场景，安全等级高。
• 方案2（最安全，无需修改CSP配置）：把页面里的内联Calendar.setup代码单独抽成一个独立的JS文件，比如命名为calendar-init.js，再在页面通过<script src="calendar-init.js"></script>引入即可。你当前的CSP已经配置了'self'规则，同域名下的外部脚本默认允许执行，不需要调整CSP规则，安全等级最高。
• 方案3（适合内联脚本动态变化场景）：使用nonce机制，服务端每次生成一个唯一的随机字符串，将'nonce-<随机串>'添加到CSP的script-src指令中，同时给页面内联的script标签添加nonce属性：

<script type="text/javascript" nonce="<你生成的随机串>">
  Calendar.setup({
    inputField  : "element_10_3",
    baseField   : "element_10",
    displayArea : "calendar_10",
    button      : "cal_date",
    ifFormat    : "%B %e, %Y",
    onSelect    : selectDate
  });
</script>

该方案安全等级高，适配动态内联脚本的场景。

• 方案4（不推荐，仅适合临时测试）：将'unsafe-inline'关键字添加到CSP的script-src指令中，该配置会放开所有内联脚本的执行限制，大幅降低站点的安全防护能力，正式环境禁止使用。

内容的提问来源于stack exchange，提问作者Chirag Patel