I need to load an external website inside ion-content

Ionic Native
1

I am working on an ionic framework based mobile application. My project is a side menu based application. On clicking the item in the side menu, I need to load an external website inside ion-content and hide side menu of the loaded website but I can’t figure it out how to do it.

I tried ngCordova InAppBrowser, but it loads website in a separate full screen.

I also tried iFrame, but I couldn’t load the website inside ion-content. Getting following msg “refused to display url in a frame because it set ‘x-frame-options’ to ‘sameorigin’”. To avoid clickjacking, the x-frame-options in website is set to sameorigin.

1 Like
2

The website you try to load in i frame blocked the option to load this website in i frame.
Try to explain what you are really want to do

3

My assumption is, you want to show an iframe when you are going to chose a menu from the sidemenu right?

If yes, try to do the below thing,

in your html

    <ion-content>
    
    <iframe class= 'webPage' name= "samplePage" src="https://www.google.co.in/">
    </iframe>

  </ion-content>

and in your SCSS file,
.webPage{
width: 100%;
height: 100%;
border: none;
}

This will fix your issue I hope

2 Likes
4

@akr_rajkumar

I also tried iFrame, but I couldn’t load the website inside ion-content. Getting following msg “refused to display url in a frame because it set ‘x-frame-options’ to ‘sameorigin’”. To avoid clickjacking, the x-frame-options in website is set to sameorigin.

Did you read this before you wrote this answer?

5

having the same problem; i want to show a website inside a ion-content inside my app, where iframe is not an option, as it is blocked by the site

1 Like
6

Angular is the underlying framework that powers Ionic.
Angular has a mechanism to prevent cross-site scripting attacks (XSS).
For example, when binding a URL in an <a [href]="someValue"> hyperlink, someValue will be sanitized so that an attacker cannot inject e.g. a javascript: URL that would execute code on the website.
Please refer to here.

7

Is there a practical answer for this? The angular link you referenced is very abstract and makes no sense.

8

This might be the solution. But after using it another problem occur. When I press the back button sometimes the url doesnot change and it all the other page in the html.

9

Since I stumbled over this post a couple of times, let me quickly provide an answer for Googlers who come here:

Angular doesn’t allow to load external pages by default, due to possible security risks.
To get this done, you need to tell the application that the URL is safe,

In your page.ts, inject the DomSanitizer and then tell the app that the URL is safe:

export class HelpPage implements OnInit {
  helpUrl: any;
  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.helpUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
      'https://www.google.com'
    );
  }
}

In your help.page.html, just add the iFrame with the set url

<ion-content forceOverscroll="false">
  <iframe
    width="100%"
    height="100%"
    [src]="helpUrl"
    frameborder="0"
    allowfullscreen
  ></iframe>
</ion-content>

That’s the way I add content to my apps that needs to be changed from outside (e.g. Help, TnC)

However, this comes with some challenges if you provide navigation items / links inside this HTML pages, as the user might get los easily as he doesn’t know what the app is and the external HTML page :slight_smile:

I try to avoid loading complex sites with secondary navigations.