Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iframe showing up blank

Tags:

html

css

iframe

I am trying to use a simple iframe on my website. But it is not showing up. Please see the screenshot. This is my code:

 <iframe src="https://www.w3schools.com"></iframe> 

What am I doing wrong? Thanksiframe showing blank

like image 235
Jeff Avatar asked Aug 16 '17 00:08

Jeff


People also ask

Why is my iframe not showing?

If the primary domain for your website is secure with SSL (https://) but the source URL for your Iframe is not, your website will display an error, or simply not display the content. To fix this, you'll need to update the Source URL for your Iframe content with the secure (https://) version.

Why some websites are not opening in iframe?

You have to check for HTTP response header X-Frame-Option of those sites. if its value is "DENY or SAMEORIGIN", then you can not load those website in the iframes. DENY = No one can load the website in iframe. Even the same domain page wont be able to load.

How do I fix refused connection in iframe?

Most probably web site that you try to embed as an iframe doesn't allow to be embedded. You need to update X-Frame-Options on the website that you are trying to embed to allow your Power Apps Portal (if you have control over that website).


2 Answers

Your code is right, it's w3schools.com that's the problem. Opening up the developer console reveals this:

Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

This means that w3schools.com will only work in a frame when the "origin" (the website your frame is on) is from w3schools.com. Otherwise, you'll just get a blank frame.

like image 54
ungato Avatar answered Sep 30 '22 15:09

ungato


Pages from W3Schools are not displayed in iframe elements from different server because the W3Schools site implements an iframe blocking policy. In order to do this, it uses the X-Frame-Options. (See also how to block website from loading in iframe?.)

You can check whether a site implements this policy by inspecting its HTTP headers. For example, in Firefox, press F12 to open the inspection tools, then go to Network, select one of the objects that were sent over HTTP and look at the headers (or filter the headers for e.g. "x-frame"). Below is what this looks like for W3Schools:

Screenshot showing the HTTP Response header 'x-frame-option: SAMEORIGIN' in the Firefox Developer Toolbar

Notice x-frame-options: SAMEORIGIN in the lower right part of the screenshot. With x-frame-options: SAMEORIGIN (or on some other sites x-frame-options: DENY) set on the server side, you will not be able to load pages from that site inside an iframe or a frame.

For more background, see X-Frame-Options – How to Combat Clickjacking, which also explains other values that can be used in the x-frame-options header.

If you want to test with a webpage from a server that does not block loading in iframes, try for example https://wiki.archlinux.org/.

like image 39
Tsundoku Avatar answered Sep 30 '22 13:09

Tsundoku