在 Ionic Cordova App 中,iframe 中跨源内容的外部超链接在 Android 上有效,但在 iOS 上无效

In Ionic Cordova App, external hyperlinks in cross origin contents in an iframe, work on Android but do not function on iOS

我有一个 ionic 5 Cordova 9 应用程序需要以下行为:

  1. 它应该加载由跨源 Web 服务提供的图像横幅,显然在 iframe 中,在此应用程序中。
  2. 图像横幅有超链接,点击后系统浏览器应转到另一个交叉来源的网页。

上面的代码在 Android 上运行得很好,config.xml 和 index.html 由 ionic & Cordova CLI 自动生成。当我将代码携带到 iOS 时,我必须同时更改 config.xml 和 index.html 才能获取 iframe 中的内容: 更改后,Config.xml 具有这些相关条目

<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

我在 index.html

中添加了以下内容
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; child-src *">

经过上述更改后,我在 iframe 中获得了横幅,但是当我点击横幅时没有任何反应。 Safari 显示没有生成网络请求。 如前所述,我无法控制 iframe 的内容,因此无法使用 InAppBrowser 或类似的解决方案。

我还尝试卸载 cordova-plugin-whitelist,因为 iOS 不需要它,但这没有任何区别。 现在我不担心加强安全。我想让它先工作。我研究了 Cordova whitelisting guide 并浏览了 Stack overflow 上的每个相关问题,但没有找到任何解决方案。求高手指点。

除了iframe中的超链接之外,我还直接在页面上创建了超链接。经过多次观察,我可以将 <allow-navigation> 隔离为 config.xml 的标签,这对这个问题产生了影响。

当我从 config.xml 中删除 <allow-navigation href="*" /> 标记时,页面上的超链接有效但 iframe 内容未填充。

当我带回 <allow-navigation href="*" /> 标签时,iframe 现已填充,但来自页面和 iframe 的超链接不起作用。

这暗示我需要中间的东西。

然后我将标签更改为此 <allow-navigation href="*://*.iframeContentDomain.com/*" /> 并恢复了 iframe 内容和来自页面和 iframe 的工作超链接。