fix(all): Use $templateRequest instead of $http for security.

topherfangio · ThomasBurleson · commit 0397e2981e0a · 2016-05-12T09:10:58.000-07:00
For security purposes, we have switched from using `$http` for our template and icon requests to using `$templateRequest` since it provides some automatic caching, and more importantly, security checks about the URL/data. See https://docs.angularjs.org/api/ng/service/$templateRequest for more information. Fixes #8413. Closes #8423
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
@@ -722,9 +722,8 @@ function($scope, doc, component, $rootScope) {
   '$scope',
   'component',
   'demos',
-  '$http',
-  '$templateCache',
-function($rootScope, $scope, component, demos, $http, $templateCache) {
+  '$templateRequest',
+function($rootScope, $scope, component, demos, $templateRequest) {
   $rootScope.currentComponent = component;
   $rootScope.currentDoc = null;
 
@@ -737,9 +736,9 @@ function($rootScope, $scope, component, demos, $http, $templateCache) {
       .concat(demo.css || [])
       .concat(demo.html || []);
     files.forEach(function(file) {
-      file.httpPromise =$http.get(file.outputPath, {cache: $templateCache})
+      file.httpPromise = $templateRequest(file.outputPath)
         .then(function(response) {
-          file.contents = response.data
+          file.contents = response
             .replace('<head/>', '');
           return file.contents;
         });
diff --git a/docs/app/js/demoInclude.js b/docs/app/js/demoInclude.js
@@ -1,10 +1,8 @@
 DocsApp.directive('demoInclude', [
   '$q', 
-  '$http', 
   '$compile', 
-  '$templateCache',
   '$timeout',
-function($q, $http, $compile, $templateCache, $timeout) {
+function($q, $compile, $timeout) {
   return {
     restrict: 'E',
     link: postLink
diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
@@ -159,7 +159,7 @@ <h2 class="md-toolbar-item md-breadcrumb md-headline">
       <div layout="row" flex="noshrink" layout-align="center center">
         <div id="license-footer" flex>
           Powered by Google &copy;2014&#8211;{{thisYear}}.
-          Code licensed under the <a href="./license"  class="md-accent">MIT License</a>.
+          Code licensed under the <a ng-href="./license"  class="md-accent">MIT License</a>.
           Documentation licensed under
           <a href="http://creativecommons.org/licenses/by/4.0/"  target="_blank" class="md-default-theme md-accent">CC BY 4.0</a>.
         </div>
diff --git a/src/components/bottomSheet/demoBasicUsage/script.js b/src/components/bottomSheet/demoBasicUsage/script.js
@@ -71,7 +71,7 @@ angular.module('bottomSheetDemo1', ['ngMaterial'])
     $mdBottomSheet.hide(clickedItem);
   };
 })
-.run(function($http, $templateCache) {
+.run(function($templateResult) {
 
     var urls = [
       'img/icons/share-arrow.svg',
@@ -87,7 +87,7 @@ angular.module('bottomSheetDemo1', ['ngMaterial'])
     ];
 
     angular.forEach(urls, function(url) {
-      $http.get(url, {cache: $templateCache});
+      $templateResult(url);
     });
 
   });
diff --git a/src/components/icon/demoUsingTemplateRequest/assets/android.svg b/src/components/icon/demoUsingTemplateRequest/assets/android.svg
diff --git a/src/components/icon/demoUsingTemplateRequest/assets/cake.svg b/src/components/icon/demoUsingTemplateRequest/assets/cake.svg
diff --git a/src/components/icon/demoUsingTemplateRequest/assets/core-icons.svg b/src/components/icon/demoUsingTemplateRequest/assets/core-icons.svg
diff --git a/src/components/icon/demoUsingTemplateRequest/index.html b/src/components/icon/demoUsingTemplateRequest/index.html
@@ -1,7 +1,7 @@
 <div ng-controller="DemoCtrl" layout="column" layout-margin ng-cloak>
 
   <p>
-      Pre-fetch with $http & cache SVG icons using $templateCache.<br/>
+      Pre-fetch and cache SVG icons using $templateRequest.<br/>
       <span class="note"> NOTE: Show the Source views for details...</span>
   </p>
 
diff --git a/src/components/icon/demoUsingTemplateRequest/script.js b/src/components/icon/demoUsingTemplateRequest/script.js
@@ -4,14 +4,14 @@ angular.module('appUsingTemplateCache', ['ngMaterial'])
   .config(function($mdIconProvider) {
 
     // Register icon IDs with sources. Future $mdIcon( <id> ) lookups
-    // will load by url and retrieve the data via the $http and $templateCache
+    // will load by url and retrieve the data via the $templateRequest
 
     $mdIconProvider
       .iconSet('core', 'img/icons/sets/core-icons.svg',24)
       .icon('social:cake', 'img/icons/cake.svg',24);
 
   })
-  .run(function($http, $templateCache) {
+  .run(function($templateRequest) {
 
     var urls = [
       'img/icons/sets/core-icons.svg',
@@ -20,10 +20,10 @@ angular.module('appUsingTemplateCache', ['ngMaterial'])
     ];
 
     // Pre-fetch icons sources by URL and cache in the $templateCache...
-    // subsequent $http calls will look there first.
+    // subsequent $templateRequest calls will look there first.
 
     angular.forEach(urls, function(url) {
-      $http.get(url, {cache: $templateCache});
+      $templateRequest(url);
     });
 
   })
diff --git a/src/components/icon/demoUsingTemplateRequest/style.css b/src/components/icon/demoUsingTemplateRequest/style.css
diff --git a/src/components/icon/icon.spec.js b/src/components/icon/icon.spec.js
@@ -1,4 +1,4 @@
-describe('mdIcon directive', function() {
+describe('MdIcon directive', function() {
   var el;
   var $scope;
   var $compile;
@@ -332,7 +332,7 @@ describe('mdIcon directive', function() {
 });
 
 
-describe('mdIcon service', function() {
+describe('MdIcon service', function() {
 
   var $mdIcon;
   var $httpBackend;
@@ -467,7 +467,7 @@ describe('mdIcon service', function() {
         var msg;
         try {
           $mdIcon('notconfigured')
-            .catch(function(error){
+            .catch(function(error) {
               msg = error;
             });
 
@@ -518,8 +518,8 @@ describe('mdIcon service', function() {
         var msg;
         try {
           $mdIcon('notfound:someIcon')
-            .catch(function(error){
-              msg = error;
+            .catch(function(error) {
+              msg = error.data;
             });
 
           $httpBackend.flush();
@@ -529,18 +529,13 @@ describe('mdIcon service', function() {
       });
     });
 
-    /*
-     * Previous to Angular 1.6, requesting an icon that is not found would throw no errors. After
-     * 1.6, since we do not have a .catch() handler, it now throws a Possibly Unhandled Rejection
-     * error.
-     */
     describe('icon is not found', function() {
       it('should not throw Error', function() {
         expect(function(){
           $mdIcon('notfound');
 
           $httpBackend.flush();
-        }).not.toThrow('Cannot GET notfoundicon.svg');
+        }).not.toThrow();
       });
     });
   });
diff --git a/src/components/icon/js/iconService.js b/src/components/icon/js/iconService.js
@@ -15,8 +15,8 @@
     * If using font-icons, the developer is responsible for loading the fonts.
     *
     * If using SVGs, loading of the actual svg files are deferred to on-demand requests and are loaded
-    * internally by the `$mdIcon` service using the `$http` service. When an SVG is requested by name/ID,
-    * the `$mdIcon` service searches its registry for the associated source URL;
+    * internally by the `$mdIcon` service using the `$templateRequest` service. When an SVG is
+    * requested by name/ID, the `$mdIcon` service searches its registry for the associated source URL;
     * that URL is used to on-demand load and parse the SVG dynamically.
     *
     * **Notice:** Most font-icons libraries do not support ligatures (for example `fontawesome`).<br/>
@@ -60,15 +60,15 @@
     *     $mdIconProvider.defaultIconSet('my/app/icons.svg')
     *
     *   })
-    *   .run(function($http, $templateCache){
+    *   .run(function($templateRequest){
     *
     *     // Pre-fetch icons sources by URL and cache in the $templateCache...
-    *     // subsequent $http calls will look there first.
+    *     // subsequent $templateRequest calls will look there first.
     *
     *     var urls = [ 'imy/app/icons.svg', 'img/icons/android.svg'];
     *
     *     angular.forEach(urls, function(url) {
-    *       $http.get(url, {cache: $templateCache});
+    *       $templateRequest(url);
     *     });
     *
     *   });
@@ -88,8 +88,9 @@
     * These icons  will later be retrieved from the cache using `$mdIcon( <icon name> )`
     *
     * @param {string} id Icon name/id used to register the icon
-    * @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
-    * data or as part of the lookup in `$templateCache` if pre-loading was configured.
+    * @param {string} url specifies the external location for the data file. Used internally by
+    * `$templateRequest` to load the data or as part of the lookup in `$templateCache` if pre-loading
+    * was configured.
     * @param {number=} viewBoxSize Sets the width and height the icon's viewBox.
     * It is ignored for icons with an existing viewBox. Default size is 24.
     *
@@ -118,8 +119,9 @@
     * `$mdIcon(<icon set name>:<icon name>)`
     *
     * @param {string} id Icon name/id used to register the iconset
-    * @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
-    * data or as part of the lookup in `$templateCache` if pre-loading was configured.
+    * @param {string} url specifies the external location for the data file. Used internally by
+    * `$templateRequest` to load the data or as part of the lookup in `$templateCache` if pre-loading
+    * was configured.
     * @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
     * It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
     * Default value is 24.
@@ -148,8 +150,9 @@
     * subsequent lookups of icons will failover to search this 'default' icon set.
     * Icon can be retrieved from this cached, default set using `$mdIcon(<name>)`
     *
-    * @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
-    * data or as part of the lookup in `$templateCache` if pre-loading was configured.
+    * @param {string} url specifies the external location for the data file. Used internally by
+    * `$templateRequest` to load the data or as part of the lookup in `$templateCache` if pre-loading
+    * was configured.
     * @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
     * It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
     * Default value is 24.
@@ -354,9 +357,9 @@
 
    },
 
-   $get : ['$http', '$q', '$log', '$templateCache', '$mdUtil', function($http, $q, $log, $templateCache, $mdUtil) {
+   $get : ['$templateRequest', '$q', '$log', '$templateCache', '$mdUtil', function($templateRequest, $q, $log, $templateCache, $mdUtil) {
      this.preloadIcons($templateCache);
-     return MdIconService(config, $http, $q, $log, $templateCache, $mdUtil);
+     return MdIconService(config, $templateRequest, $q, $log, $templateCache, $mdUtil);
    }]
  };
 
@@ -411,7 +414,7 @@
   */
 
   /* @ngInject */
- function MdIconService(config, $http, $q, $log, $templateCache, $mdUtil) {
+ function MdIconService(config, $templateRequest, $q, $log, $templateCache, $mdUtil) {
    var iconCache = {};
    var urlRegex = /[-\w@:%\+.~#?&//=]{2,}\.[a-z]{2,4}\b(\/[-\w@:%\+.~#?&//=]*)?/i;
    var dataUrlRegex = /^data:image\/svg\+xml[\s*;\w\-\=]*?(base64)?,(.*)$/i;
@@ -513,7 +516,7 @@
 
      function announceIdNotFound(id) {
        var msg = 'icon ' + id + ' not found';
-      $log.warn(msg);
+       $log.warn(msg);
 
        return $q.reject(msg || id);
      }
@@ -534,11 +537,18 @@
 
      /* Load the icon by URL using HTTP. */
      function loadByHttpUrl(url) {
-       return $http
-         .get(url, { cache: $templateCache })
-         .then(function(response) {
-           return angular.element('<div>').append(response.data).find('svg')[0];
-         }).catch(announceNotFound);
+       return $q(function(resolve, reject) {
+         var extractSvg = function(response) {
+           var svg = angular.element('<div>').append(response).find('svg')[0];
+           resolve(svg);
+         };
+         var announceAndReject = function(e) {
+           announceNotFound(e);
+           reject(e);
+         };
+
+         $templateRequest(url, true).then(extractSvg, announceAndReject);
+       });
      }
 
      return dataUrlRegex.test(url)
diff --git a/src/core/services/compiler/compiler.js b/src/core/services/compiler/compiler.js
@@ -2,7 +2,7 @@ angular
   .module('material.core')
   .service('$mdCompiler', mdCompilerService);
 
-function mdCompilerService($q, $http, $injector, $compile, $controller, $templateCache) {
+function mdCompilerService($q, $templateRequest, $injector, $compile, $controller) {
   /* jshint validthis: true */
 
   /*
@@ -89,9 +89,9 @@ function mdCompilerService($q, $http, $injector, $compile, $controller, $templat
     angular.extend(resolve, locals);
 
     if (templateUrl) {
-      resolve.$template = $http.get(templateUrl, {cache: $templateCache})
+      resolve.$template = $templateRequest(templateUrl)
         .then(function(response) {
-          return response.data;
+          return response;
         });
     } else {
       resolve.$template = $q.when(template);
