Skip to content Skip to sidebar Skip to footer

Certain Websites Won't Appear With Iframe And .load() Function

I'm trying to load webpages on an another webpage (not hosted on my server), but due to cross-site/security scripting I'm unable to load up certain webpages. For example, google wo

Solution 1:

This is done on purpose, website developers can set certain headers in the response to control which URL's (other websites) can load their content in <iframe>, <frame> or <object>. This is a way of protecting your website from attacks like Clickjacking.

For example: most of the browsers support the X-Frame-Options header

There are three possible values for X-Frame-Options:

DENY
The page cannot be displayed in a frame, regardless of the site attempting todo so.

SAMEORIGIN
The page can only be displayed in a frame on the same origin as the page itself.

ALLOW-FROM uri
The page can only be displayed in a frame on the specified origin.

Note that X-Frame-Options: Allow-From is not supported by Chrome, Safari etc.

The modern browsers handle these with the new Content Security Policy (CSP). So you can control this using the new header:

Content-Security-Policy: frame-ancestors

The CSP 2.0 which is supported by all the newer browsers are fully backward compatible as well.

I know this is not the answer to your question, but this information will give you some perspective into why you are not able to load the websites into your iFrame.

Solution 2:

Certain websites block the usage of iframes. Google is one of them.

EDIT: I think google is sending a sameorigin setting along with it.

Solution 3:

A few possible workarounds:

  1. Don't use an iframe, use a div and $.load()

  2. Find solutions on a case-by-case basis, in the case of Google use a Google Custom Search Engine instead (there are iframe-friendly solutions for most things, but it takes time to find them)

  3. Use a proxy

  4. Where available (Google is such a case), make your own page and try to match the style of the original (Google) page, then use an API to get the search content

Note that 3 and 4 cost potentially a lot of money, depending on traffic

Post a Comment for "Certain Websites Won't Appear With Iframe And .load() Function"