I am working on an angular application, where I am receiving HTML content from API which is created by CKEditor. content includes iframe & other HTML data. I have tried to santize the content using both method bypassSecurityTrustHtml & bypassSecurityTrustUrl but it just ignores the iframe part from the content & displays the remaining. I am attaching the pipe code & whole content kindly guide me where I am wrong.
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({ name: 'sanitizeHtml' })
export class SanitizeHtmlPipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) { }
transform(value: string): SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(value);
}
}// Raw Content
const data = `
<p><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'>ab</span><br><br><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'><strong>ab</span><br><br><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'>The Transaction values </span><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'><strong> </strong>ab</span><br><br><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'>ab.</span><br><br><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'>On Sensex, Bharti Airtel closed at Rs520.90 per piece up 0.7%.</span></p><figure class='image'><img src='https://storage.googleapis.com/app-uploads-dev/rta/media/image/large/1617277508210.jpg' alt='Airtel'></figure><p> </p><p> </p><figure class='media'><div data-oembed-url='https://www.youtube.com/watch?v=lfKY0C7p8Qo'><div style='position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;'><iframe src='https://www.youtube.com/embed/lfKY0C7p8Qo' style='position: absolute; width: 100%; height: 100%; top: 0; left: 0;' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen=''></iframe></div></div></figure><figure class='table'><table><tbody><tr><td>Stock </td><td>Bse</td></tr><tr><td>type</td><td>NSE</td></tr></tbody></table></figure><h2><br> </h2>`
<span [innerHTML]="data | sanitizeHtml">
