Ionic2 mailto：和短信：？

Question

Hi there I'm using ionic2, try to open sms and mail app with mailto: and sms: but got error net::ERR_UNKNOWN_URL_SCHEME in android, but running well in ios

I already add allow-intent, access-origin and allow-navigation. This is in my config.xml

<access origin="*" />
<access origin="mailto:*" launch-external="true" />
<access origin="tel:*" launch-external="true" />
<access origin="sms:*" launch-external="true" />
<access origin="geo:*" launch-external="true" />
<access origin="maps:*" launch-external="true" />

<allow-intent href="http://*/*" launch-external="true" />
<allow-intent href="https://*/*" launch-external="true" />
<allow-intent href="tel:*" launch-external="true" />
<allow-intent href="sms:*" launch-external="true" />
<allow-intent href="mailto:*" launch-external="true" />
<allow-intent href="geo:*" launch-external="true" />

<allow-navigation href="sms:*" launch-external="true" />
<allow-navigation href="mailto:*" launch-external="true" />

This is my ionic info

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.6.0
Xcode version: Xcode 8.0 Build version 8A218a

I call this in my code window.location.href = 'mailto:name@domain.com';

Thank you in advice

Answer 1

In my App I use

<a [href]="sanitize('sms:' + item.sms)"><button ion-button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>
<a href="mailto:{{item.email}}"><button ion-button outline><ion-icon name="ios-mail"></ion-icon></button></a>

Note I had to Sanitize the sms to make it work on devices as of about the last two releases it becomes Unsafe.

import { DomSanitizer } from '@angular/platform-browser';

constructor(public public navCtrl: NavController, public sanitizer: DomSanitizer) {}

sanitize(url: string) {
return this.sanitizer.bypassSecurityTrustUrl(url);
}

config.xml

<access origin="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
  <allow-intent href="market:*"/>
</platform>
<platform name="ios">
  <allow-intent href="itms:*"/>
  <allow-intent href="itms-apps:*"/>
</platform>

Instead of window.open I use something like this to open URLs

<button (click)="launch('https://www.somewhere.com')">Launch URL</button>

launch(url) {
    this.platform.ready().then(() => {
        open(url, "_blank", "location=no");
    });
}

So far it works on both iOS and android for my App.

Answer 2

As I mentioned in the comment of your question, just using access origin solved your problem but It's important to know what each one does.

1. Access: Controls which network requests (images, XHRs, etc) are allowed to be made (via cordova native hooks
2. Allow-intent: Controls which URLs the app is allowed to ask the system to open. By default, no external URLs are allowed
3. Allow-navigation: Controls which URLs the WebView itself can be navigated to. Applies to top-level navigations only.

Read up more on these here: cordova-plugin-whitelist . As well as CSP.

Glad I could help.