Angular 1.6.3不允许1.5.8中允许的JSONP请求

Question

Angular 1.6.3不允许允许的请求,1.5.8我收到此错误:

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

完整错误可在此处获得.

我想升级我的角度版本1.6.3以获得最新和最好的,但我依赖于这个API.有没有办法让我将其标记为可信API或使用此API的其他方式？这两个版本之间的区别是什么？

这是我试图运行的代码:

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();
}]);

整个存储库可在此处获取:https://github.com/LukeSchlangen/angular-petfinder-api

Answer 1

$http.jsonp AngularJS V1.6的变化

现在,将通过jsonpCallbackParamconfig值指定用于将JSONP回调传输到服务器的查询参数,而不是使用JSON_CALLBACK占位符.

• JSON_CALLBACK在JSONP请求URL中的任何使用都将导致错误.
• 任何提供与jsonpCallbackParamconfig属性给出的名称相同的参数的请求都将导致错误.

这是为了防止来自应用程序的响应的恶意攻击,无意中允许使用不受信任的数据来生成回调参数.

由于petfinder API使用默认值"callback",只需将其从查询字符串中删除:

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:

由于fb6634,您不能再在JSONP请求中使用JSON_CALLBACK占位符.相反,您必须提供将通过jsonpCallbackParam配置对象的属性传递回调的查询参数的名称,或者通过$http.defaults.jsonpCallbackParam属性提供应用程序范围"callback"的默认情况下的名称.

之前:

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

后:

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

- AngularJS开发人员指南 - 从V1.5迁移到V1.6

也可以看看:

• AngularJS错误参考 - $http:badjsonp 错误的JSONP请求
• AngularJS $ http服务API参考 - $ http.jsonp

AngularJS V1.6的进一步变化

由于6476af,所有JSONP请求现在都要求将URL作为资源URL进行信任.信任URL有两种方法:

1. 用该$sceDelegateProvider.resourceUrlWhitelist()方法列入白名单.您可以在模块配置块中配置此列表:

   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. 通过该$sce.trustAsResourceUrl(url)方法明确信任URL .您可以将受信任对象而不是字符串作为URL传递给$ http服务:

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

- AngularJS开发人员指南 - 从V1.5迁移到V1.6

也可以看看:

• AngularJS错误参考 - $sce:insecurl不受信任的源被阻止

• AngularJS $ http服务API参考 - $ http.jsonp