Search code examples
ioscordovaionic-frameworkiframewhitelist

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

I have an ionic 5 Cordova 9 app that requires following behavior:

  1. It should load image banners served by a cross origin web service, obviously inside an iframe, in this app.
  2. The image banner has hyperlink and once clicked the system browser should go to that webpage which is another cross origin.

The above works perfectly fine on Android with the config.xml and index.html auto-generated by ionic & Cordova CLI. When I carried the code to iOS, I had to make changes to both config.xml and index.html to get the contents in the iframe: After the changes, Config.xml has these relevant entries

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

I added following to 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 *">

After the above changes, I get the banner in the iframe, but when I click on the banner nothing happens. Safari shows no network request being generated. As explained before, I have no control on the contents of iframe, so I cannot use InAppBrowser or similar solutions.

I also tried uninstalling cordova-plugin-whitelist as that is not required on iOS, but that did not make any difference. Right now I am not worried about tightening security. I want to make it work first. I have studied Cordova whitelisting guide and gone through every related question on Stack overflow, but did not find any solution. I request guidance from experts.

Solution

  • I created a hyperlink on the page directly, in addition to the hyperlink in the iframe. After making several observations, I could isolate <allow-navigation> as the tag of config.xml, that was making the difference with respect to this problem.

    When I deleted <allow-navigation href="*" /> tag from config.xml, the hyperlink on the page worked but the iframe contents were not populated.

    and when I brought back <allow-navigation href="*" /> tag, the iframe is now populated but hyperlink from the page and from the iframe did not work.

    This hints at that I need something in the middle.

    I then changed the tag to this <allow-navigation href="*://*.iframeContentDomain.com/*" /> and that restored both, the iframe contents and working hyperlinks from page & iframe.