I am inserting an iframe in ionic2 imported from a page url I have tried some if they come out and with youtube too but like the one from google or the main one that I have to place http://soporte.estadisticassena.com/edis/www/engenn11le04ob08 / does not let me get this error:
Refused to display 'http://soporte.estadisticassena.com/edis/www/engenn11le04ob08/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
this is the component:
import { Component } from '@angular/core';
import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';
import { AlertController, LoadingController, NavController } from 'ionic-angular';
@Component({
selector: 'sena',
templateUrl: 'sena.html'
})
export class Sena{
url: SafeResourceUrl;
constructor(
public navCtrl: NavController,
private alertCtrl: AlertController,
public loadingCtrl: LoadingController,
public sanitizer: DomSanitizer
){
this.url = sanitizer.bypassSecurityTrustResourceUrl('https://www.google.com.co/');
}
}
This is the html:
<iframe class="iframe-sena" height="190" onload="this.width=screen.width" [src]="url" frameborder="0" ></iframe>
Thank you very much.
Within the response of the loaded page is the HTTP header:
x-frame-options:SAMEORIGIN
This disables the display of this page in an IFRAME. See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Unfortunately Google and other sites have disabled support for loading your content into an iframe from an external site. Check https://support.google.com/customsearch/answer/4542055?hl=en and https://support.google.com/customsearch/answer/2641279?hl=en
The way to display this content in an iframe is no longer possible in the normal way (using src in the iframe). The closest solution is to use a "proxy" page on your own server that serves you the content of said page but from a local origin.
Ex: Load a local page
And the page controller downloads the content of the url and returns it as a response.