如何允许 iframe 中的地理位置 API?
How do I allow the Geolocation API inside an iframe?
我有一个 iframe 标记,其 src 是不同服务器上的另一个网页。我有能力修改两个站点的 headers。在开始实施控制安全策略之前,我能够单击 iframe 内的按钮并检索 GPS 坐标。我相信有关控制安全策略的某些内容正在阻止我的 parent 站点从 运行 地理定位 API.
Parent 站点代码:
<customHeaders>
<add name="Content-Security-Policy" value="frame-src 'self' https://MyChildSite.com" />
</customHeaders>
<html>
<iframe src="https://MyChildSite.com" allow="geolocation"></iframe>
</html>
Child 站点代码:
<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>
当我通过 parent 站点单击 child 站点上的按钮时,我没有从坐标中得到我期望的响应。
有解决办法吗?
,--------------------- 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: 我可以请你在你的问题中添加 `feature policy` 标签吗,这将在将来帮助其他人。
编辑
allow="*"
不再有效,但必须按照 allow="geolocation *"
提及
我有一个 iframe 标记,其 src 是不同服务器上的另一个网页。我有能力修改两个站点的 headers。在开始实施控制安全策略之前,我能够单击 iframe 内的按钮并检索 GPS 坐标。我相信有关控制安全策略的某些内容正在阻止我的 parent 站点从 运行 地理定位 API.
Parent 站点代码:
<customHeaders>
<add name="Content-Security-Policy" value="frame-src 'self' https://MyChildSite.com" />
</customHeaders>
<html>
<iframe src="https://MyChildSite.com" allow="geolocation"></iframe>
</html>
Child 站点代码:
<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>
当我通过 parent 站点单击 child 站点上的按钮时,我没有从坐标中得到我期望的响应。 有解决办法吗?
,--------------------- 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: 我可以请你在你的问题中添加 `feature policy` 标签吗,这将在将来帮助其他人。
编辑
allow="*"
不再有效,但必须按照 allow="geolocation *"