javascript - 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

完整错误可用here .

我想将我的 Angular 版本升级到 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 的变化

将用于将 JSONP 回调传输到服务器现在通过 jsonpCallbackParam 配置值指定，而不是使用 JSON_CALLBACK 占位符。

• 在 JSONP 请求 URL 中使用 JSON_CALLBACK 都会导致错误。
• 任何提供与给定名称同名的参数的请求通过 jsonpCallbackParam 配置属性将导致错误。

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

由于 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:

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

另见:

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

---

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

另见:

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

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