如何在 angular 2 中显示来自 wordpress rest api 内容的 iframe

Question

我在 angular 2 中内置了一个自定义前端应用程序来显示 wordpress posts。

我按照记录调用其余 api 以获得我想要的 post

/wp-json/wp/v2/posts/6

这给了我用来填充页面的对象，对象内部是关键内容，其中包含写入 post 的所有内容，包括所有嵌入式媒体。

content: {rendered: "<iframe src="xxx"></iframe> lorem ipsum <img src="xxx"/>", protected: false}

我按照

的方式在 angular 中显示它

{{data.content.rendered}}

这将正确显示文本和图像，但不会呈现 iframe，我将在控制台中收到错误消息。

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

我看了一圈，有人提到了 DomSanitizer 来解决这个问题，这是唯一可行的方法吗？这种方法有什么安全风险。

或者有什么方法可以修改 wordpress 以发送回嵌入在 post 中的链接在他们自己的对象中？

编辑 - 在 https://github.com/angular/angular/issues/10145 and using the angular documentation at https://angular.io/api/platform-browser/DomSanitizer 检查问题后，我仍然遇到 iframe 不显示的问题。 domsanitizer 将我的显示对象包装在另一个名为 changingThisBreaksApplicationSecurity 的对象中，但它没有显示 iframe

编辑 2 - 组件

import { Component, OnInit, Input } from '@angular/core';
import {SharedService} from '../services/shared.service';
import {Location} from '@angular/common';
import {Router} from '@angular/router';
import {LocalStorageService} from 
'../services/local.service';
import { ActivatedRoute } from '@angular/router';
import { NgZone } from '@angular/core';
import { ApiService } from '../services/api.service';
@Component({
  selector: 'app-page',
  templateUrl: 'page.template.html',
  styleUrls: ['page.scss'],
  providers: []
})
export class PageComponent implements OnInit {
pageData;
  loading = true;
  private sub: any;
  hide = false;

  constructor(private sharedService: SharedService, private local: LocalStorageService, private api:  ApiService,  private router: Router, private _location: Location) { }

  ngOnInit() {             

         this.pageData = this.sharedService.pageData ?  this.sharedService.pageData : this.local.getItem('pageData')

      if(this.pageData){
             this.api.getWPData(this.pageData.id)
                  .subscribe((data) =>{
                    this.pageData = data;

                    this.loading = false;


                  },
                  err =>{
                    console.log('There was an error please contact the system administrator');
                    this.loading=false;
                  })


  }
  toggleSynopsis = () =>{
       this.hide = !this.hide;
   }
   testfun = () =>{
      this.router.navigate(['/']);
  }
}

模板

     <div *ngIf="!loading">
     <!-- <app-tiles></app-tiles> -->
    <div class="container main-text" *ngIf="pageData">
        <div class="content">
            <h1 class="title is-1 page-title">{{pageData.title.rendered}}</h1>
            <h2 class="subtitle is-2 page-subtitle">{{pageData.wps_subtitle}}</h2>
            <article class="message is-dark" [ngClass]="{'hidden': hide}">
            <div class="message-header">
                <p>Synopsis</p>
                <button class="delete" aria-label="delete" (click)="toggleSynopsis()"></button>
            </div>
            <div class="message-body" [innerHtml]="pageData.excerpt.rendered">
                <!-- {{pageDate.excerpt.rendered}} -->
            </div>
        </article>
        <p class=" text-body " [innerHtml]="pageData.content.rendered ">
        </p>
    </div>
 </div>
 <app-goback (click)="testfun()"></app-goback>
 <app-footer></app-footer>
 </div>

抱歉我在移动设备上的格式问题

Answer 1

你可以试试 innerHTML 属性:

<div [innerHTML]='data.content.rendered'></div>

Answer 2

经过一些工作后，我发现您可以通过多个 angular 消毒剂传递数据。由于 iframe 在对象中，我必须首先通过 bypassSecurityTrustHtml 传递它，然后是 bypassSecurityTrustResourceUrl。

import { DomSanitizer, SafeResourceUrl, SafeHtml , SafeUrl} from '@angular/platform-browser';

constructor(public  sanitizer: DomSanitizer)

this.iframeUrl = 
this.sanitizer.bypassSecurityTrustHtml(this.pageData.iframe);
this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.iframeUrl);

完成后我能够看到 iframe 和视频。

如何在 angular 2 中显示来自 wordpress rest api 内容的 iframe

How can I display iframes in angular 2 from wordpress rest api content

angular

wordpress-rest-api