Telephone (tel:) URLs get a prefix "unsafe:"

[Kevin Preller]

Hi,

I have a problem with an angular application today...

My code looks like:

  <tr ng-repeat="contact in contacts">

                    <td>{{contact.Uri}}</td>

                    <td>{{contact.Activity}}</td>

                    <td><a href="tel:{{contact.Workphone}}">{{contact.Workphone}}</a></td>

 </tr>

The content of "contact.Workphone" is "+49026101234567" for example. But in my browser (chrome) it gets prepend with "unsafe", so the url looks like: "unsafe:tel:+4926101234567". When I click on the link, my telephone application (Lync) doesn't start. First I thought that this might by a javascript problem, but when I use jquery and use attr('href', 'tel:+49...'), there is no problem and I can click the link.

Is this a specific angular thing? 

[Peter Bacon Darwin]

This is a security feature see: https://github.com/angular/angular.js/pull/2037

You can modify the whitelist with $compileProvider.urlSanitizationWhitelist()
Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[kpko]

And how do I add the "tel:" Prefix as an entry for the whitelist?

[Peter Bacon Darwin]

http://plnkr.co/edit/prTGFiheFI7GXNoDhoGT?p=preview

--

[kpko]

Oh, I tried to inject the $compile service into my controller. I didn't know the config section for the provider :-)

Thank you very much! :-)

[Peter Bacon Darwin]

Click on the app.js of that plnkr.  There is a module.config block

On 1 March 2013 17:19, <gr...@gregburger.com> wrote:

I'm running into the same issue as was directed to this thread. But I don't understand where to put the "$compileProvider.urlSanitizationWhitelist() " line in my code. The provided plnkr.co link doesn't seem to work - I don't see any javascript code in.

Shouldn't this be a documented, easy to use feature - turning off url sanitization or making it easy to add protocols right in the directives?

Greg

[Michael Ellis]

How would I do it if I am using regular ng-app and not some ng-app="something" ?

[Peter Bacon Darwin]

You can't

[Peter Bacon Darwin]

But it really is rather easy to add ng-app="something" to your HTML, then have a bit of JavaScript loaded "somewhere" that has this...

angular.module('something', []).config(function($compileProvider){

  $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

});

[Bartłomiej Szuster]

W dniu sobota, 23 marca 2013 20:36:41 UTC+1 użytkownik Peter Bacon Darwin napisał:

But it really is rather easy to add ng-app="something" to your HTML, then have a bit of JavaScript loaded "somewhere" that has this...

angular.module('something', []).config(function($compileProvider){

  $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

});

Hi Peter!

I using Your code in app.js from Angular official tutorial:

'use strict';

/* App Module */

angular.module('widoczki', []).

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

//official Angular code with my names
angular.module('widoczki', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/db', {templateUrl: 'widoki/lista.html', controller: wywolanieAjax_lista}).
      when('/db/:zdjecieId', {templateUrl: 'widoki/detal.html', controller: wywolanieAjax_detal}).
      otherwise({redirectTo: '/db'});
}]);

and nothing happends, still have unsafe:file:// in <a href="#/db/{{zdjecie.id}}">link</a> links :-(

I am using the latest Angular.js but with version from tutorial (v1.0.2) it works well without Your code :-//
 

[Peter Bacon Darwin]

When you declare a module with angular.module(..., []) - notice this square brackets - this wipes out any previous module with that name.

Either chain your declarations...

angular.module('widoczki', [])

.config(function($compileProvider){

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

.config(['$routeProvider', function($routeProvider) {

  $routeProvider.
      when('/db', {templateUrl: 'widoki/lista.html', controller: wywolanieAjax_lista}).
      when('/db/:zdjecieId', {templateUrl: 'widoki/detal.html', controller: wywolanieAjax_detal}).
      otherwise({redirectTo: '/db'});
}]);

or put both configs in the same block:

angular.module('widoczki', [])

.config(['$routeProvider', '$compileProvider', function($routeProvider, $compileProvider) {

    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

    $routeProvider.
      when('/db', {templateUrl: 'widoki/lista.html', controller: wywolanieAjax_lista}).
      when('/db/:zdjecieId', {templateUrl: 'widoki/detal.html', controller: wywolanieAjax_detal}).
      otherwise({redirectTo: '/db'});
}]);

or use a variable to hold the module:

var widoczki = angular.module('widoczki', [])

.config(function($compileProvider){

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

widoczki.config(['$routeProvider', function($routeProvider) {

  $routeProvider.
      when('/db', {templateUrl: 'widoki/lista.html', controller: wywolanieAjax_lista}).
      when('/db/:zdjecieId', {templateUrl: 'widoki/detal.html', controller: wywolanieAjax_detal}).
      otherwise({redirectTo: '/db'});
}]);

or "reopen" the module - notice the lack of square brackets:

angular.module('widoczki', []).

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

//official Angular code with my names

angular.module('widoczki').

  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/db', {templateUrl: 'widoki/lista.html', controller: wywolanieAjax_lista}).
      when('/db/:zdjecieId', {templateUrl: 'widoki/detal.html', controller: wywolanieAjax_detal}).
      otherwise({redirectTo: '/db'});
}]);

--

[Bartłomiej Szuster]

Peter - I'll tell one word: wow. Thank You. Please do tell me where did You learn so much about Angular? From tutorials, books, etc.? Please share the knowledge :)

[panic.zero]

thanx for that, it helped me a lot

[Kanwei Li]

Note that this is now:

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

in > 1.1.5