Как установить <iframe src="...">, не вызывая исключение "небезопасное значение"?

Ответ 1

Обновление v8

Ниже приведены ответы, но подвергает ваше приложение угрозам безопасности XSS!. Вместо использования this.sanitizer.bypassSecurityTrustResourceUrl(url) рекомендуется использовать this.sanitizer.sanitize(SecurityContext.URL, url)

Обновление

Для RC.6 ^ версии используйте DomSanitizer

Plunker

И хорошим вариантом для этого является использование чистой pipes:

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

не забудьте добавить свой новый SafePipe в массив declarations AppModule. (как видно из документации)

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

HTML

<iframe width="100%" height="300" [src]="url | safe"></iframe>

Plunker

Если вы используете тег embed, это может быть вам интересно:

• как с помощью angular2 rc.6 отключить sanitize для вставки html-тега, который отображает pdf

Старая версия RC.5

Вы можете использовать DomSanitizationService следующим образом:

export class YourComponent {
  url: SafeResourceUrl;
  constructor(sanitizer: DomSanitizationService) {
    this.url = sanitizer.bypassSecurityTrustResourceUrl('your url');
  }
}

А затем привяжите к url в своем шаблоне:

<iframe width="100%" height="300" [src]="url"></iframe>

Не забудьте добавить следующий импорт:

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

Образец плунжера

Ответ 2

Это работает для меня.

import { Component,Input,OnInit} from '@angular/core';
import {DomSanitizer,SafeResourceUrl,} from '@angular/platform-browser';

@Component({
    moduleId: module.id,
    selector: 'player',
    templateUrl: './player.component.html',
    styleUrls:['./player.component.scss'],

})
export class PlayerComponent implements OnInit{
    @Input()
    id:string; 
    url: SafeResourceUrl;
    constructor (public sanitizer:DomSanitizer) {
    }
    ngOnInit() {
        this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.id);      
    }
}

Ответ 3

Это работает мне до Angular 5.2.0

sarasa.Component.ts

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-sarasa',
  templateUrl: './sarasa.component.html',
  styleUrls: ['./sarasa.component.scss']
})

export class Sarasa implements OnInit {
  @Input()
  url: string = "https://www.mmlpqtpkasjdashdjahd.com";
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

}

sarasa.Component.html

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

вот и все люди !!!

Ответ 4

constructor(
 public sanitizer: DomSanitizer, ) {

 }

Я боролся в течение 4 часов. проблема была в теге img. Когда вы используете квадратную скобку для 'src', например: [src]. Вы не можете использовать это угловое выражение {{}}. Вы просто даете непосредственно из примера объекта ниже. если вы даете угловое выражение {{}}. Вы получите ошибку интерполяции.

1. Сначала я использовал ngFor для итерации стран

   *ngFor="let country of countries"
   

2. во-вторых, вы положили это в тег IMG. это оно.

   <img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
   height="20" width="20" alt=""/>
   

Ответ 5

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

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

Ответ 6

Поздравляем! ¨ ^^ У меня есть легкое и эффективное решение для вас, да!

<iframe width="100%" height="300" [attr.src]="video.url"></iframe

[attr.src] вместо src "video.url", а не {{video.url}}

Отлично;)