Styles not working with srcdoc attribute of iframe in ionic-angular2.0.0.beta9

Ionic Framework ionic-v3
1

Hello, I updated to ionic-angular2.0.0.beta9 and there are some issue with loading the styles within the scrdoc attribute of iframe: The style doesn’t load. However it was working in ionic-angular2.0.0.beta6 Here my Implementation:

page.html

<ion-content>
     <h5>First iframe loading styles from externally
    <iframe [srcdoc]="htmlData" width="500" height="300"></iframe>
    <h4>Second iframe loading inline styles
    <iframe [srcdoc]="inlineStyleData" width="500" height="200"></iframe>
</ion-content>

page.ts

import { Component } from '@angular/core';
    @Component({
        templateUrl: 'build/pages/page/page.html'
    })
export class Page {
    public htmlData;
    public inlineStyleData
    constructor(){
    }
   this.htmlData = "<html><head><link rel='stylsheet' href='http://onemoreword.com/styles/mystyle.css' /> </head><body><h2 class='headerstyle'>Welcome to one word</h2><p class='maincontent'>This the  body of the page</p></body></html>";
  this.inlineStyleData = "<html><head></head><body><p style='color: red; font-size: 23pt;'>Paragraph 1</p> <h2 style='color: green; text-align: center;'>Heading 1</h2>";
}

package.json

{
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "ionic-angular": "^2.0.0-beta.9",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.9",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    },
    "android"
  ],
  "name": "Ionic2 App",
  "description": "An Ionic project"
}

I tried with the inline style as well but did not work in ionic-angular2.0.0.beta9, But Worked in ionic-angular2.0.0.beta6. On the chrome browser console I get this messages:

WARNING: sanitizing HTML stripped some content. browser_adapter.js:83
What could be the issue for this?

2

Yuck. You are fighting the framework. HTML goes in templates, not controllers.

3

I’m sorry I did not understand can you explain me in more detailed way,

4

There are a few things that aren’t correct with what you have.

I don’t recommend using iframes, at all, in your app.

As for the why this isn’t working. Ng2 sanitizes everything. So that content that you have, is being stripped out of your app for the users safety. Who knows what could be loaded and if it has malicious content in there.

5

Thanks I was able to resolve this issue now, I need to use DomSaniticationService of angular2.0.0 and use the bypassSecurityTrust… Using this It works perfectly.

Also, the HTML that I embed on the iframe is just contains the table. In my case the api results an html and I need to embed it in an iframe.
Yes, you are right loading an iframe is not a good practice since there are security vulnerabilities associated with it.