具有Iframe的电容器应用无法在IOS上运行

编程问答 2022-08-14

问题描述

我正在使用电容器使用Quasar开发应用程序。 在此应用程序中，我有一个Iframe。

我为android和iphone都构建了该应用程序，并且在android上，它按预期运行良好。在iphone上，iframe不会加载内容。

目前用于测试的iframe代码为：

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

我尝试添加到电容器.config.json中：

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

还添加到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>

它仍然不起作用。

有人遇到过这个问题，可以帮我吗？

编辑1：

将iframe代码修改为：

 <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>

仍然没有运气

编辑2：

在iframe上，使用不包含Javascript的网页，将显示该页面。

https://www.openstreetmap.org之类的页面上使用了JavaScript的网页比较多，因此无法加载。

我要加载的另一个使用Stripe javascript的页面无法加载。

解决方法

我遇到了同样的问题，但不是使用 openstreetmap，而是我们自己的网站。 使用 openstreetmap 你有 CPS 头：

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'

使用 frame-ancestors 'self'； 将其放在 openstreetmap.org 以外的其他域的 iframe 中是不好的。

还有

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

所以我想这是不可能的。

但如果您使用 https://www.openstreetmap.org/export/embed.html，则没有安全标头。

而且你需要添加meta标签来管理你自己的电容CSP https://capacitorjs.com/docs/guides/security

capacitorionic-frameworkiosiosquasar-framework