Angular13集成@googlemaps/js-api-loader触发CSP报错如何解决

核心问题定位 #

你遇到的报错本质是当前生效的CSP规则里，script-src 仅配置了 'self'，你写在meta标签里的maps.googleapis.com规则完全没有生效，和代码逻辑、谷歌地图依赖版本无关。

排查步骤 #

• 优先检查后端/反向代理的CSP响应头配置
  CSP规则存在明确优先级：HTTP响应头下发的CSP优先级高于HTML meta标签配置，若两者同时存在，浏览器会执行最严格的交集规则。你当前报错提示生效的script-src只有'self'，大概率是Node.js服务、前置Nginx层已经默认下发了仅含'self'的CSP响应头，直接覆盖了meta标签的配置。
  排查操作：打开浏览器开发者工具-网络面板，找到页面主文档请求，查看响应头中Content-Security-Policy字段值，若存在仅含'self'的script-src规则，直接修改服务端CSP配置，和前端meta规则对齐，避免重复下发CSP。
• 修正现有CSP规则的写法错误
  你当前写的meta标签存在3处会导致规则失效的问题：
  1. 脚本源未加HTTPS协议前缀：maps.googleapis.com属于无协议源，部分浏览器会判定为无效源，无法匹配https://maps.googleapis.com的请求，同时谷歌地图加载时还会拉取maps.gstatic.com下的脚本，需要一并加入script-src白名单
  2. 重复定义样式相关指令：重复写style-src、style-src-elem会导致后加载的规则覆盖前面的规则，引发配置不生效
  3. 源地址写法不规范：font-src配置的https://fonts.gstatic.com/末尾多余斜杠，且'unsafe-inline'对font-src是无效配置，会被浏览器直接忽略
• 清除缓存验证生效
  修改配置后重启前后端服务，使用Ctrl+Shift+R硬刷新浏览器清除静态资源缓存，再验证地图加载状态。如果仍存在报错，再检查Angular构建配置（angular.json中是否有内置的CSP注入规则）、浏览器安全类插件是否拦截了请求。

修正后可用的CSP meta配置参考 #

<meta http-equiv="Content-Security-Policy"
 content="script-src 'self' https://maps.googleapis.com https://maps.gstatic.com;
          img-src 'self' data: https://maps.gstatic.com https://*.googleapis.com https://*.ggpht.com;
          font-src 'self' https://fonts.gstatic.com data:;
          style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
          connect-src 'self' https://maps.googleapis.com https://maps.gstatic.com;
        />

注：配置中新增的connect-src规则是为了允许谷歌地图初始化时发起的接口请求，避免后续触发XHR/fetch类的CSP报错。

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