Whatsapp Sharing in AngularJS

Question

Simple as it should be, it won't work as this code can't detect AngularJS codes.

    <a href="whatsapp://send?text={{challenge.challenge_title}}" 
            data-action="{{FullURL}}">Whatsapp</a>

Do i need a directive for this? If yes, what is it? Someone with experience in AngularJS, kindly help.

Answer 1

You need to sanitize anchor href inside your config phase of angular, that will allow your href with whatsapp prefix.

Code

app.config(function($compileProvider){
   //other configuration code here
   $compileProvider.aHrefSanitizationWhitelist(/^\s*(whatsapp):/);
})

Look this SO Question for details.

Answer 2

I faced an issue of unsafe URL after using $compileProvider.aHrefSanitizationWhitelist(/^\s*(whatsapp):/); when i read the angular docs it says:

aHrefSanitizationWhitelist([regexp]); Retrieves or overrides the default regular expression that is used for whitelisting of safe urls during a[href] sanitization. The sanitization is a security measure aimed at preventing XSS attacks via html links. Any url about to be assigned to a[href] via data-binding is first normalized and turned into an absolute url. Afterwards, the url is matched against the aHrefSanitizationWhitelist regular expression. If a match is found, the original url is written into the dom. Otherwise, the absolute url is prefixed with 'unsafe:' string and only then is it written into the DOM. "If a match is found, the original url is written into the dom. Otherwise, the absolute url is prefixed with 'unsafe:' string and only then is it written into the DOM." So for all other urls other than whatsapp, the match will not be found and it will be marked as unsafe

The another is way to make a directive

angular.module('shareLink')
  .directive('whatsApp', function (){
    return{
        link: function (scope, elem, $attr){
            elem.on('click', function (){
                var text = $attr.text;
                var url = $attr.whatsApp;
                var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
                var whatsapp_url = "whatsapp://send?text=" + message;
                window.location.href = whatsapp_url;

            });
        }
    }
});

<a class="sharelink whatsapp"  data-action="share/whatsapp/share" data-text="you can add title or any text here" whats-app="{{url}}">
                        <i class="fa fa-whatsapp "></i> WHATSAPP
                    </a>