feat(linky): add support for custom attributes

Optional extra attributes may be defined either as:
- a map of attributes and values
- a function that takes the url as a parameter and returns a map

Closes #12558
Closes #13061

Author: stianjensen

src/ngSanitize/filter/linky.js

@@ -15,6 +15,16 @@
  *
  * @param {string} text Input text.
  * @param {string} target Window (_blank|_self|_parent|_top) or named frame to open links in.
+ * @param {object|function(url)} [attributes] Add custom attributes to the link element.
+ *
+ *    Can be one of:
+ *
+ *    - `object`: A map of attributes
+ *    - `function`: Takes the url as a parameter and returns a map of attributes
+ *
+ *    If the map of attributes contains a value for `target`, it overrides the value of
+ *    the target parameter.
+ *
  * @returns {string} Html-linkified text.
  *
  * @usage
@@ -32,7 +42,7 @@
                'mailto:us@somewhere.org,\n'+
                'another@somewhere.org,\n'+
                'and one more: ftp://127.0.0.1/.';
-             $scope.snippetWithTarget = 'http://angularjs.org/';
+             $scope.snippetWithSingleURL = 'http://angularjs.org/';
            }]);
        </script>
        <div ng-controller="ExampleController">
@@ -55,10 +65,19 @@
          <tr id="linky-target">
           <td>linky target</td>
           <td>
-            <pre>&lt;div ng-bind-html="snippetWithTarget | linky:'_blank'"&gt;<br>&lt;/div&gt;</pre>
+            <pre>&lt;div ng-bind-html="snippetWithSingleURL | linky:'_blank'"&gt;<br>&lt;/div&gt;</pre>
+          </td>
+          <td>
+            <div ng-bind-html="snippetWithSingleURL | linky:'_blank'"></div>
+          </td>
+         </tr>
+         <tr id="linky-custom-attributes">
+          <td>linky custom attributes</td>
+          <td>
+            <pre>&lt;div ng-bind-html="snippetWithSingleURL | linky:'_self':{rel: 'nofollow'}"&gt;<br>&lt;/div&gt;</pre>
           </td>
           <td>
-            <div ng-bind-html="snippetWithTarget | linky:'_blank'"></div>
+            <div ng-bind-html="snippetWithSingleURL | linky:'_self':{rel: 'nofollow'}"></div>
           </td>
          </tr>
          <tr id="escaped-html">
@@ -95,10 +114,17 @@
 
        it('should work with the target property', function() {
         expect(element(by.id('linky-target')).
-            element(by.binding("snippetWithTarget | linky:'_blank'")).getText()).
+            element(by.binding("snippetWithSingleURL | linky:'_blank'")).getText()).
             toBe('http://angularjs.org/');
         expect(element(by.css('#linky-target a')).getAttribute('target')).toEqual('_blank');
        });
+
+       it('should optionally add custom attributes', function() {
+        expect(element(by.id('linky-custom-attributes')).
+            element(by.binding("snippetWithSingleURL | linky:'_self':{rel: 'nofollow'}")).getText()).
+            toBe('http://angularjs.org/');
+        expect(element(by.css('#linky-custom-attributes a')).getAttribute('rel')).toEqual('nofollow');
+       });
      </file>
    </example>
  */
@@ -107,7 +133,7 @@ angular.module('ngSanitize').filter('linky', ['$sanitize', function($sanitize) {
         /((ftp|https?):\/\/|(www\.)|(mailto:)?[A-Za-z0-9._%+-]+@)\S*[^\s.;,(){}<>"\u201d\u2019]/i,
       MAILTO_REGEXP = /^mailto:/i;
 
-  return function(text, target) {
+  return function(text, target, attributes) {
     if (!text) return text;
     var match;
     var raw = text;
@@ -137,8 +163,19 @@ angular.module('ngSanitize').filter('linky', ['$sanitize', function($sanitize) {
     }
 
     function addLink(url, text) {
+      var key;
       html.push('<a ');
-      if (angular.isDefined(target)) {
+      if (angular.isFunction(attributes)) {
+        attributes = attributes(url);
+      }
+      if (angular.isObject(attributes)) {
+        for (key in attributes) {
+          html.push(key + '="' + attributes[key] + '" ');
+        }
+      } else {
+        attributes = {};
+      }
+      if (angular.isDefined(target) && !('target' in attributes)) {
         html.push('target="',
                   target,
                   '" ');

test/ngSanitize/filter/linkySpec.js

@@ -56,4 +56,43 @@ describe('linky', function() {
       toBeOneOf('<a target="someNamedIFrame" href="http://example.com">http://example.com</a>',
                 '<a href="http://example.com" target="someNamedIFrame">http://example.com</a>');
   });
+
+  describe('custom attributes', function() {
+
+    it('should optionally add custom attributes', function() {
+      expect(linky("http://example.com", "_self", {rel: "nofollow"})).
+        toBeOneOf('<a rel="nofollow" target="_self" href="http://example.com">http://example.com</a>',
+                  '<a href="http://example.com" target="_self" rel="nofollow">http://example.com</a>');
+    });
+
+
+    it('should override target parameter with custom attributes', function() {
+      expect(linky("http://example.com", "_self", {target: "_blank"})).
+        toBeOneOf('<a target="_blank" href="http://example.com">http://example.com</a>',
+                  '<a href="http://example.com" target="_blank">http://example.com</a>');
+    });
+
+
+    it('should optionally add custom attributes from function', function() {
+      expect(linky("http://example.com", "_self", function(url) {return {"class": "blue"};})).
+        toBeOneOf('<a class="blue" target="_self" href="http://example.com">http://example.com</a>',
+                  '<a href="http://example.com" target="_self" class="blue">http://example.com</a>',
+                  '<a class="blue" href="http://example.com" target="_self">http://example.com</a>');
+    });
+
+
+    it('should pass url as parameter to custom attribute function', function() {
+      var linkParameters = jasmine.createSpy('linkParameters').andReturn({"class": "blue"});
+      linky("http://example.com", "_self", linkParameters);
+      expect(linkParameters).toHaveBeenCalledWith('http://example.com');
+    });
+
+
+    it('should strip unsafe attributes', function() {
+      expect(linky("http://example.com", "_self", {"class": "blue", "onclick": "alert('Hi')"})).
+        toBeOneOf('<a class="blue" target="_self" href="http://example.com">http://example.com</a>',
+                  '<a href="http://example.com" target="_self" class="blue">http://example.com</a>',
+                  '<a class="blue" href="http://example.com" target="_self">http://example.com</a>');
+    });
+  });
 });