带有 iframe 的电容器应用程序无法在 IOS 上运行答案

【问题标题】：Capacitor app with Iframe not working on IOS带有 iframe 的电容器应用程序无法在 IOS 上运行
【发布时间】：2020-12-14 05:48:01
【问题描述】：

我正在使用 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 上，使用不包含 Javascripts 的网页，页面显示。

像https://www.openstreetmap.org 这样的页面大量使用javascript，不要加载。

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

【问题讨论】：

标签： ios ionic-framework capacitor quasar-framework

【解决方案1】：

我遇到了同样的问题，但不是使用 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，则没有安全标头。

并且您需要添加元标记来管理您自己的电容器中的 CSP https://capacitorjs.com/docs/guides/security

【讨论】：