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

我与影子孤独终老i 提交于 2019-12-03 16:38:07

$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:


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:

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!