内容安全政策上的 Google 地图错误

Posted 2023-02-15

【中文标题】内容安全政策上的 Google 地图错误

【英文标题】：Google Maps error on Content Security Policy

【发布时间】：2022-01-18 18:21:20

【问题描述】：

我在加载谷歌地图脚本的布局上有以下行：

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY" async defer></script>

在 web.config 上，启用了内容安全策略，仅允许自己的脚本和 *.googleapis.com

<content-Security-Policy enabled="true">
      <script-src self="true">
        <add source="*.googleapis.com"/>            
      </script-src>
    </content-Security-Policy>

当我打开页面时，谷歌地图插件工作正常。但是我在 javascript 控制台上遇到了这个错误：

js?key=MY_KEY:318 拒绝连接到“https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true”，因为它违反了以下内容安全策略指令：“connect- src 'self'"。

似乎 google 脚本正在加载对另一个脚本的第二次调用。 （那 csp_test=true 是什么意思？？） 即使 gmaps 工作正常，我也想摆脱那个异常，但我无法......有什么帮助吗？

提前致谢！

【参考方案1】：

该脚本尝试将数据发送到 maps.googleapis.com，但这是不允许的，因为您已将 connect-src 限制为仅“self”。您可能需要为此添加修改配置：

<content-Security-Policy enabled="true">
  <script-src self="true">
    <add source="*.googleapis.com"/>            
  </script-src>
  <connect-src self="true">
    <add source="*.googleapis.com"/>            
  </connect-src>
</content-Security-Policy>

您还可以对子域 (maps.googleapis.com) 进行更多限制，或者改用 default-src 指令。

【讨论】：

就是这样！非常简单的解决方案 :_) 非常感谢