Angular 1.5.8 - Fehler: [$ sce: unsicher] auf Google Maps url

Question

ich den obigen Fehler erhalten, wenn eine Google-Karte

Ansicht

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

-Controller angezeigt werden versuchen - mit Typoskript

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

Am mit der Methode GetSafeUrl(), da vorher war ich ein $ interpolieren bekommen: noconcat

Fehler

aktualisieren

ich versucht, die Vorschläge von Niels als solche zur Verfügung gestellt zu implementieren:

-this.$sce.trustAsResourceUrl(Url); meine url Zuordnung geändert, aber die Elemente nicht geladen werden, und ich erhielt eine 414 Request-URI Too Large

ich habe Content-Security-Politik Meta-Tag meiner _Layout.cshtml aber verschiedene Fehler

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.

erhalten 0

plus die gleichen „$ sce: unsicher“ Fehler

Aber ich denke, wo ich falsch habe, ist in dem Weg gegangen, dass ich die Methode unten verwenden, die noch in Angularjs war.

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**' 
    ]); 

Stattdessen habe ich versuche "$sceDelegateProvider" in meinen Controller zu injizieren und ordnet es Wert ist, als private $sceDelegateProvider: ng.ISCEDelegateProvider, in dem Controller-Konstruktor

Ich habe erstellt dann die folgende Methode

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

Dies funktioniert aber auch nicht.

Wie sollte ich den Dienst $ sceDelegateProvider korrekt implementieren? Versuchen

Answer 1

this.$sce.trustAsResourceUrl(Url); 

Ansonsten vielleicht haben Sie den Content-Sicherheitsrichtlinien-Meta-Tag in index.html hinzuzufügen haben. Etwas wie:

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