<img>: небезопасное значение, используемое в контексте URL ресурса

Ответ 1

Я использую rc.4, и этот метод работает для 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);
  }
}

В HTML:

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

Использование функции гарантирует, что после ее дезактивации значение не изменится. Также имейте в виду, что используемая функция санитарии зависит от контекста.

Для изображений bypassSecurityTrustUrl будет работать, но для других целей вам потребуется обратиться к документации:

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

Ответ 2

Обновление:

Я больше не предлагаю ниже методы. Сейчас я всегда использую pipeу, и в других ответах есть несколько примеров. Как только вы начнете использовать pipeу, вы будете использовать ее во всех ваших будущих проектах. Я создаю одну pipeу для bypassSecurityTrustResourceUrl и одну pipeу для bypassSecurityTrustHtml.

Метод 1:

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

...

constructor(public sanitizer: DomSanitizer){}

... тогда в HTML:

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

Метод 2:

Сначала я должен был выполнить санитарную обработку в коде, потому что Vimeo не будет максимизировать на Edge

Это всего лишь пример, суть в том, что сначала санируйте в коде, как вам нравится

Интерфейс объекта:

import { SafeUrl } from '@angular/platform-browser';
export class Book {
   constructor(public title: string, public videoURL?: SafeUrl) {}
}

Служба (как пример):

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Book } from '../features/models/book';
import { DomSanitizer } from '@angular/platform-browser';

@Injectable()

export class BookService {
    constructor(
        private sanitizer: DomSanitizer
    ) {}
    getBooks (): Observable<Book[]> {    
        return new Observable( observer => {
            observer.next(
                    new Book(
                        'Some Book Title', 
                        this.sanitizer.bypassSecurityTrustResourceUrl(
                           'https://player.vimeo.com/video/12345678'
                        )
                    ),
                    new Book(
                        'Second BookTitle',
                        this.sanitizer.bypassSecurityTrustResourceUrl(
                            'https://player.vimeo.com/video/91011121'
                        )
                    )
                )
            });

    }
}

Ответ 3

Самый элегантный способ исправить это: использовать трубу. Вот пример (мой блог). Таким образом, вы можете просто использовать url | safe url | safe труба, чтобы обойти безопасность.

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

За подробностями обращайтесь к документации по npm: https://www.npmjs.com/package/safe-pipe.

Ответ 4

Либо вы можете подвергнуть дезинфицирующее средство представлению, либо выставить метод, который переадресует вызов обходному_существуетSecurityTrustUrl

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

Ответ 5

Используйте Safe Pipe, чтобы исправить это.

• Создайте безопасную трубу, если у вас ее нет.

  NG GC трубы безопасны

• добавить Safe pipe в app.module.ts

  декларации: [SafePipe]

• объявить безопасную трубу в тс

Импортируйте Dom Sanitizer и Safe Pipe для безопасного доступа к URL.

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

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

Ответ 6

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.

Ответ 7

Я обычно добавляю отдельный компонент многоразового использования для safe pipe следующим образом

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