Question

我有一个组件可以为高度信任的用户提供html编辑器（ckeditor），该用户实际上是我网站的内容创建者。通过实现transform（）的自定义管道，未清除该编辑器的内容字段的内容：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

使用编辑器，该用户可以使用内置的iframe按钮将视频嵌入到内容中，该视频先前已上传到托管服务。（vzaar，如果有关系的话）

我还有另一个组件，可以将上面创建的内容保存到数据库后显示给最终用户。由于使用bypassSecurityTrustHtml()来{em>不消毒 innerHtml：

的自定义管道，此内容可以正确显示所有html。

<!-- display the post content -->
<p [innerHTML]="post.content | keepHtml"></p>

在过去的innerHtml内嵌入的视频在iframe中可以正常播放，但不能全屏播放。全屏按钮似乎可以使用，但是视频仅在很短的时间内显示全屏，然后恢复到其原始大小并停止播放。 Google说，我需要将视频网址包装在组件中的bypassSecurityTrustResourceUrl()中，但是视频是由ckeditor嵌入并包含在html内容中，而不是在组件中呈现。

所以...我正在显示未经过消毒的html（此方法有效），其中包含一个iframe，该iframe包含一个或多个视频网址（这些播放），我想我也需要对其进行消毒以使其全屏播放（这是行不通的）。我不知道如何清理html中的URL，而我的组件没有生成该URL。

我意识到这是一个非常具体的要求，但是肯定有人在将视频嵌入用户创建的html中并解决了吗？

iframe中的全屏视频... innerHtml之内

0 个答案: