How to avoid adding prefix "unsafe" to javascript by AngularJs?

Question

I try to add bookmarklet button to my website with generating link in a controller.

Template part:

    <a id="bookmarklet"
       class="bookmarklet"
       onclick="alert('Drag and drop me to the bookmarks bar');return false;"
       href="{{getCode()}}">
      + Add
    </a>

Controller part:

$scope.getCode = function () {
  var code = 'javascript:(function(){s=document.createElement(\'SCRIPT\');s.type=\'text/javascript\';' +
    's.src=\'http://localhost:9000/scripts/bookmarklet/bookmarklet.js?x=' + ($scope.user.id) + '\';' +
    'document.getElementsByTagName(\'head\')[0].appendChild(s);document.sc_srvurl=\'http://localhost:8080\'})();'  ;
  return code;
};

But I get following after compilation:

<a class="bookmarklet" href="unsafe:javascript:(function(){s=document.createElement('SCRIPT');s.type='text/javascript';s.src='http://localhost:9000/scripts/bookmarklet/bookmarklet.js?x=5517325d40c37bc2bfe20db6';document.getElementsByTagName('head')[0].appendChild(s);document.sc_srvurl='http://localhost:8080'})();">
              + Add
            </a>

Link starts with "unsafe" and I can't get how to tell angular to trust this link.

This answer - Angular changes urls to "unsafe:" in extension page suggests to add protocol to whitelist. I don't want to disable $sce or adding "javascript" to whitelist protocols as I think it's insecure.

May I tell somehow to angularjs to avoid adding prefix "unsafe" by using $sce? Unfortunately documentation is not clear for me and $sce.trustAsJs(code) haven't helped me.

!EDIT Angular version is 1.4.1.

possible duplicate of Angular changes urls to "unsafe:" in extension page — plamut
– plamut, Commented Aug 12, 2015 at 15:42
The solution in stackoverflow.com/questions/15606751/… is to add protocol to whitelist, where I am concerned with security in my case. — Ivan Kaplin
– Ivan Kaplin, Commented Aug 12, 2015 at 15:53
I don't think you have any other options. And you wouldn't add 'javascript', you would add 'chrome-extension' to the whitelist. — Matthew Green
– Matthew Green, Commented Aug 12, 2015 at 16:06
That's a valid concern indeed. One alternative way I can think of is creating a directive and setting the value of the href attribute there (by manipulating it directly on the directive's DOM element). Is that feasible for your use case? — plamut
– plamut, Commented Aug 12, 2015 at 16:06
@plamut It's not clear for me how workaround with directive can help. I am wondering is there any direct way to tell angular to trust this url? — Ivan Kaplin
– Ivan Kaplin, Commented Aug 12, 2015 at 16:19

plamut · Accepted Answer · 2015-08-12 22:37:32Z

2

Try to circumvent the restrictions by writing a custom directive:

var app = angular.module('myApp', []);

app.directive('bookmarklet', function () {
    return {
        restrict: 'A',
        scope: {},
        link: function($scope, element, attrs) {
            if (element[0].tagName !== 'A') {
                return;  // simply do nothing (or raise an error)
            }
            element[0].href = 'javascript:alert("It works in 1.4.1, too!")';
        }
    };
 });

Usage:

<div ng-app="myApp">
    <a href="#foo" bookmarklet>click me</a>
</div>

I also created a fiddle demo to test it: http://jsfiddle.net/t0acdxcL/1/

edited Aug 12, 2015 at 22:37

answered Aug 12, 2015 at 16:23

plamut

3,20610 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

plamut Over a year ago

I have now fixed the link to the demo.

Ivan Kaplin Over a year ago

Thank you! I see that your fiddle works and there is clear 'javascript:alert("It works!")' without unsafe. However I tried it in my project and it still has unsafe href="unsafe:javascript:alert('It works!')". Wondering what is the difference.

Ivan Kaplin Over a year ago

I have updated angular dependency to 1.4.1 and it reproduces. See this fiddle - jsfiddle.net/ikaplin/8rm57bwf/2

Ivan Kaplin Over a year ago

I will add to question that angular version is 1.4.1

plamut Over a year ago

Updated my answer and the demo, it now works in 1.4.1, too. Seems like attrs.$set(...) behavior was changed at some point, but it's trivial to get around that. Setting the attribute value directly on the element does the trick, i.e. element[0].href = ....

Collectives™ on Stack Overflow

How to avoid adding prefix "unsafe" to javascript by AngularJs?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related