角1.5.8 - 錯誤：[$ SCE：不安全]谷歌地圖網址

我正試圖顯示谷歌地圖

查看時出現上述錯誤

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

控制器 - 使用手稿

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錯誤

更新

我試圖實現由尼爾斯提供這樣的建議：

改變了我的網址分配this.$sce.trustAsResourceUrl(Url);但項目加載失敗，我收到了414請求URI太大

我加了內容安全，政策元標記來_Layout.cshtml但得到的各種錯誤

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src *". Either the 'unsafe-inline' keyword, a hash ('sha256-ZDjCdTstFUpLDovBdF6MXbSPB35alPr6sy4CYtyHSA4='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

加上相同「$ SCE：不安全」錯誤

不過，我覺得在那裏我已經錯是，我使用下面的方法，它仍然是在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**" 
     ]); 
    }

This依然不起作用。

我應該如何正確實施$ sceDelegateProvider服務？

來源

2016-11-22 HitTheSky

嘗試

this.$sce.trustAsResourceUrl(Url);

否則，你也許需要添加內容安全，政策meta標籤中的index.html。例如：

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

來源

2016-11-22 14:29:12

感謝Niels，src參數來自哪裏？這與我的網址參數是一樣的嗎？ – HitTheSky

@HitTheSky是的，只是做了一個改變。這和你的網址是一樣的。 –

謝謝，我已經嘗試了您的建議並進行了相應更新。 – HitTheSky

角1.5.8 - 錯誤：[$ SCE：不安全]谷歌地圖網址

回答

相關問題