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

3

2 Answers 2

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.

2
  • 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, 2017 at 2:19
  • 1
    Yeah, a lot of websites do this it seems. Try a youtube embed: <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
    – ungato
    Aug 16, 2017 at 4:45
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.