内容安全策略：Chrome 记录图像资源的 connect-src 错误

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 开发控制台中，记录以下错误：

[仅限报告] 拒绝连接到“https://s.gravatar.com/avatar/0346e37b7fed8cb32404a71dca932fdf?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Ffa.png”，因为它违反了规定以下内容安全策略指令：“connect-src 'self' https://www.google-analytics.com”。

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

字体 ( https://fonts.gstatic.com ) 和 googletagmanager 脚本 ( https://www.googletagmanager.com/gtag/jsconnect-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 指令中。