Safari浏览器中HERE Maps的CSP错误：无法加载Blob资源

核心问题分析 #

Safari对CSP的处理存在特殊限制，尤其是通过<meta>标签配置CSP时，部分指令支持有限；如果服务器同时返回了HTTP头级别的CSP，meta标签的配置会被完全覆盖——这很可能是你用宽松配置仍无法解决问题的核心原因。

具体解决步骤 #

1. 检查是否存在HTTP头CSP覆盖
   打开Safari开发者工具的「网络」面板，查看页面主请求的响应头，确认是否有Content-Security-Policy或Content-Security-Policy-Report-Only头。如果存在，优先调整这个HTTP头的配置，因为HTTP头CSP优先级高于meta标签配置。

2. 调整CSP指令，适配Safari的Blob处理
   HERE Maps会通过Blob加载地图瓦片、动态脚本或样式，Safari要求在对应指令中明确声明blob:，仅依赖通配符*无法生效。以下是针对HERE Maps的最小可行CSP配置（建议通过HTTP头配置）：

   Content-Security-Policy: 
     default-src 'self' *.hereapi.com *.here.com;
     script-src 'self' *.hereapi.com *.here.com blob: 'unsafe-inline' 'unsafe-eval';
     img-src 'self' *.hereapi.com *.here.com blob: data:;
     style-src 'self' *.hereapi.com *.here.com 'unsafe-inline';
     connect-src 'self' *.hereapi.com *.here.com wss://*.hereapi.com;
     worker-src 'self' blob:;
     child-src 'self' blob:;
   

   关键说明：

   • 明确允许HERE Maps的官方域名，减少通配符带来的安全风险
   • 在script-src、img-src、worker-src、child-src中单独添加blob:规则
   • 保留unsafe-inline和unsafe-eval是因为HERE SDK依赖动态代码生成，暂时无法完全移除

3. 放弃用<meta>标签配置CSP
   Safari对meta标签的CSP支持存在局限性，比如worker-src、frame-ancestors等指令在meta配置中可能不生效，Blob资源的拦截规则在HTTP头CSP中更易被正确解析。

4. 精准定位违规指令
   仔细查看Safari控制台的CSP报错信息，确认被拦截的Blob属于哪个指令（如img-src或script-src），针对性补充规则，不要盲目使用通配符。

额外排查点 #

• 确认Safari版本：旧版Safari（14.x及以下）对CSP的Blob支持更严格，建议升级到最新稳定版
• 检查浏览器扩展：部分广告拦截器、隐私扩展会额外添加CSP规则，干扰页面正常加载

内容的提问来源于stack exchange，提问作者Igor P.