添加内容安全策略(CSP)后Vimeo播放器无法正常工作求助

问题现状 #

未配置CSP时Vimeo播放器可正常运行，添加CSP后播放器停止工作，当前配置的script-src规则如下：

$response->headers->set('Content-Security-Policy', "script-src 'self' 'unsafe-inline'  https://vimeo.com https://www.gstatic.com https://player.vimeo.com/api/player.js");

问题分析 #

Vimeo播放器的正常运行不仅需要脚本加载权限，还依赖iframe嵌入、媒体资源加载、API连接等多种资源权限，当前CSP规则缺少这些必要配置。

修正后的CSP配置 #

更新CSP规则，补充多类资源的允许源，确保播放器全链路资源可正常加载：

$response->headers->set('Content-Security-Policy', "
    script-src 'self' 'unsafe-inline' https://player.vimeo.com https://www.gstatic.com;
    frame-src https://player.vimeo.com;
    img-src 'self' https://i.vimeocdn.com https://p.vimeocdn.com;
    media-src https://player.vimeo.com;
    connect-src https://player.vimeo.com https://api.vimeo.com
");

配置说明 #

• script-src：放宽对player.vimeo.com域的脚本权限（而非仅指定单个JS文件），确保播放器可加载所有关联脚本
• frame-src：允许页面嵌入Vimeo播放器的iframe
• img-src：允许加载Vimeo的视频封面、图标等图片资源
• media-src：允许加载Vimeo的视频媒体文件
• connect-src：允许播放器与Vimeo的API服务建立网络连接

如果仍出现报错，可临时将'unsafe-eval'添加到script-src中（部分Vimeo播放器版本依赖该权限），但建议优先确认是否真有必要，避免过度放宽安全限制。

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