angular2中使用iframe,加载一个被写入的页面

这篇文章涉及到两个问题
1.将服务器返回的内容写入页面
2.在angular2中使用iframe,加载页面

一.将服务器返回的内容写入页面
参考:http://blog.csdn.net/gubenpeiyuan/article/details/53364135
1.首先引入file

//在demo-page.ts中声明File
import {File} from "@ionic-native/file" ;

@Component({
  selector: 'demo-page',
  templateUrl: 'demo-page.html',
  providers: [File]
})

export class DemoPage {
    constructor(private file: File) {}
}

2.创建一个文件

//demo-page.ts

this.fileUrl = this.file.externalCacheDirectory;
let fe = await this.file.createFile(this.fileUrl, "demoTest.html", true);

3.文件写入

this.writeFile(fe, this.content);
writeFile(fileEntry, data) {
    fileEntry.createWriter((fileWriter) => {
      fileWriter.onwriteend = () => {
         console.log("success file write: " + e.toString());
      };


      fileWriter.onerror = function (e) {
        console.log("Failed file write: " + e.toString());
      };
      // If data object is not passed in,
      // create a new Blob instead.
      let dataObj = new Blob([data], {type: 'text/plain'});
      fileWriter.write(dataObj);
    });
  }

二.在angular2中使用iframe

//demo.html
<ion-header>
  <ion-navbar>
    <ion-title>使用iframeion-title>
  ion-navbar>

ion-header>

<ion-content>
  <ion-card>
    <iframe [src]="iframe">
    iframe>
  ion-card>
ion-content>


//demo.ts
this.fileUrl = this.file.externalCacheDirectory;
let iframe= this.fileUrl + "demoTest.html";

以上代码运行的时候,会出现以下类似错误(xss)
解决方法参考: https://segmentfault.com/a/1190000008809095

1.什么是xss攻击

2.解决方法
我们需要Angular 2 中提供的 DomSanitizer 服务来告诉angular iframe中链接的url是安全的

import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
writeFile(fileEntry, data) {
    fileEntry.createWriter((fileWriter) => {
      fileWriter.onwriteend = () => {
      //假如写入成功,将被处理过的安全的文件地址传给iframe,加时间戳,使iframe内容自动更新
        this.iframe = this.domSanitizer.bypassSecurityTrustResourceUrl(this.resultFile + "?dummyVar=" + (new Date()).getTime());
      };


      fileWriter.onerror = function (e) {
        console.log("Failed file write: " + e.toString());
      };
      // If data object is not passed in,
      // create a new Blob instead.
      let dataObj = new Blob([data], {type: 'text/plain'});
      fileWriter.write(dataObj);
    });
  }