Angular Js and Trigger.io - Can't follow a link on Android that works on iOS

Question

I am using AngularJS with Trigger.io to develop a mobile application for both iOS and Android.

When I try to open a link that looks like this:

<a ng-href="#/offers/{{featured_offer.Id}}"></a>

It works perfectly fine on iOS, but on Android I get this message in the trigger console, and the link is not navigated to:

[WARNING] Attempted to open a URL which could not be handled: unsafe:content://io.trigger.forge722b6464a0e211e2ba9d12313d00dc45/src/index.html#/offers/8

How can I get this to work in Android the same as it works in iOS?

score 9 · Accepted Answer · answered Apr 21 '13 at 14:57

9

Looks like Angular adds unsafe: to url schemes it doesn't recognise, I think you want to include something like:

app.config(function($compileProvider){
  $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content):/);
});

Which adds content: to the accepted url schemes.

answered Apr 21 '13 at 14:57

Connorhd

2,476
13
15

That was indeed it. I figured this out just after finally posting the question, but had to wait 8 hours to answer because I don't have enough reputation. So it goes to you! – trentclowater Apr 22 '13 at 07:26
The method btw has been renamed to `aHrefSanitizationWhitelist` https://docs.angularjs.org/api/ng/provider/$compileProvider – tksfz Jun 05 '14 at 21:22

score 1 · Answer 2 · answered Nov 26 '13 at 03:28

I had this same problem, specifically with trying to display an img with a src of a file returned by forge.file.getImage. Angular adds unsafe: to the content: prefix of the local img URL, and as connorhd said, you need to add content: to the url whitelist.

Note that compileProvider's API has changed with recent versions of Angular, so I'm commenting here in case anyone else finds an updated version of this workaround useful.

app.config(['$compileProvider', 
function($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content|blob):|data:image|/);
    // note: you'll also have to do imgSrcSanitizationWhitelist if you want to use general links as well as ng-src on images.
}]);

score 0 · Answer 3 · answered Jun 14 '16 at 10:36

I too had this problem just add sanitizer in you config.xml

var app = angular.module( 'myApp', [] )
.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
    }
]);

Angular Js and Trigger.io - Can't follow a link on Android that works on iOS

3 Answers3