Question

我有一个以角度2构建的自定义前端应用程序来显示wordpress帖子。

我将其余的api称为记录，以获得我想要的帖子

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

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

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

我按照

的行显示角度

{{data.content.rendered}}

这将正确显示文本和图像，但iframe不会被渲染，我将在控制台中得到错误。

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

我阅读并且有些人提到了DomSanitizer来解决这个问题，这是唯一可行的方法，这种方法的安全风险是什么。

另外，有没有办法修改wordpress，以便在对象内的自己的密钥中发回包含在帖子中的链接？

编辑 - 在https://github.com/angular/angular/issues/10145检出问题并使用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

经过一些工作，我发现你可以通过多个角度消毒剂传递数据。由于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和视频。

Answer 2

您可以尝试使用innerHTML属性：

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

如何在wordpress rest api内容中以角度2显示iframe

2 个答案: