google-chrome - 内容安全策略 : Chrome logs connect-src error for image resource

Question

我使用以下策略设置内容安全策略(仅报告):

report-uri https://my-company.report-uri.com/r/d/csp/reportOnly?ngsw-bypass=true; default-src 'self'; script-src 'self' https://www.googletagmanager.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://www.google-analytics.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://s.gravatar.com;

在 Chrome 开发控制台中，记录了以下错误:

[Report Only] Refused to connect to'https://s.gravatar.com/avatar/0346e37b7fed8cb32404a71dca932fdf?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Ffa.png'because it violates the following Content Security Policy directive:"connect-src 'self' https://www.google-analytics.com".

如您所见，请求的资源是一个图像，其 URL 已在 CSP 策略的 img-src 指令中列入白名单。但是，Chrome 报告该错误违反了 connect-src 指令。我不明白为什么当资源显然是图像时，会评估 connect-src 指令而不是 img-src。

同样的情况也发生在字体 ( https://fonts.gstatic.com ) 和 googletagmanager 脚本 ( https://www.googletagmanager.com/gtag/js ) 上，两者都会导致 connect-src 出现问题，而不是 font-src 或 script-src。

在 Firefox 和 Safari 中，不会记录任何错误。

更神秘的是，Chrome 不会报告错误，它仅将其记录到控制台(report-uri.com 上没有任何错误痕迹)。其他(真实的)CSP 错误显示在 report-uri.com 上，因此报告设置没有任何问题。

Answer 1

如果站点上安装了 Service Worker，它可能会在获取图像、脚本或字体时发挥作用。在这种情况下，使用指令 connect-src 而不是 img/script/font-src 指令。

解决方案是在策略中添加两次 url:一次在 img/script/font-src 指令中，一次在 connect-src 指令中。