title: In Ionic Cordova App, external hyperlinks in cross origin contents in an iframe, work on Android but do not function on iOS
body: <p>I have an ionic 5 Cordova 9 app that requires following behavior:</p>
  
  <ol>
  <li>It should load image banners served by a cross origin web service, obviously inside an iframe, in this app.</li>
  <li>The image banner has hyperlink and once clicked the system browser should go to that webpage which is another cross origin. </li>
  </ol>
  
  <p>The above works perfectly fine on Android with the config.xml and index.html auto-generated by ionic &amp; 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</p>
  
  <pre><code>&lt;access origin="*" /&gt;
  &lt;allow-navigation href="*" /&gt;
  &lt;allow-intent href="*" /&gt;
  </code></pre>
  
  <p>I added following to index.html</p>
  
  <pre><code>&lt;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 *"&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>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. </p>