Angular2 - Angular2を使用してGoogleインスタントプレビューを実装するにはどうすればよいですか？

Question

AngularプロジェクトでGoogleインスタントプレビューを実装しようとしています。しかし、iframeタグを使用すると、何も表示されません。

htmlコード -

<div class="text-result" *ngIf="Display('all')"> 
       <div *ngFor="let item of items$|async" class="result"> 
        <div class="title"> 
         <a href="{{item.link}}">{{item.title}}</a> 
         <div class="box"> 
          <iframe src="{{item.link}}" width="500px" height="500px"></iframe> 
         </div> 
        </div> 
        <div class="link"> 
         <p>{{item.link}}</p> 
        </div> 
        <div> 
         {{item.pubDate|date:'fullDate'}} 
        </div> 
       </div> 
      </div> 

CSSコード -

.box{ 
    display: none; 
    width: 100%; 
} 

a:hover + .box,.box:hover{ 
    display: block; 
    position: relative; 
    z-index: 100; 
} 

Answer 1

XSS攻撃を回避するためには、角度はdynamicly IFRAMEのsrc属性に結合することはできません。 DomSanitizerクラスを使用してURLを許可することができます。 DomSanitizerを注入し、bypassSecurityTrustResourceUrlメソッドを使用する必要があります。

constructor(domsanitizer: DomSanitizer) { 
    let url = "http://some-random-url.tld"; 
    this.myUrl = this.domsanitizer.bypassSecurityTrustResourceUrl(url); 
} 

とテンプレートで：

<iframe [src]="myUrl"></iframe>