Chrome判定图片等资源违反CSP connect-src规则问题咨询

问题成因 #

这是Chrome浏览器针对Service Worker代理请求的已知识别bug：

• 当站点部署了Service Worker（从你配置的ngsw-bypass参数判断为Angular Service Worker）代理静态资源请求时，Chrome会错误将所有被Service Worker转发的请求统一归类为connect类型请求，而非资源原本的img、script、font类型，因此会触发connect-src规则校验而非对应资源类型的CSP指令校验。
• 该报错仅为控制台误报，不属于实际的CSP规则违规，因此不会触发你配置的report-uri上报逻辑，Firefox、Safari对Service Worker代理的资源类型识别逻辑正确，因此不会出现该报错。

解决方案 #

可根据你的实际场景选择以下任意一种方案：

1. 临时消弭报错：将触发误报的域名补充到connect-src白名单中，修改后的CSP规则示例如下：

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 https://s.gravatar.com https://fonts.gstatic.com https://www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://s.gravatar.com;

2. 根本解决：调整Service Worker配置，将跨域静态资源标记为无需Service Worker代理，Chrome即可正确识别资源类型，匹配对应CSP指令。如果使用Angular Service Worker，可在ngsw-config.json的assetGroups中配置对应域名资源的代理规则，添加"cache": "opaque"标记或者直接排除对应路径的代理。

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