안전하지 않은 값 예외를 발생시키지 않고 <iframe src =“…”>를 설정하는 방법은 무엇입니까?

iframe src속성 설정과 관련된 자습서를 작성 중입니다 .

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

예외가 발생합니다.

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

이미 [src]성공하지 못한 채 바인딩을 사용해 보았습니다 .

v8 업데이트

아래 답변은 효과가 있지만 응용 프로그램을 XSS 보안 위험에 노출시킵니다! . 을 사용하는 대신 사용 this.sanitizer.bypassSecurityTrustResourceUrl(url)하는 것이 좋습니다this.sanitizer.sanitize(SecurityContext.URL, url)

최신 정보

대한 RC.6 ^ 버전을 사용 DomSanitizer

플 런커

그리고 좋은 옵션은 순수한 파이프를 사용하는 것입니다.

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받는 declarationsAppModule의 배열입니다. ( 문서에 표시된대로 )

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

html

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

플 런커

embed태그 를 사용하면 흥미로울 수 있습니다.

• angular2 rc.6을 사용하여 어떻게 pdf를 표시하는 embed html 태그에서 살균하지 않는지

구 버전 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';

플 런커 샘플

이것은 나를 위해 작동합니다.

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

이것은 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>

그게 다야 !!!

constructor(
 public sanitizer: DomSanitizer, ) {

 }

나는 4 시간 동안 고군분투했다. 문제는 img 태그에있었습니다. 대괄호를 사용하여 'src'를 사용하는 경우 ex : [src]. 이 각도 표현식 {{}}을 (를) 사용할 수 없습니다. 아래의 객체 예제에서 직접 제공하십시오. 각도 표현 {{}}을 제공하면 보간 오류가 발생합니다.

1. 먼저 ngFor를 사용하여 국가를 반복했습니다.

   *ngFor="let country of countries"
   

2. 두 번째로 img 태그에 넣습니다. 이거 야.

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

이 문제도 발생했지만 각도 모듈에서 안전 파이프를 사용하려면 safe-pipe npm 패키지를 설치했습니다 . 여기에서 찾을 수 있습니다 . 참고로, 이것은 Angular 9.1.3에서 작동했지만 다른 버전의 Angular에서는 시도하지 않았습니다. 단계별로 추가하는 방법은 다음과 같습니다.

1. npm install safe-pipe 또는 yarn add safe-pipe를 통해 패키지를 설치하십시오. 이렇게하면 의존성에 대한 참조가 package.json 파일에 저장됩니다.이 파일은 이미 새로운 Angular 프로젝트를 시작하여 가지고 있어야합니다.

2. SafePipeModule 모듈을 Angular 모듈 파일의 NgModule.imports에 다음과 같이 추가하십시오.

   import { SafePipeModule } from 'safe-pipe';
   
   @NgModule({
       imports: [ SafePipeModule ]
   })
   export class AppModule { }
   
   

3. 다음과 같이 NgModule로 가져 오는 각도 컴포넌트의 템플릿에있는 요소에 안전 파이프를 추가하십시오.

<element [property]="value | safe: sanitizationType"></element>

4. 다음은 html 요소에있는 safePipe의 특정 예입니다.

<div [style.background-image]="'url(' + pictureUrl + ')' | safe: 'style'" class="pic bg-pic"></div>
<img [src]="pictureUrl | safe: 'url'" class="pic" alt="Logo">
<iframe [src]="catVideoEmbed | safe: 'resourceUrl'" width="640" height="390"></iframe>
<pre [innerHTML]="htmlContent | safe: 'html'"></pre>

나는 일반적으로 다음과 같이 별도의 안전한 파이프 재사용 가능 구성 요소를 추가합니다

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

축하합니다! ¨ ^^ 쉽고 효율적인 솔루션이 있습니다. 예!

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

{{video.url}}이 아닌 src "video.url"대신 [attr.src]

큰;)