Certain websites won't appear with Iframe and

问题:

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 won't show up in an iframe or if I use jquery:

 <script>
      $("#siteload").html('<object data="http://google.com">');
    </script>

Just a note: I'm not trying to load google specifically, just any webpage that won't allow iframes..

Does anybody know of a workaround? How about loading an .html file on my server, will that work? & how?

Thank you for your help.

回答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 to do 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.

回答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.

回答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