Angular 1.5.8 - 错误：谷歌地图网址上的 [$sce:unsafe]答案

【问题标题】：Angular 1.5.8 - Error: [$sce:unsafe] on google maps urlAngular 1.5.8 - 错误：谷歌地图网址上的 [$sce:unsafe]
【发布时间】：2016-11-23 23:08:58
【问题描述】：

我在尝试显示谷歌地图时遇到上述错误

查看

<div class="main" ng-repeat="item in Ctrl.Opportunities.PagedData.Results">                   
    <div class="pull-right" id="GoogleMaps" ng-show="Ctrl.GetSafeUrl('https://www.google.com/maps/embed/v1/place?q={{item.PostCode}}&key=mykey')" />
        <!--////// Simple Embeded API Using PostCode //////////--> 
        <iframe width="200" height="200" frameborder="0" style="border:0" ng-src="{{Ctrl.SafeURL}}"  allowfullscreen></iframe>
    </div>
</div>

控制器 - 使用 Typescript

class OpportunityListController extends BaseEmployedController {
    static controllerId = 'opportunityListController';
    static $inject = [ '$http', '$sce', OpportunityService.serviceId
    ];

    public Opportunities: O.Employed.OpportunityListResult;
    public MapsURL: string = "";
    private SafeURL: string = "";

  constructor(protected $modal: ng.ui.bootstrap.IModalService,
        protected $http: ng.IHttpService,
        private $sce: ng.ISCEService,
        private OpportunityService: OpportunityService,
    ) {

      this.Opportunities = new O.Employed.OpportunityListResult();  
  }

  public GetSafeUrl(Url: string) {
    if (Url) {
       this.SafeURL = this.$sce.getTrustedUrl(Url);
     }
    return this.SafeURL;
    }
}

我正在使用 GetSafeUrl() 方法，因为之前我遇到了 $interpolate:noconcat 错误

更新

我尝试执行 Niels 提供的建议：

将我的 url 分配更改为 this.$sce.trustAsResourceUrl(Url);，但项目加载失败，我收到 414 Request-URI Too Large

我在 _Layout.cshtml 中添加了 Content-Security-Policy 元标记，但出现了各种错误

拒绝应用内联样式，因为它违反了以下内容内容安全策略指令：“default-src *”。无论是 'unsafe-inline' 关键字，一个哈希 ('sha256-ZDjCdTstFUpLDovBdF6MXbSPB35alPr6sy4CYtyHSA4=')，或随机数 ('nonce-...') 是启用内联执行所必需的。另请注意 'style-src' 没有明确设置，所以 'default-src' 被用作后备。

加上同样的“$sce:unsafe”错误

但是，我认为我出错的地方在于我使用以下方法的方式，该方法仍在 angular.js 中。

SceDeleagateProvider

angular.module('myApp', []).config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
     // Allow same origin resource loads.
     'self',
     // Allow loading from our assets domain.  Notice the difference between * and **.
    'https://www.google.com/maps/embed/v1/place**'
    ]);

相反，我尝试将"$sceDelegateProvider" 注入我的控制器并将其值分配为 private $sceDelegateProvider: ng.ISCEDelegateProvider，在控制器构造函数中

然后我创建了以下方法

 public SetSCEDelegateProvider($sceDelegateProvider) {
        this.$sceDelegateProvider.resourceUrlWhitelist(["self",
            "https://www.google.com/maps/embed/v1/place**"
        ]);
    }

这仍然不起作用。

我应该如何正确实施 $sceDelegateProvider 服务？

【问题讨论】：

标签： html angularjs google-maps typescript

【解决方案1】：

试试

this.$sce.trustAsResourceUrl(Url);

否则您可能必须在 index.html 中添加 Content-Security-Policy 元标记。比如：

<meta http-equiv="Content-Security-Policy" content="
    default-src *;
    font-src 'self' data: http://*.gstatic.com;
    script-src 'self' http://*.googleapis.com;
    style-src 'self' blob: http://*.googleapis.com;
    media-src * 'self' data:;
    img-src 'self' data: http://*.gstatic.com http://*.googleapis.com
">

【讨论】：

谢谢 Niels，src 参数从何而来？这和我的 url 参数一样吗？
@HitTheSky 是的，刚刚进行了更改。与您的网址相同。
谢谢，我已经尝试了您的建议并进行了相应的更新。