Angular 1.6.3 is not allowing a JSONP request that was allowed in 1.5.8

Question

Angular 1.6.3 is not allowing a request that was allowed in 1.5.8 and I am getting this error:

$sce:insecurl
Processing of a Resource from Untrusted Source Blocked

The full error is available here.

I would like to upgrade my version of angular to 1.6.3 to get the latest and greatest, but I am dependent on this API. Is there a way for me to mark this as a trusted API or another way to use this API? What is the difference between these two versions that is causing this?

Here is the code that I am trying to run:

var app = angular.module('app', []);
app.controller('firstController', ['$http', function($http) {
  console.log('firstController up and running');
  var key = 'XXXXXXXXXXXXX'; // is an actual key
  var self = this;

  self.animal = {};

  self.getRandomPet = function(){
    var query = 'http://api.petfinder.com/'; // baseURL for API
    query += 'pet.getRandom'; // selecting the method we would like to return
    query += '?key=' + key; // Giving petfinder our key
    query += '&format=json'; // Telling petfinder we want our response to be JSON
    query += '&output=basic'; // Telling petfinder what data we want (more than just id)
    var request = encodeURI(query) + '&callback=JSON_CALLBACK'; // removing spaces and special characters from response as well as making jsonp work with the callback

    console.log('Request:', request);

    $http.jsonp(request).then(function(response){
      console.log(response);
      self.animal = response.data.petfinder.pet;
    });

  }

  self.getRandomPet();
}]);

The entire repository is available here: https://github.com/LukeSchlangen/angular-petfinder-api

Answer 1

$http.jsonp Changes for AngularJS V1.6

The query parameter that will be used to transmit the JSONP callback to the server is now specified via the jsonpCallbackParam config value, instead of using the JSON_CALLBACK placeholder.

• Any use of JSON_CALLBACK in a JSONP request URL will cause an error.
• Any request that provides a parameter with the same name as that given by the jsonpCallbackParam config property will cause an error.

This is to prevent malicious attack via the response from an app inadvertently allowing untrusted data to be used to generate the callback parameter.

Since the petfinder API uses the default value "callback", simply delete it from the query string:

self.getRandomPet = function(){
    var query = 'http://api.petfinder.com/'; // baseURL for API
    query += 'pet.getRandom'; // selecting the method we would like to return
    //query += '?key=' + key; // Giving petfinder our key
    //query += '&format=json'; // Telling petfinder we want our response to be JSON
    //query += '&output=basic'; // Telling petfinder what data we want
    //var request = encodeURI(query) + '&callback=JSON_CALLBACK'; 

    //console.log('Request:', request);

    var params = { key: key,
                   format: 'json',
                   output: 'basic'
                 };                      

    //$http.jsonp(request).then(function(response){
    $http.jsonp(query, { params: params }).then(function(response){
      console.log(response);
      self.animal = response.data.petfinder.pet;
    });

  }

$http:

Due to fb6634, you can no longer use the JSON_CALLBACK placeholder in your JSONP requests. Instead you must provide the name of the query parameter that will pass the callback via the jsonpCallbackParam property of the config object, or app-wide via the $http.defaults.jsonpCallbackParam property, which is "callback" by default.

Before:

$http.jsonp('trusted/url?callback=JSON_CALLBACK');
$http.jsonp('other/trusted/url', {params: {cb: 'JSON_CALLBACK'}});

After:

$http.jsonp('trusted/url');
$http.jsonp('other/trusted/url', {jsonpCallbackParam: 'cb'});

— AngularJS Developer Guide - Migrating from V1.5 to V1.6

See also:

• AngularJS Error Reference - $http:badjsonp Bad JSONP Request
• AngularJS $http Service API Reference - $http.jsonp

---

Further Changes in AngularJS V1.6

Due to 6476af, all JSONP requests now require the URL to be trusted as a resource URL. There are two approaches to trust a URL:

1. Whitelisting with the $sceDelegateProvider.resourceUrlWhitelist() method. You configure this list in a module configuration block:

   appModule.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhiteList([
         // Allow same origin resource loads.
         'self',
         // Allow JSONP calls that match this pattern
        'https://some.dataserver.com/**.jsonp?**'
     ]);
   }]);
   

2. Explicitly trusting the URL via the $sce.trustAsResourceUrl(url) method. You can pass a trusted object instead of a string as a URL to the $http service:

   var promise = $http.jsonp($sce.trustAsResourceUrl(url));
   

— AngularJS Developer Guide - Migrating from V1.5 to V1.6

See also:

• AngularJS Error Reference - $sce:insecurl Untrusted Source Blocked

• AngularJS $http Service API Reference - $http.jsonp