En son Angular 2 sürüm adayına yükselttiğimden beri imgetiketlerim:

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

bir tarayıcı hatası veriyor:

ORİJİNAL İSTİSNA: Hata: kaynak URL bağlamında kullanılan güvenli olmayan değer

URL'nin değeri:

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

DÜZENLE:

Diğer çözümde yapılan, bu sorunun bir kopyası olması gerektiği önerisini denedim ama aynı hatayı alıyorum.

Denetleyiciye aşağıdaki kodu ekledim:

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

Hala aynı hata mesajını alıyorum.

DÜZENLEME2:

Ayrıca html'yi şu şekilde değiştirdim:

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

Hala aynı hata mesajını alıyorum

Rc.4 kullanıyorum ve bu yöntem ES2015 (ES6) için çalışıyor:

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

HTML'de:

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

Bir işlevi kullanmak, onu dezenfekte ettikten sonra değerin değişmemesini sağlar. Ayrıca, kullandığınız temizleme işlevinin bağlama bağlı olduğunu da unutmayın.

Görüntüler bypassSecurityTrustUrliçin işe yarayacak, ancak diğer kullanımlar için belgelere bakmanız gerekiyor :

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

Boru

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

Şablon

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

Bu kadar!

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

Bunu düzeltmenin en zarif yolu: boru kullanmak. İşte örnek (blogum). Böylece url | safe, güvenliği atlamak için basitçe boruyu kullanabilirsiniz .

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

Ayrıntılar için npm'deki belgelere bakın: https://www.npmjs.com/package/safe-pipe

Düzeltmek için Güvenli Boru kullanın.

• Eğer yoksa güvenli bir boru oluşturun.

  ng gc boru kasası

• app.module.ts'de Güvenli kanal ekleyin

  bildirimler: [SafePipe]

• ts'nizde güvenli boru beyan edin

URL'ye güvenle erişmek için Dom Sanitizer ve Safe Pipe'ı içe aktarın

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

- src url ile kasa ekleyin

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

Sanitizer'ı görünüme maruz bırakabilir veya çağrıyı bypassSecurityTrustUrl'ye yönlendiren bir yöntem gösterebilirsiniz.

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

Açısal, tüm değerleri varsayılan olarak güvenilmez olarak ele alır. Özellik, öznitelik, stil, sınıf bağlama veya enterpolasyon yoluyla bir şablondan DOM'a bir değer eklendiğinde, Angular güvenilir olmayan değerleri temizler ve bunlardan kaçar.

Dolayısıyla, DOM'u doğrudan işliyorsanız ve içeriğini ekliyorsanız, onu temizlemeniz gerekir, aksi takdirde Angular hatalardan geçer.

Ben boru oluşturduk SanitizeUrlPipe bunun için

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

ve bu nasıl kullanabilirsin

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

HTML eklemek istiyorsanız, SanitizeHtmlPipe yardımcı olabilir

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

Açısal güvenlik hakkında daha fazlasını buradan okuyun .

Genellikle safe pipeaşağıdaki gibi ayrı yeniden kullanılabilir bileşen eklerim

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

unsafe urlHatayı önlemek için görüntüyü arka plan görüntüsü olarak ayarlamak mümkündür :

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

CSS:

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