4

Angular1.6.3不允许允许的请求，1.5.8我收到此错误：

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

完整的错误可在此处获得。

我想升级我的 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

4

2 回答 2

7

$http.jsonpAngularJS V1.6 的变化

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

  • 在 JSONP 请求 URL 中的任何使用JSON_CALLBACK都会导致错误。
  • 任何提供与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 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

也可以看看：

于 2017-03-10T05:33:53.680 回答
4

导致这种情况的这两个版本之间有什么区别？

健全性检查，因为 JSONP 是一个非常糟糕的、不好的、非常糟糕的主意。至少如果您关心安全性。您让第 3 方决定在您的应用程序中执行哪些任意代码。这是一个非常糟糕的、不好的、非常糟糕的主意。

由于该网站是通过 HTTP 访问的，所以情况变得更糟了……

这些天更好的解决方案是使用Angular 应该没有问题的CORS，但是您的 REST API 可能（取决于它的编写时间/上次更新时间）。因此，理想情况下，您将不再在客户端代码中使用 JSONP，而是自己处理转发到正确的回调。

于 2017-03-09T22:28:16.823 回答