Seit dem Upgrade auf den neuesten Angular 2-Release-Kandidaten sind meine imgTags:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

werfen einen Browserfehler:

ORIGINAL AUSNAHME: Fehler: Unsicherer Wert, der in einem Ressourcen-URL-Kontext verwendet wird

Der Wert der URL ist:

http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg

BEARBEITEN:

Ich habe den in der anderen Lösung gemachten Vorschlag ausprobiert, dass diese Frage ein Duplikat sein soll, aber ich erhalte den gleichen Fehler.

Ich habe dem Controller den folgenden Code hinzugefügt:

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [[NavController], [App], [MenuController], [DomSanitizationService]];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;

    this.theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }

Ich erhalte immer noch die gleiche Fehlermeldung.

EDIT2:

Ich habe auch das HTML geändert in:

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

Ich erhalte immer noch die gleiche Fehlermeldung

Ich verwende rc.4 und diese Methode funktioniert für ES2015 (ES6):

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [NavController, App, MenuController, DomSanitizationService];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;    
  }

  photoURL() {
    return this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }
}

Im HTML:

<iframe [src]='photoURL()' width="640" height="360" frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

Durch die Verwendung einer Funktion wird sichergestellt, dass sich der Wert nach der Bereinigung nicht ändert. Beachten Sie auch, dass die von Ihnen verwendete Desinfektionsfunktion vom Kontext abhängt.

Funktioniert für Bilder, bypassSecurityTrustUrlfür andere Zwecke müssen Sie jedoch auf die Dokumentation verweisen :

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

Rohr

// Angular
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

/**
 * Sanitize HTML
 */
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  /**
   * Pipe Constructor
   *
   * @param _sanitizer: DomSanitezer
   */
  // tslint:disable-next-line
  constructor(protected _sanitizer: DomSanitizer) {
  }

  /**
   * Transform
   *
   * @param value: string
   * @param type: string
   */
  transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        return this._sanitizer.bypassSecurityTrustHtml(value);
    }
  }
}

Vorlage

{{ data.url | safe:'url' }}

Das ist es!

  // Public properties
  itsSafe: SafeHtml;

  // Private properties
  private safePipe: SafePipe = new SafePipe(this.domSanitizer);

  /**
   * Component constructor
   *
   * @param safePipe: SafeHtml
   * @param domSanitizer: DomSanitizer
   */
  constructor(private safePipe: SafePipe, private domSanitizer: DomSanitizer) {
  }

  /**
   * On init
   */
  ngOnInit(): void {
    this.itsSafe = this.safePipe.transform('<h1>Hi</h1>', 'html');
  }

Der eleganteste Weg, dies zu beheben: Verwenden Sie ein Rohr. Hier ist ein Beispiel (mein Blog). Sie können dann einfach url | safePipe verwenden, um die Sicherheit zu umgehen.

<iframe [src]="url | safe"></iframe>

Weitere Informationen finden Sie in der Dokumentation zu npm: https://www.npmjs.com/package/safe-pipe

Verwenden Sie Safe Pipe, um das Problem zu beheben.

• Erstellen Sie ein sicheres Rohr, wenn Sie keine haben.

  ng gc Rohr sicher

• Fügen Sie Safe Pipe in app.module.ts hinzu

  Erklärungen: [SafePipe]

• deklarieren Sie sicheres Rohr in Ihrem ts

Importieren Sie Dom Sanitizer und Safe Pipe, um sicher auf die URL zuzugreifen

import { Pipe, PipeTransform} from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({ name: 'safe' })

export class SafePipe implements PipeTransform {

constructor(private sanitizer: DomSanitizer) { }
transform(url) {
 return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

- Safe mit src url hinzufügen

<iframe width="900" height="500" [src]="link | safe"/>

Entweder können Sie das Desinfektionsmittel für die Ansicht verfügbar machen oder eine Methode verfügbar machen, die den Aufruf an bypassSecurityTrustUrl weiterleitet

<img class='photo-img' [hidden]="!showPhoto1" 
    [src]='sanitizer.bypassSecurityTrustUrl(theMediaItem.photoURL1)'>

Angular behandelt alle Werte standardmäßig als nicht vertrauenswürdig. Wenn ein Wert aus einer Vorlage über eine Eigenschaft, ein Attribut, einen Stil, eine Klassenbindung oder eine Interpolation in das DOM eingefügt wird, bereinigt Angular nicht vertrauenswürdige Werte und entgeht ihnen.

Wenn Sie also DOM direkt bearbeiten und Inhalte einfügen, müssen Sie es bereinigen, da Angular sonst Fehler verursacht.

Ich habe die Pipe SanitizeUrlPipe dafür erstellt

import { PipeTransform, Pipe } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Pipe({
    name: "sanitizeUrl"
})
export class SanitizeUrlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustResourceUrl(v);
    }
}

und so können Sie verwenden

<iframe [src]="url | sanitizeUrl" width="100%" height="500px"></iframe>

Wenn Sie HTML hinzufügen möchten, kann SanitizeHtmlPipe helfen

import { PipeTransform, Pipe } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Pipe({
    name: "sanitizeHtml"
})
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }
}

Lesen Sie mehr über Winkel Sicherheit hier .

Normalerweise füge ich eine separate safe pipewiederverwendbare Komponente wie folgt hinzu

# Add Safe Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'mySafe'})
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {
    }

    public transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

# then create shared pipe module as following 

import { NgModule } from '@angular/core'; 
import { SafePipe } from './safe.pipe';
@NgModule({
    declarations: [
        SafePipe
    ],
    exports: [
        SafePipe
    ]
})
export class SharedPipesModule {
}

# import shared pipe module in your native module

@NgModule({
    declarations: [],
    imports: [
        SharedPipesModule,
    ],
})
export class SupportModule {
}

<!-------------------
call your url (`trustedUrl` for me) and add `mySafe` as defined in Safe Pipe
---------------->
<div class="container-fluid" *ngIf="trustedUrl">
    <iframe [src]="trustedUrl | mySafe" align="middle" width="100%" height="800" frameborder="0"></iframe>
</div>

import {DomSanitizationService} from '@angular/platform-browser';
@Component({
 templateUrl: 'build/pages/veeu/veeu.html'
 })
  export class VeeUPage {
     trustedURL:any;
      static get parameters() {
               return [NavController, App, MenuController, 
              DomSanitizationService];
        }
      constructor(nav, app, menu, sanitizer) {
        this.app = app;
        this.nav = nav;
        this.menu = menu;
        this.sanitizer = sanitizer;  
        this.trustedURL  = sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
        } 
 }



 <iframe [src]='trustedURL' width="640" height="360" frameborder="0"
   webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>


User property binding instead of function.

Es ist möglich, ein Bild als Hintergrundbild festzulegen, um unsafe urlFehler zu vermeiden :

<div [style.backgroundImage]="'url(' + imageUrl + ')'" class="show-image"></div>

CSS:

.show-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;        
}