Thursday, December 31, 2015

Get rid of usafe tag on angular url

 

Issue :

I recently wanted to use html sms tag in my mobile web site. In the site I have used angual binding to dynamically bind the sms url as follows

<a id="lnk_sms" href="{{sms_Link}}"  class="sms-button social-media-button" alt="SMS" style="display:none">SMS</a>
 
href value is something like :- 'sms:?body=bodyText’

when I run the application agular keep adding a unsafe prefix infront of the url and sms functionality wasn’t working.

<a id="lnk_sms" href="'unsafe:sms:?body=bodyText’"  class="sms-button social-media-button" alt="SMS" style="display:none">SMS</a>

After spending hours I was able to find the problem and soltion

Problem :

Only http, https, ftp and mailto are enabled by default. Angular will prefix a non-whitelisted URL with unsafe:

Solution :

You need to explicitly add URL protocols to Angular's whitelist using a regular expression. A good place to whitelist the sms: protocol would be in your module's config block:

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

The same procedure also applies when you need to use protocols such as file: and tel:.

Please see the AngularJS $compileProvider API documentation for more info.

Hope this Helps!!!

No comments :

Post a Comment