How do I access elements of an iframe from an external page?

4

I need to access an id that has inside an external page that I'm rendering in an iframe on my site.

Permission error is occurring. How do I resolve this?

This is the link on the page: link

Fiddle: link

Observe my X-Frame-Options. You have "localhost: 3000", does it work?

    
asked by anonymous 20.05.2014 / 17:27

1 answer

5

You can only access elements of the iframe page if the iframe is from the same domain as the page containing the iframe.

There are several ways to solve this problem, one of them is to define the x-frame-options header. This header can have the NONE and SAMEORIGIN values. By setting the header for SAMEORIGIN, it is possible to access the elements.

An option to set x-frame-options looks like this:

<head>
  <meta http-equiv="X-FRAME-OPTIONS" content="SAMEORIGIN">
</head>

This will work if both pages are in the same domain, that is, they are being served by the same server with the same URL.

To use the allow-from option, in your case:

<head>
  <meta http-equiv="X-FRAME-OPTIONS" content="ALLOW-FROM http://portal.4stations.com.br/">
</head>

However, allow-from is not supported in Chrome and Safari, as follows:

link

There is already a library for the exchange of messages between page and iframe: link

    
20.05.2014 / 17:41