Capacitor app with Iframe not working on IOS

Viewed 2519

I'm developing an app with Quasar, using capacitor. Inside this app, I have an Iframe.

I build the app for both android and iphone, and on the android, it works fine, as expected. On the iphone, the iframe does not load the content.

The iframe code at this moment, for testing is :

        <iframe src="https://www.openstreetmap.org" style="width: 100%; height: 100%"></iframe>

I've tried adding to capacitor.config.json :

{
  "appId": "com.aaa.bbb",
  "appName": "The test Project",
  "bundledWebRuntime": false,
  "npmClient": "yarn",
  "webDir": "www",
  "server": {
      "allowNavigation": [
          "*",
          "www.openstreetmap.org"
      ]
  }
}

Also adding to config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <access origin="*" />
  <allow-navigation href="*" />
</widget>

It still doesn't work.

Has anyone been through this problem and can lend me a hand?


Edit 1:

Modified iframe code to :

 <iframe src="https://www.openstreetmap.org" 
         sandbox="allow-forms, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-popups, allow-popups-to-escape-sandbox, allow-presentation,  allow-same-origin, allow-scripts, allow-top-navigation, allow-top-navigation-by-user-activation"  style="width: 100%; height: 100%">

 </iframe>

Still no luck


Edit 2:

On the Iframe, using a webpage that contains no Javascripts , the page shows.

Pages like https://www.openstreetmap.org which are heavy on javascript, don't load.

Another page that I want loading, which uses Stripe javascript, doesn't load.

1 Answers

I get the same problem but not using openstreetmap, but our own web site. With openstreetmap you have CPS header :

default-src 'self'; child-src 'self' http://127.0.0.1:8111 https://127.0.0.1:8112; connect-src 'self' piwik.openstreetmap.org https://nominatim.openstreetmap.org/ https://overpass-api.de/api/interpreter https://routing.openstreetmap.de/ https://graphhopper.com/api/1/route; font-src 'none'; form-action 'self' render.openstreetmap.org; frame-ancestors 'self'; frame-src 'self' http://127.0.0.1:8111 https://127.0.0.1:8112; img-src 'self' data: www.gravatar.com *.wp.com tile.openstreetmap.org *.tile.openstreetmap.org *.tile.thunderforest.com tileserver.memomaps.de *.openstreetmap.fr piwik.openstreetmap.org https://openstreetmap-user-avatars.s3.dualstack.eu-west-1.amazonaws.com; manifest-src 'self'; media-src 'none'; object-src 'self'; script-src 'self' piwik.openstreetmap.org; style-src 'self' 'unsafe-inline'; worker-src 'none'

with frame-ancestors 'self'; that's not good to put this in an iframe in an other domain than openstreetmap.org.

And there is also

x-frame-options: sameorigin 
x-xss-protection: 1; mode=block

So I guess that's not possible.

But if you use https://www.openstreetmap.org/export/embed.html there is no security headers.

And you need to add meta tag to manage your own CSP in capacitor https://capacitorjs.com/docs/guides/security

Related