I need to load an external website inside ion-content

#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

1 Like
#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

#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.