У меня есть компонент, который предоставляет 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, если это имеет значение)
У меня есть другой компонент, который отображает содержимое, созданное выше, для конечного пользователя после его сохранения в БД.Это содержимое отображается корректно, отображая все html, благодаря пользовательскому каналу, который использует bypassSecurityTrustHtml()
до без очистки innerHtml:
<!-- display the post content -->
<p [innerHTML]="post.content | keepHtml"></p>
Видео, встроенные в innerHtml
прошлого, в iframe, играть без проблем, , но они не будут играть в полноэкранном режиме .Кнопка полноэкранного режима работает, но видео отображается в полноэкранном режиме только в течение очень короткого момента, затем возвращается к исходному размеру и прекращает воспроизведение.Google говорит, что мне нужно обернуть URL видео в bypassSecurityTrustResourceUrl()
внутри моего компонента, но видео внедрено ckeditor и в html контент, а не визуализировано в моем компоненте.
Итак ... Я показываюнесанкционированный html (это работает), который содержит iframe, который содержит один или несколько URL-адресов видео (они воспроизводятся), и я думаю, что мне также необходимо выполнить sanitize, чтобы позволить им воспроизводиться в полноэкранном режиме (это не работает).Я не знаю, как санировать URL-адрес в HTML, который не был сгенерирован моим компонентом.
Я понимаю, что это очень специфическое требование, но наверняка кто-то там внедряет видео в созданный пользователем HTMLи решил это?