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

Posted 2023-02-19

【中文标题】内容安全政策：Chrome 记录图像资源的 connect-src 错误

【英文标题】：Content Security Policy: Chrome logs connect-src error for image resource

【发布时间】：2021-10-25 10:56:47

【问题描述】：

我使用以下策略设置了内容安全策略（仅限报告）：

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 在 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 上，因此报告设置没有任何问题。

【参考方案1】：

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

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