fix($compile): disallow interpolations for DOM event handlers

BREAKING CHANGE: Interpolations inside DOM event handlers are
    disallowed.  DOM event handlers execute arbitrary Javascript code.
    Using an interpolation for such handlers means that the interpolated
    value is a JS string that is evaluated.  Storing or generating such
    strings is error prone and likely leads to an XSS if you're not
    super careful.  On the other hand, ng-click and such event handlers
    evaluate Angular expressions that are a lot safer (e.g. No direct
    access to global objects - only scope), cleaner and harder to
    exploit.

    To migrate the code follow the example below:

    Before:

        JS:   scope.foo = 'alert(1)';
        HTML: <div onclick="{{foo}}">

    After:

        JS:   scope.foo = function() { alert(1); }
        HTML: <div ng-click="foo()">

1 files changed, 30 insertions, 0 deletions

diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index b713476b..672a704d 100755
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -2831,6 +2831,36 @@ describe('$compile', function() {
     });
   });
 
+  describe('interpolation on HTML DOM event handler attributes onclick, onXYZ, formaction', function() {
+    it('should disallow interpolation on onclick', inject(function($compile, $rootScope) {
+      // All interpolations are disallowed.
+      $rootScope.onClickJs = "";
+      expect(function() {
+          $compile('<button onclick="{{onClickJs}}"></script>')($rootScope);
+        }).toThrow(
+          "[$compile:nodomevents] Interpolations for HTML DOM event attributes are disallowed.  " +
+          "Please use the ng- versions (such as ng-click instead of onclick) instead.");
+      expect(function() {
+          $compile('<button ONCLICK="{{onClickJs}}"></script>')($rootScope);
+        }).toThrow(
+          "[$compile:nodomevents] Interpolations for HTML DOM event attributes are disallowed.  " +
+          "Please use the ng- versions (such as ng-click instead of onclick) instead.");
+      expect(function() {
+          $compile('<button ng-attr-onclick="{{onClickJs}}"></script>')($rootScope);
+        }).toThrow(
+          "[$compile:nodomevents] Interpolations for HTML DOM event attributes are disallowed.  " +
+          "Please use the ng- versions (such as ng-click instead of onclick) instead.");
+    }));
+
+    it('should pass through arbitrary values on onXYZ event attributes that contain a hyphen', inject(function($compile, $rootScope) {
+      element = $compile('<button on-click="{{onClickJs}}"></script>')($rootScope);
+      $rootScope.onClickJs = 'javascript:doSomething()';
+      $rootScope.$apply();
+      expect(element.attr('on-click')).toEqual('javascript:doSomething()');
+    }));
+  });
+
+
   describe('ngAttr* attribute binding', function() {
 
     it('should bind after digest but not before', inject(function($compile, $rootScope) {