除非我允许访问href ="*"，否则Cordova，iOS和iframe不会加载内容. [英] Cordova, iOS and iframe won't load content unless I allow-access href="*"

问题描述

我有一个网络应用程序，该应用程序具有嵌入式地图字段，该应用程序使用iframe来实现，以实现 https://maps.google.com/ ...

I have a web app, which has an embedded map field, which is implemented using an iframe to https://maps.google.com/...

我正在将我们的应用程序(当前作为主屏幕图标运行)移植到iOS上的Cordova，因此添加了Cordova包装器.我们已经在Android上通过Cordova运行了该应用程序.

I am porting our app (which runs as a home screen icon currently) to Cordova on iOS, so adding a Cordova wrapper. We already run the app via Cordova on Android.

我有一个div，带有一个子元素

I have a div, with a child element

<iframe src="https://maps.google.com/?iwloc=&output=embed&q=something"></iframe>

最初，当Cordova项目仅与Android有关时，我在config.xml

Initially, when the Cordova project was concerned only with Android, I had in config.xml

<access origin="*" />
<access origin="file://*" />
<access origin="http://*" />
<allow-navigation href="http://*" />

但是，这不起作用.带有地图网址的iframe甚至都不会尝试加载，也没有说明原因.

However, this does not work. The iframe with the map url doesn't even attempt to load, and there is no indication why.

因此，我开始阅读并使用这些设置，基本上在iOS上，它们所做的只是映射到Info.plist中的NSAppTransportSecurity设置.

So I started reading up and playing around with these settings, and on iOS basically, all they do is map to NSAppTransportSecurity settings in Info.plist.

事实证明，<allow-navigation href="http://*" />被完全忽略，仅支持指定域或仅*的允许导航，因此我尝试了更具体的基于域的域，例如

Turns out that <allow-navigation href="http://*" /> is ignored completely, only allow-navigation that specify domains or just * are supported, so I tried the more specific domain based ones, such as

<allow-navigation href="http://maps.google.com/*" />

确实为maps.google.com创建了一个域条目，并将NSExceptionAllowsInsecureHTTPLoads设置为true，但仍不会加载iframe.

Which does create a domain entry for maps.google.com and sets NSExceptionAllowsInsecureHTTPLoads to true but still the iframe won't load.

我唯一能找到的允许iframe加载地图URL的方法就是添加

The ONLY thing I can find that allows the iframe to load the maps URL is by adding

<allow-navigation href="*"/>

本质上将NSAllowsArbitraryLoads设置为true基本上会关闭TLS，并会触发应用审核并需要证明.

Which essentially sets NSAllowsArbitraryLoads to true which basically turns TLS off, and will trigger an app review and require justification.

侧注:<access origin="*"/>还将NSAllowsArbitraryLoads设置为true，但单独阻止了初始URL加载到Webview内部(外部加载).

SideNote: <access origin="*"/> also sets NSAllowsArbitraryLoads to true but alone prevents the initial URL from loading inside the webview (it loads externally).

我需要弄清config.xml或NSAppTransportSecurity设置的哪种组合，才能让它正常工作，而不仅仅是允许所有内容以及毫无疑问会触发的应用程序审核问题.

I am at a bit of a loss as to what combination of config.xml or NSAppTransportSecurity settings I need to get this working without just allowing everything and the app review issues that will undoubtedly trigger.

注意:这些请求不会触发CSP警告，我认为Webview甚至还没有达到预期的目标，如果我将allow-navigation设置为*可以正常工作，则表明CSP很好.

Note: These requests don't trigger a CSP warning, I don't think the webview is even getting that far, and if I set allow-navigation to * it works, which would suggest CSP is fine.

当失败时，我在Web调试器中收到的所有请求都是尝试加载资源时发生错误"，而XCode控制台中没有任何内容.

When it fails, all I get in web debugger for that request is 'an error occurred trying to load the resource', and nothing in XCode console.

推荐答案

在解决了同样的问题之后，我发现了一个对我有用的配置！

After struggling with the same problem, I found a configuration that worked for me!

我希望我的应用在iframe中包含Google日历，这意味着我需要为Cordova指定应在应用的网络视图中处理Google日历的URL.

I want my app to include Google Calendar in an iframe, which means I need to specify for Cordova that the URL of Google Calendar should be handled within the app's webview.

具有<allow-navigation href="*" />可以使其正常工作，但是它的副作用是，用户单击的所有链接也将在Web视图内处理(我的应用程序具有向用户提供新闻摘要的功能，有时文字中的链接供用户点击).在我的应用程序的全屏Web视图中包含任意网页，使用户无法导航回我的应用程序.在Android上始终有一个后退按钮"，而在iOS上则没有，这迫使用户退出该应用程序.

Having <allow-navigation href="*" /> makes it work, but it has the side effect that all links the user clicks will be handled inside the web view as well (my app has functionality for giving the user a feed of news, and sometimes there are links in the text for the user to click). Having arbitrary web pages inside my app's fullscreen web view rendered no way for the user to navigate back to my app. On Android there is always a "back button", but on iOS there is none, forcing the user to quit the application.

我的解决方案有两个方面:在允许导航中指定URL并设置一个允许内容和脚本的CSP:

My solution was two-fold: specify URLs in allow-navigation and setup a CSP that will allow content and scripts:

在config.xml中:

<access origin="*"/>
<allow-navigation href="https://calendar.google.com/*" />
<allow-navigation href="https://apis.google.com/*" />
<allow-navigation href="https://clients6.google.com/*" />

在iOS上仅有calendar.google.com是不够的；我必须找到iframe访问的所有域，因此需要上面的三个URL.我在Chrome的检查工具中使用了网络日志来查找这些域. 对于Android，这不是必需的.

On iOS it was not enough to have calendar.google.com; I had to find all the domains that was accessed by the iframe, hence the need for the three URLs above. I used the network log in Chrome's inspect tool to find these domains. For Android this was not necessary.

我本可以设置<allow-navigation href="https://*.google.com/* />，但是这样的设置太宽了，无法满足我的需要(例如，指向"www.google.com"的链接将在Webview中而不是外部浏览器中进行处理.)

I could have set <allow-navigation href="https://*.google.com/* />, but that would have opened up too broadly for my needs (e.g. links to "www.google.com" would have been handled in webview instead of external browser).

在index.html中:

<head>
...
    <meta http-equiv="Content-Security-Policy"
          content="default-src * 'self' data: gap: 'unsafe-inline' 'unsafe-eval';
          style-src * 'self' 'unsafe-inline' 'unsafe-eval' gap:;
          script-src * 'self' 'unsafe-inline' 'unsafe-eval' gap:;">
...

注意-上面的CSP可能允许太多.但这是一个起点，然后您可以根据应用程序的需求来缩小访问范围.

Note - the CSP above is probably allowing way too much. But this is a starting point and then you can narrow the access according to your app's needs.

现在，该应用程序可以在iOS和Android上正确显示带有Google Calender URL的iframe，并允许其他链接调用该设备的浏览器，即在应用程序外部.

Now the app renders the iframe with Google Calender URL correctly on both iOS and Android, and lets other links invoke the device's browser, i.e. outside the app.

这篇关于除非我允许访问href ="*"，否则Cordova，iOS和iframe不会加载内容.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！