Geek Answers Handbook

Angular2 URL of insecure resource in iFrame using DomSanitationService

Background:

I am working on proving the concept of a transition strategy that we are exploring that will pull the "old" webapp into an iFrame while we work on transforming existing functionality into Angular.

Question:

The problem I am facing is setting the src tag on the iFrame. I am trying to use the DomSanitationService component, but I continue to receive a "unsafe URL" error message even if it is allowed.

Code:

This is what I have now; I tried to clear the url in the component after it got the url from the service.

http.component.ts

import { Component, OnInit } from '@angular/core'; import { HttpService } from './http.service'; import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser'; @Component({ selector: 'http-frame', template: ` <h1>Angular Frame</h1> <iframe [src]='page'></iframe> `, providers: [ HttpService, DomSanitizationService ] }) export class HttpComponent implements OnInit { page:string = ''; constructor( private httpService: HttpService, private sanitizer: DomSanitizationService ) {}; ngOnInit(){ this.httpService.getPage() .then(page => { console.log(page); this.page = this.sanitizer.bypassSecurityTrustResourceUrl(page); console.log(this.page); }); } }

http.service.ts

 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; @Injectable() export class HttpService { private url = "https://www.google.com"; private retryCount = 2; // See the "Take it slow" appendix constructor(private http: Http) {} getPage(){ return Promise.resolve(this.url); } }

Error:

platform-browser.umd.js: 1900 ORIGINAL EXCLUSION: Error: an unsafe value is used in the context of a resource URL (see http://g.co/ng/security#xss )

+5
source share
4 answers

This worked for me, although there may be a better solution.

home.component.ts

 import { Component, OnInit } from '@angular/core'; import {GetPageService} from "../services/get_page.service"; import {DomSanitizationService, SafeResourceUrl} from "@angular/platform-browser"; @Component({ moduleId: module.id, selector: 'sd-home', templateUrl: 'home.component.html', styleUrls: ['home.component.css'], directives: [], providers: [GetPageService] }) export class HomeComponent implements OnInit { page:SafeResourceUrl; constructor(private _gps: GetPageService,private sanitizer: DomSanitizationService) {} ngOnInit() { this._gps.getPage().subscribe( (data)=>{ this.page = this.sanitizer.bypassSecurityTrustResourceUrl(data); } ) } }

get_page.service.ts

 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { Observable } from "rxjs/Rx"; @Injectable() export class GetPageService { private url = "http://google.com"; private retryCount = 2; // See the "Take it slow" appendix constructor(private _http: Http) {} getPage(){ return this._http.get(this.url) .retry(this.retryCount) .map((res) => { return res.url; }) .catch((err)=>{ let errMsg = (err.error) ? err.errmsg : 'Unknown Error'; console.error(errMsg); return Observable.throw(errMsg); }) } }

home.component.html

 <iframe [src]='page'></iframe>
+6
source

This code above works for me, but the view does not open on every click, My code is like this view.ts page

 import {DomSanitizationService} from '@angular/platform-browser'; import { NavController, NavParams } from 'ionic-angular'; import { Component, OnInit } from '@angular/core'; import {GetPageService} from "./get_page.service"; import { Http } from '@angular/http'; @Component({ templateUrl: 'build/pages/view/view.html', providers: [GetPageService] }) export class ViewPage { //url: any; page: any; constructor(private _gps: GetPageService, private sanitizer: DomSanitizationService, private nav: NavController, navParams: NavParams ) { // this.url = navParams.get('url'); // console.log(this.url); } ngOnInit() { this._gps.getPage().subscribe( (data)=>{ this.page = this.sanitizer.bypassSecurityTrustResourceUrl(data); //console.log(this.page); } ) } }

Next, my service get_page.servise.js page-

 import { NavController, NavParams } from 'ionic-angular'; import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { Observable } from "rxjs/Rx"; import { ViewPage } from '../view/view'; @Injectable() export class GetPageService { private url; private retryCount = 0; // Don't know what is use of this count, tried with 1200/ 100/ 12000/ 900 etc. constructor(private _http: Http, navParams: NavParams) { this.url = navParams.get('url'); } getPage(){ return this._http.get(this.url) .retry(this.retryCount) .map((res) => { return res.url; }) .catch((err)=>{ let errMsg = (err.error) ? err.errmsg : err; console.error(errMsg); return Observable.throw(errMsg); }) } }

- view this page

 <iframe class= "webPage" [src]='page' width="100%" height="250" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

There is only one problem: my view loads with every alternative click. How to solve it

+1
source

After a lot of searches, I came to solve my problem myself.

here waht i did to make it work -

  • Delete the full get_page.servise.js ,

  • commented on the import of this file

    // import {GetPageService} from "./get_page.service";

  • Removed _gps: GetPageService, from the constructor.

  • ngOnInit () function removed

 ngOnInit() { this._gps.getPage().subscribe( (data)=>{ this.page = this.sanitizer.bypassSecurityTrustResourceUrl(data); //console.log(this.page); } ) }

  1. The most important thing -

    Change everything private as public in the constructor as -

    constructor ( public sanitizer: DomSanitizationService, public nav: NavController, navParams: NavParams)

My controller is

 import {SafeResourceUrl, DomSanitizationService} from '@angular/platform-browser'; import { NavController, NavParams } from 'ionic-angular'; import { Component, ViewChild } from '@angular/core'; import { Http } from '@angular/http'; import { Slides } from 'ionic-angular'; @Component({ templateUrl: 'build/pages/view/view.html', }) export class ViewPage { //url: any; page: any; @ViewChild('mySlider') slider: Slides; constructor( public sanitizer: DomSanitizationService, public nav: NavController, navParams: NavParams ) { let url = navParams.get('url'); this.page = this.sanitizer.bypassSecurityTrustResourceUrl(url); // this.url = navParams.get('url'); // console.log(this.url); } }

The browse page remains the same as -

 <iframe class= "webPage" [src]='page' width="100%" height="250" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

Hope this helps too.

+1
source

create a simple pipe and use

 @Pipe({ name: 'safeResourceUrl' }) export class SafeResourceUrlPipe implements PipeTransform { constructor(private sanitized: DomSanitizer) {} transform(value: string) { return this.sanitized.bypassSecurityTrustResourceUrl(value); } } <iframe [src]="youtubeUrl | safeResourceUrl"></iframe>

note : import SafeResourceUrlPipe in app.module.ts

0
source

More articles:


All Articles