Sejak meningkatkan ke kandidat rilis Angular 2 terbaru, imgtag saya :

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

melakukan kesalahan browser:

PENGECUALIAN ASLI: Kesalahan: nilai tidak aman digunakan dalam konteks URL sumber daya

Nilai urlnya adalah:

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

EDIT:

Saya telah mencoba saran yang dibuat dalam solusi lain bahwa pertanyaan ini seharusnya merupakan duplikat dari tetapi saya mendapatkan kesalahan yang sama.

Saya telah menambahkan kode berikut ke pengontrol:

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

Saya masih mendapatkan pesan kesalahan yang sama.

EDIT2:

Saya juga telah mengubah html menjadi:

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

Saya masih mendapatkan pesan kesalahan yang sama

Saya menggunakan rc.4 dan metode ini berfungsi untuk 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);
  }
}

Di HTML:

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

Menggunakan fungsi akan memastikan bahwa nilainya tidak berubah setelah Anda membersihkannya. Ketahuilah juga bahwa fungsi sanitasi yang Anda gunakan bergantung pada konteksnya.

Untuk gambar, bypassSecurityTrustUrlakan berfungsi tetapi untuk kegunaan lain Anda perlu merujuk ke dokumentasi :

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

Pipa

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

Template

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

Itu dia!

  // 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');
  }

Cara paling elegan untuk memperbaikinya: gunakan pipa. Ini contoh (blog saya). Jadi Anda kemudian dapat menggunakan url | safepipa untuk melewati keamanan.

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

Lihat dokumentasi di npm untuk detailnya: https://www.npmjs.com/package/safe-pipe

Gunakan Pipa Aman untuk memperbaikinya.

• Buat pipa yang aman jika Anda belum punya.

  ng gc pipa aman

• tambahkan pipa Aman di app.module.ts

  deklarasi: [SafePipe]

• nyatakan pipa aman di ts Anda

Impor Pembersih Dom dan Pipa Aman untuk mengakses url dengan aman

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

- Tambahkan aman dengan url src

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

Anda bisa mengekspos pembersih ke tampilan, atau mengekspos metode yang meneruskan panggilan ke bypassSecurityTrustUrl

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

Angular memperlakukan semua nilai sebagai tidak tepercaya secara default. Saat nilai dimasukkan ke dalam DOM dari template, melalui properti, atribut, gaya, pengikatan kelas, atau interpolasi, Angular membersihkan dan melepaskan nilai yang tidak tepercaya.

Jadi jika Anda memanipulasi DOM secara langsung dan memasukkan kontennya, Anda perlu membersihkannya jika tidak, Angular akan mengalami kesalahan.

Saya telah membuat pipa SanitizeUrlPipe untuk ini

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

dan inilah cara Anda dapat menggunakan

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

Jika Anda ingin menambahkan HTML, SanitizeHtmlPipe dapat membantu

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

Baca lebih lanjut tentang keamanan sudut di sini .

Saya biasanya menambahkan safe pipekomponen terpisah yang dapat digunakan kembali sebagai berikut

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

Anda dapat mengatur gambar sebagai gambar latar belakang untuk menghindari unsafe urlkesalahan:

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

CSS:

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