3 Replies Latest reply on May 16, 2017 7:29 AM by aleksandrk13731687

    External typed links such waze:, tel: etc. don't work

    aleksandrk13731687

      Hi!

       

      I use Phonegap remote build to test an applicaton it on my IPhone. It's the simplest app which contains only full-screen inappbrowser window. That's it. Unfortunately all external typed links on the page (like waze:, tel:) don't work at all. It's funny because when I use cordova/XCode on my laptop to test it works perfectly.

       

      I've tried numerous ways to change config.xml to fix it but no success.

      Does anybody know how to solve the issue?

       

      I use Phonegap 6.5.0 to build and here is my config.xml file.

       

      <?xml version='1.0' encoding='utf-8'?>
      <widget id="%IDENTIFIER%" ios-CFBundleVersion="1" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
        <name>Nativicate Sample</name>
        <description>
         A sample Apache Cordova application that responds to the deviceready event.
         </description>
        <author email="dev@cordova.apache.org" href="http://cordova.io">
         Apache Cordova Team
         </author>
        <content src="index.html" />
        <access origin='*' subdomains="true" launch-external="yes" allows-arbitrary-loads-in-media='true' allows-arbitrary-loads-in-web-content='true' allows-local-networking='true' />
        <access origin="waze:*" />
        <access origin="tel:*" />
        <access origin="*://*" subdomains="true" launch-external="yes" allows-arbitrary-loads-in-media='true' allows-arbitrary-loads-in-web-content='true' allows-local-networking='true' />
        <allow-intent href="*" />
        <allow-intent href="waze:*" />
        <allow-intent href="geo:*" />
        <allow-intent href="tel:*" />
        <allow-intent href="sms:*" />
        <allow-intent href="mailto:*" />
        <gap:config-file mode="add" parent="ITSAppUsesNonExemptEncryption" platform="ios">
        <false />
        </gap:config-file>
        <plugin name="cordova-plugin-whitelist" spec="~1.3.2" />
        <plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.1" />
        <plugin name="cordova-plugin-inappbrowser" spec="~1.6.1" />
        <allow-navigation href="*" />
      
        <preference name="phonegap-version" value="cli-6.4.0" />
        <preference name="auto-hide-splash-screen" value="true" />
      </widget>
      
      
        • 1. Re: External typed links such waze:, tel: etc. don't work
          simon.macdonald Adobe Employee

          You should also look at the Content-Security-Policy tag in your HTML file. For instance:

           

          <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' ws://*; style-src 'self' 'unsafe-inline'; media-src *; img-src * data:">

           

          You may want to try adding tel: waze: etc. to the default-src section.

          • 2. Re: External typed links such waze:, tel: etc. don't work
            aleksandrk13731687 Level 1

            I tried to add <meta http-equiv="Content-Security-Policy" content="default-src *;"> but it still doesn't work.

             

            index.js:


            var app = {

              initialize: function() {

               document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
              },
              onDeviceReady: function() {

              cordova.InAppBrowser.open('http://%URL%', '_self', 'location=no,toolbar=false');
              }

            };
            app.initialize();

             

            index.html:

             

            <head>
               <meta http-equiv="Content-Security-Policy" content="default-src *;">
              <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
              <link rel="stylesheet" type="text/css" href="css/index.css">
              <title>Hello World</title>
            </head>
            <body>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            </body>
            </html>

             

            • 3. Re: External typed links such waze:, tel: etc. don't work
              aleksandrk13731687 Level 1

              I've investigated cordova-ios sources and found solution.

               

              If you're using cordova-ios 4.1.0+ you have to be careful with <allow-intent> and <allow-navigation> tags.

               

              As far as I get <allow-navigation> determines which URLs should be handled by inAppBrowser meanwhile <allow-intent> determines which URLs (rejected by inAppBrowser) may be redirected to the system for external processing. InAppBrowser can't handle special links like tel: or waze: and just ignores them so they have to be forwarded to the system. My solution is the next lines inside config.xml:

               

              <allow-intent href="*" />
              <allow-navigation href="http://*" />
              <allow-navigation href="https://*" />

               

               

              Never use <allow-navigation href="*" /> in your config.xml!