为啥 CSP 安全标头会阻止 Iphone 上的谷歌地图？

Posted 2023-02-23

【中文标题】为啥 CSP 安全标头会阻止 Iphone 上的谷歌地图？

【英文标题】：Why CSP security header blocks google maps on Iphone?为什么 CSP 安全标头会阻止 Iphone 上的谷歌地图？

【发布时间】：2020-12-11 21:14:24

【问题描述】：

我有这个标题吗？

标头（“内容安全策略：” . “默认源代码‘无’；” . “script-src 'self' 'nonce- $ nonce' 'strict-dynamic' * 'unsafe-inline' https://maps.gstatic.com https://maps.googleapis.com;” . “style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;” . “img-src‘自我’数据：https://www.google-analytics.com https://im9.cz https://maps.gstatic.com https://maps.googleapis.com https://www .smartsuppchat.com https://widget-v2.smartsuppcdn.com https://twemoji.maxcdn.com https://files.smartsuppcdn.com maps.gstatic.com * .googleapis.com * .ggpht; " . “形式动作‘自我’；” . “base-uri '无';” . “清单-src‘无’；” . “对象源代码‘无’；” . “框架源 https://www.heureka.cz;” . “字体源 https://fonts.googleapis.com https://fonts.gstatic.com;” . “media-src 'self' https://widget-v2.smartsuppcdn.com;” . "connect-src 'self' https://bootstrap.smartsuppchat.com https://widget-v2.smartsuppcdn.com wss: //websocket-visitors.smartsupp.com https://www.google-analytics.com https : //files.smartsupp.com https://maps.gstatic.com https://maps.googleapis.com; " . “框架祖先'自我';”）；

然后是这个 javascript，我在其中加载谷歌地图：

" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDkzPP8cFmN7hV_va8mYdrQOrBlL9VVlwY&callback=initMap" 异步延迟>

我正在解决的问题是它无法在我的 Iphone 上加载地图。它适用于其他任何地方（Windows、android）。开发人员工具 (F12) 不再向我显示任何错误。不幸的是，我没有 Apple，而且 Iphone 也没有显示任何东西（当然没有开发工具）。

有人知道怎么处理吗？

谢谢

'nonce- $ nonce' 所以我发现ios不支持nonce，这是一个问题。因为他不能用它。当我放弃随机数时，它可以工作，但它在支持 CSP3 的浏览器中不起作用。我不知道该怎么办。根据其他讨论，这应该被忽略并应该使用另一个“不安全的内联”规则，但由于某些未知原因它不是。

有人知道怎么处理吗？

【参考方案1】：

有很多不支持 CSP2* 的旧浏览器。您可以添加 'unsafe-inline' 作为后备。较新的浏览器将默认使用'nonce-$nonce'。如果您使用 CSP evaluator* 检查您的政策，他们也会建议您为此添加此项。

参考资料：

*https://caniuse.com/contentsecuritypolicy2

*https://csp-evaluator.withgoogle.com/

【参考方案2】：

'nonce-$nonce' 所以我发现iOS不支持nonce，这是个问题。因为他不能用它。当我放弃随机数时，它可以工作，但它在支持 CSP3 的浏览器中不起作用。我不知道该怎么办。根据其他讨论，这应该被忽略并应该使用另一个“不安全的内联”规则，但由于某些未知原因它不是。

Safari 确实支持'nonce-value'，但支持does not support 'strict-dymanic'。还有 'strict-dynamic' overrides 'unsafe-inline' 和所有基于主机的源。 因此，当您删除 'nonce-value' 时，剩余的 'strict-dynamic' 会取消 'unsafe-inline'、'self' 和 CSP3 兼容浏览器中的所有主机，但不会在 Safari 中取消。 因此，您观察到的效果。删除 'nonce-value' 时必须删除 'strict-dynamic'，它们只能成对使用。

您的 CSP 有一个 lot of errors，但看起来这些应该不会影响 Google 地图的工作。 因此，请检查您的 Iphone 中的Google Map test。可以选择 'nonce-value' 和 'strict-dynamic' 复选框并检查它们的支持。 如果测试正常，您只需要调整您的 CSP。