React应用因CSP限制导致vsc模块图标无法显示求助

问题根源 #

你的CSP配置末尾存在语法错误（多余的;4），导致浏览器无法正确解析整个CSP规则，只能回退使用default-src 'self'作为默认策略。而default-src未允许data:类型的资源加载，因此拦截了渐变样式中引用的data:image/svg+xml资源。

修复步骤 #

1. 修正CSP配置的语法错误
   移除配置末尾无效的;4，确保规则解析正常。修正后的完整CSP配置如下：

   default-src 'self'; style-src 'self' 'unsafe-inline' data:; font-src https://static.skyassets.com data:; frame-ancestors 'none'; img-src 'self' data:; object-src 'self' data:;
   

2. 验证关键规则是否生效
   你的配置中已经包含以下必要规则，修正语法后它们会正常生效：

   • style-src 'self' 'unsafe-inline' data:：允许样式表使用内联样式和data:类型的资源引用
   • img-src 'self' data:：允许加载data:类型的图片/SVG资源

额外说明 #

如果修正后仍存在问题，可以检查：

• 确认React应用的CSP配置是否正确注入到页面的<meta>标签或HTTP响应头中
• 清除浏览器缓存，确保新的CSP规则被加载

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