如何在 iframe 中允许 Geolocation API？答案

【问题标题】：How do I allow the Geolocation API inside an iframe?如何在 iframe 中允许 Geolocation API？
【发布时间】：2020-10-28 22:26:23
【问题描述】：

我有一个 iframe 标记，其中 src 是不同服务器上的另一个网页。我有能力修改两个站点的标题。在开始实施控制安全策略之前，我可以单击 iframe 内的按钮并检索 GPS 坐标。我相信控制安全策略会阻止我的父站点运行 Geolocation API。

父站点的代码：

<customHeaders>
    <add name="Content-Security-Policy" value="frame-src 'self' https://MyChildSite.com" />
</customHeaders>

<html>
    <iframe src="https://MyChildSite.com" allow="geolocation"></iframe>
</html>

子站点的代码：

<customHeaders>
      <add name="Content-Security-Policy" value="frame-src 'self' https://MyParentSite.com" />
      <add name="Feature-Policy" value="geolocation 'self' https://MyParentSite.com" />
</customHeaders>

<html>
    <button onclick="getCoordinates()">Get GPS</button>
    ...list some stuff
</html>

当我通过父站点单击子站点上的按钮时，我没有从坐标中得到预期的响应。有解决办法吗？

【问题讨论】：

浏览器在 devtools 控制台中记录的确切错误消息和警告是什么？
奇怪的是没有任何错误消息。控制台只是返回 undefined。

标签： iframe geolocation content-security-policy feature-policy

【解决方案1】：

,--------------------- parent https://MyParentSite.com ------------------------,
|Content-Security-Policy: frame-src 'self' https://MyChildSite.com             |
|   * aboved CSP do allow <iframe src="https://MyChildSite.com"                |
|                                                                              |
|                                                                              |
|   <iframe src="https://MyChildSite.com" allow="geolocation">                 |
|                                                                              |
|   ,-------------------- nested https://MyChildSite.com --------------------, |
|   |Content-Security-Policy: frame-src 'self' https://MyChildSite.com       | |
|   |  1. aboved CSP do nothing, it will apply to subnested iframes only     | |
|   |                                                                        | |
|   |  2. allow="geolocation" -> allow="geolocation https://MyChildSite.com" | |
|   |     which is EQUAL to:                                                 | |
|   |    Feature-Policy: geolocation https://MyChildSite.com                 | |
|   |                                                                        | |
|   |  Therefore header:                                                     | |
|   |                                                                        | |
|   |Feature-Policy: geolocation 'self' https://MyParentSite.com             | |
|   |  will failed to allow https://MyParentSite.com, iframe can not extend  | |
|   |  permissions, given by parent document, see para 2. above.             | |
|   |  As result within iframe you will have only:                           | |
|   |     Feature-Policy: geolocation https://MyChildSite.com                | |
|   |                                                                        | |
|   |________________________________________________________________________| |
|                                                                              |
|   </iframe>                                                                  |
!______________________________________________________________________________|

为什么allow="geolocation" -> allow="geolocation https://MyChildSite.com 请参阅Directive in the allow= attribute is specified without keys 将源自src= 属性。
将功能策略权限传递到嵌套浏览上下文中有一些细节。 iframe 不能委派自己（或子嵌套 iframe）比父文档授予的更多权限。
如果你有一个在 iframe 中运行的脚本，你可以使用featurePolicy.getAllowlistForFeature 接口来获取所有允许来源的列表并查看发生了什么。
您的问题与内容安全策略无关，我认为您在浏览器控制台中甚至没有任何 CSP 违规。

解决方案是在allow= 属性中明确指定允许的来源：

<iframe src="https://MyChildSite.com" allow="geolocation 'self' https://MyParentSite.com"></iframe>

您也可以删除allow= 属性（或设置allow='*'）：

<iframe src="https://MyChildSite.com"></iframe>

并在 iframe 中使用 Feature-Policy: geolocation 'self' https://MyParentSite.com 来设置权限。

不要忘记地理定位 API 仅在安全上下文中工作（仅通过 https: 表示）。您可以检查window.isSecureContext 属性以执行适当的诊断。

PS：我能否请您在您的问题中添加“功能政策”标签，这将有助于其他人。

【讨论】：