8

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

Jeff
  • 107
  • 1
  • 1
  • 5
  • https://stackoverflow.com/questions/18373592/iframe-contents-cant-appear-in-firefox – Lee Aug 16 '17 at 00:27
  • @Lee The answer there doesn't apply here, w3schools.com is being accessed through https. – ungato Aug 16 '17 at 00:31
  • Possible duplicate of [Can't show some websites in iframe tag](https://stackoverflow.com/questions/6663244/cant-show-some-websites-in-iframe-tag) – Georgy Oct 25 '18 at 13:23

2 Answers2

5

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.

ungato
  • 153
  • 2
  • 12
  • Thanks for the help. But it seems that I can't load any external website in the iframe. Is there a way to make this work? – Jeff Aug 16 '17 at 02:19
  • 1
    Yeah, a lot of websites do this it seems. Try a youtube embed: `` – ungato Aug 16 '17 at 04:45
2

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

Tsundoku
  • 2,455
  • 1
  • 19
  • 31