Injecting an Iframe into angular 2 from the database

Question

I need help regarding iframes in angular 2.

Firstly embedding an iframe directly into a components template works fine.

<iframe 
    src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 
    allowtransparency='true'
    frameborder='0'
    scrolling='no'  
    width='80%'
    height='500'>
</iframe>

Here is the code for the safeUrl pipe below

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

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizationService) {

  }

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

This all works fine.

The problem is when I want to load this iframe from the database angular throws an error and will not render the iframe

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

This Iframe is being fetched from a nosql database and is returned back to angular 2 nested inside HTML script.

Here is a example below of what is being fetch from the Database:

"<h2>Some text returned from the DB</h2>
<iframe 
    src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 
    allowtransparency='true'
    frameborder='0'
    scrolling='no'  
    width='80%'
    height='500'>
</iframe>
<p>Some more text returned from the DB</p>"

Any Suggestions on how I can get this to render on angular 2 when returned from the database? Thanks.

Update

So this is how I am adding the Iframe nested inside a chunk of HTML code from the database to the {{ (post$ | async)?.description }} as seen below.

<h2>{{ (post$ | async)?.title }}</h2>
<div innerHTML="{{ (post$ | async)?.description }}" ></div>

Thanks!

Is this exactly the code that causes the error? AFAIK this error is only caused by values added through bindings, but with ` — Günter Zöchbauer, Dec 29 '16 at 14:38
Yep this is that's the exact code, it works fine when i embed it directly into the template but when I i read it from the DB I get the error — Dave, Dec 29 '16 at 15:13
What exactly do you read from the DB? It's impossible `src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl'` does what you expect because of the reasons mentioned in above comment. I guess the error message you get is not from the URL but for the whole chunk of HTML you're reading from the DB and adding to the DOM. How do you add it? — Günter Zöchbauer, Dec 29 '16 at 15:14
I am adding it in to the template like this `
` The rest of the HTML script with render on the page. Thanks! — Dave, Dec 29 '16 at 15:31

Günter Zöchbauer · Accepted Answer · 2016-12-29T15:37:38.780

2

Use

<div [innerHTML]="(post | async)?.content | safeHtml }}" >

where safeHtml is a pipe like safeUrl but one that applies this.sanitizer.bypassSecurityTrustHtml(html);

and remove | safeUrl from

src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl'

String binding using src="{{...}}" doesn't work with | safeHtml, instead use [src]="... | safeHtml"

edited Dec 29 '16 at 15:37

answered Dec 29 '16 at 14:37

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks @Günter Zöchbauer Yes this works when I embed it directly into the template but not when fetch it from the DB... – Dave Dec 29 '16 at 15:22
Please provide more context in your question. – Günter Zöchbauer Dec 29 '16 at 15:26
Nice one @Günter Zöchbauer! Plunker is up and rendering on the screen!! I followed exactly as instructed and that worked well. I ended up saving it in the database like this and it worked! `"` Thanks again! – Dave Dec 29 '16 at 16:07
1

Glad to hear. You should remove the `| safeUrl` part though. If that doesn't cause an error it's only by accident. – Günter Zöchbauer Dec 29 '16 at 16:10

Injecting an Iframe into angular 2 from the database

1 Answers1