Symfony 7集成Symfony UX时外部脚本无法加载问题排查

为什么会出现这个CSP错误？ #

Symfony 7的Security Bundle默认会启用Content-Security-Policy（CSP）防护，即使你没有安装Nelmio Security Bundle。Nelmio CORS Bundle仅负责处理跨域请求的权限，和页面加载外部资源的CSP规则完全无关，所以修改它的配置无法解决问题。

解决步骤 #

1. 定位CSP来源
   打开浏览器开发者工具（F12）→ 切换到「网络」标签，刷新页面后查看任意请求的响应头，确认Content-Security-Policy是由Symfony Security组件发送的。也可以通过Symfony Web Profiler的「Headers」标签验证。

2. 配置Security Bundle的CSP规则
   在config/packages/security.yaml文件中，针对你的防火墙添加CSP指令，允许Font Awesome、Google Fonts等外部资源的域名：

   security:
       firewalls:
           main:
               # 保留你原有的防火墙配置（如authenticator、logout等）
               content_security_policy:
                   directives:
                       # 允许脚本来源：自身域名 + Font Awesome脚本域名 + Google Fonts脚本域名
                       script_src: ['self', 'https://kit.fontawesome.com', 'https://fonts.googleapis.com']
                       # 允许样式来源：自身域名 + Google Fonts样式域名
                       style_src: ['self', 'https://fonts.googleapis.com', 'unsafe-inline']
                       # 允许字体来源：自身域名 + Google Fonts字体域名
                       font_src: ['self', 'https://fonts.gstatic.com']
                       # 若有图片资源需要加载外部，可添加img_src
                       img_src: ['self', 'data:', 'https://*']
   

   注：unsafe-inline在开发环境可以临时使用，生产环境建议通过哈希或nonce方式替代，避免安全风险。

3. 开发环境临时禁用CSP（可选）
   如果你在开发阶段需要快速测试，可临时关闭CSP：

   security:
       firewalls:
           main:
               content_security_policy: false
   

   生产环境请勿使用此配置。

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