W3School defines an Iframe as follows : The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
Websites frequently use embedded material. Our ability to draw input from a variety servers to create a cohesive web presence is part of what makes the web so robust, effective and powerful. The iframe element (short for inline frame) is one of the earliest HTML tags, having been introduced by Microsoft Internet Explorer in 1997 with HTML 4.01.
For this post, we won't be digging deeper into what are iFrames and how to use them. Rather we'll be taking a look at one of the fairly common issues that come with iFrames. The issue of displaying a custom error message.
So, for the sake of the argument, let's say that you have a web application and it uses an iframe to display another site, video or any other type of web content. It's all fun and games until the 3rd party content that you are relying on is readily available. But what happens when the 3rd party server goes for a toss? In that case you'd see something like this :
Now bear in mind that when I say 3rd party server went for a toss, I mean that there could be anything that might've gone wrong. May be you see one of the following usual error status :
Or, it could be something that you did wrong while making the call from the client, hence you might face one of these errors:
While the above described occurrences are the most common ones, but that might not always be the case why you're not able to show the content from a 3rd party. Case in point is the iframe that you see above. Obviously Google servers are not down at the moment, they are very well running and holding the fabric of the internet, as we know it, together. There is another issue going on here.
You see, google does not want me, another domain, to be able to show the content from their domain. This is achieved by something known as the SAME ORIGIN policy.
Due to the general browsers' Same Origin Policy, we won't be able to perform this from the client side. Other than fundamental parameters like aspect ratio, you won't be able to retrieve much content from the iFrame.
So now, google sets in its response header the property 'X-Frame-Options' as SAMEORIGIN. Since the browser implements Same Origin Policy, we simply wouldn't be able to see the answer even if we made an ajax call to Google.
As a result, our sole choice is to make the request from a server to determine if the website can be displayed in our IFrame. Consequently, on our server, our web service would make a request to google.com, next inspect the response for an X-Frame-Options header parameter. If it exists, we can be sure that the IFrame will fail, and vice-versa.