How to access elements of an iframe from an external page?

Asked

Viewed 830 times

4

1 answer

5

You can only access elements from 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 set the header x-frame-options. This header can have the values NONE and SAMEORIGIN. By setting the header to SAMEORIGIN, it is possible to access the elements.

An option to set x-frame-options is 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 per:

https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

There is already a library for the exchange of messages between page and iframe: http://easyxdm.net/wp/

  • I have access to the site code of the external page and put it in the controller the header x-frame-options, as access now?

  • set it in header to http://localhost:3000, it works?

  • See the new version of the answer.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.