Angular 1.6.3 is not allowing a JSONP request that

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

What is the difference between these two versions that is causing this?

Sanity checks because JSONP is a really terrible, no good, very bad idea. At least if you care about security. You are letting a 3rd party determine what arbitrary code to execute in your application. Which is a really terrible, no good, very bad idea.

Made all the worse by the fact the site is being accessed over HTTP so...

The somewhat better solution these days is to use CORS which Angular should have no trouble with, but your REST API might (depending on when it was written/last updated). So, ideally you would port away from using JSONP in your client side code, handling the forwarding to the proper callback yourself.

Answer 2

$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