在移动应用程序中嵌入具有 CSP 2.0 的 Iframe：“frame-ancestors”问题答案

【问题标题】：Embedding an Iframe having CSP 2.0 in a mobile app: "frame-ancestors" issue在移动应用程序中嵌入具有 CSP 2.0 的 Iframe：“frame-ancestors”问题
【发布时间】：2017-12-10 23:38:42
【问题描述】：

使用 Ionic 框架构建一个混合应用程序，我需要在我的一个页面中嵌入一个 iframe。我的问题是使用 iframe 加载的页面确实具有以下 CSP：

"frame-ancestors http://foo.somedomain.com"

这在我的浏览器上运行良好。但是，每当我在应用程序本身上尝试此操作时，内容都不会加载，原因是：

拒绝在框架中显示“http://foo.somedomain.com”，因为祖先违反以下内容安全策略指令 “框架祖先 http://*.somedomain.com”

这是有道理的，因为应用请求没有域。

所以我的问题很简单：

如何识别我的应用（iOS 和 Android）以通过 frame-ancestors CSP？

我看到我可以将很多东西传递给那个框架祖先：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors，但我不知道如何验证请求来自移动应用程序。

【问题讨论】：

你找到解决办法了吗？
不....找不到...不得不继续前进。
Mozilla docs 建议主机源可以是名称或 IP 地址，因此通过 IP 地址识别应用程序可能是一种解决方案。至少如果 IP 地址是静态的...

标签： cordova iframe ionic-framework content-security-policy

【解决方案1】：

在 android 上，您可以按照https://github.com/ionic-team/cordova-plugin-ionic-webview 的步骤指定要使用的自定义域和方案。即：

<preference name="Hostname" value="app" />

<preference name="Scheme" value="https" />

问题在于 Ionic 在 iOS 上使用网络服务器。仍在努力解决这个问题。

【讨论】：

【解决方案2】：

如果您控制域的 Web 服务器，并且您可以仅为 ionic 请求设置 cookie（例如当您登录网站时），那么您可以选择通过检测设置的 cookie 来排除来自 ionic 的请求的 CSP：

对于 Apache：

SetEnvIf Cookie "ionic_cookie=1" is_ionic
Header always set Content-Security-Policy "frame-ancestors http://foo.somedomain.com" env=!is_ionic

【讨论】：