内容安全策略：Chrome 记录图像资源的连接源错误
Content Security Policy: Chrome logs connect-src error for image resource
我使用以下策略设置内容安全策略（仅限报告）：
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) and the googletagmanager script (https://www.googletagmanager.com/gtag/js) 也会发生同样的情况，两者都会导致 connect-src 出现问题，而不是 font-src 或 script-src。
在 Firefox 和 Safari 中，不会记录任何错误。
更神秘的是，Chrome 不报告错误，它只将它记录到控制台（报告上没有错误痕迹-uri.com).其他（真实的）CSP 错误显示在报告中 - uri.com，因此报告设置没有任何问题。
如果站点上安装了 service worker，它可能会在获取图像、脚本或字体时发挥作用。在这种情况下，使用指令 connect-src 而不是 img/script/font-src 指令。
解决方案是在策略中添加两次 url：一次在 img/script/font-src 指令中，一次在 connect-src 指令中。
我使用以下策略设置内容安全策略（仅限报告）：
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) and the googletagmanager script (https://www.googletagmanager.com/gtag/js) 也会发生同样的情况，两者都会导致 connect-src 出现问题，而不是 font-src 或 script-src。
在 Firefox 和 Safari 中，不会记录任何错误。
更神秘的是，Chrome 不报告错误，它只将它记录到控制台（报告上没有错误痕迹-uri.com).其他（真实的）CSP 错误显示在报告中 - uri.com，因此报告设置没有任何问题。
如果站点上安装了 service worker，它可能会在获取图像、脚本或字体时发挥作用。在这种情况下，使用指令 connect-src 而不是 img/script/font-src 指令。
解决方案是在策略中添加两次 url：一次在 img/script/font-src 指令中，一次在 connect-src 指令中。