添加CSP meta标签出现更多内容安全策略报错如何解决？

现有配置的核心错误 #

• 你设置了两个独立的CSP meta标签，CSP规则的特性是多标签限制会取交集而非合并，只要任意一个标签不允许的资源都会被拦截，这是你添加配置后报错更多的核心原因。
• CSP指令存在语法错误，第二个配置里style-src 'self' 'unsafe-inline' script-src *漏写分号，把script-src指令错误写到了style-src的取值范围内，导致script-src规则完全不生效。
• 资源地址语法不规范，第一个配置里的https:*//api.mapbox.com写法错误，合法的通配符写法为https://*.mapbox.com或者直接写完整允许的域名。
• 存在无效的资源协议声明，data:gap为错误写法，若要同时允许data协议和gap协议，正确写法为data: gap:。

正确配置示例 #

将所有规则合并到单个meta标签中即可，示例如下（可根据你的实际业务资源调整允许的域名）：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' https://api.mapbox.com; style-src 'self' 'unsafe-inline'; media-src *; font-src *; connect-src * ws:; img-src 'self' data: content:;">

补充说明 #

• 生产环境不建议直接用*通配符允许所有来源的资源，建议按需添加明确的允许域名，降低安全风险。
• 若后续需要接入其他第三方脚本，把对应第三方的域名添加到script-src的取值列表里即可。
• 'unsafe-inline'和'unsafe-eval'会降低CSP的安全防护能力，如果条件允许建议用nonce或者哈希校验的方式替代这两个配置。

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