Error: Permission denied to access property 'document'

Question

I am continuously getting the error "Error: Permission denied to access property 'document'" while i have already define in my X-FRAME options to allow the other domain, like this..

 <?php
        header('X-Frame-Options: ALLOW-FROM http://mydomain.com'); 
    ?>

Below is the header of iframe request, clearly shows i have defined to allow the domain to access the iframe but not working. All i want is to resize the iframe using javascript.

Here is my javascript code to resize the iframe height.

<iframe src="http://mydomain.com/xxx/yyy" id="idIframe" onload="iframeLoaded();" allowtransparency="true" frameborder="0" width="100%" scrolling="no"></iframe>
<script type="text/javascript">
function iframeLoaded() {
    var iFrameID = document.getElementById('idIframe');
    if(iFrameID) {
          iFrameID.height = "";
          if(iFrameID.contentWindow.document.body.scrollHeight < 500) {
              iFrameID.height = "500px";
          } else {
              iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
          }
    }   
}
</script>

How can i do this? Please suggest.

Phenformin

X-Frame-Options determines if a page is allowed to be displayed inside a frame. It doesn't grant cross-origin JS permission. – Dilator

Answer 1

I very recently had this issue myself. Finally I solved it with the postMessage method.

1. In the document included to the iFrame I check whether it's actually running from an iFrame.

   function inIframe(){
       if(top != self){
            var contentHeight = $('#myIframeContent').height(); //Just this part I did with jQuery as I was sure that the document uses it
            postSize(contentHeight);
            }
       }
   

2. If the document is running within an iFrame, call a function that we will call postSize.

   function postSize(height){
        var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
   
       if(typeof target != "undefined" && document.body.scrollHeight){
           target.postMessage(height, "*");
           }
       }
   

3. Add the following code to the document that includes your iFrame

   function receiveSize(e){
       if(e.origin === "http://www.mywebsite.net"){
           var newHeight = e.data + 35;
           document.getElementById("myIframeID").style.height = newHeight + "px";
           }
       }
   
   window.addEventListener("message", receiveSize, false);
   

Unfortunately I cannot remember the exact sources of all this as I was viewing a lot of different solutions here on Stackoverflow, but also different websites. But this solution works good for me.

Cheers

Disprove

Answer 2

Not sure why the other solutions use an iFrame ID. It should also work without:

Page within the iFrame which sends a message to outside:

<script>
     parent.postMessage('your message', '*');
</script>

Parent frame:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  console.log('Message: ',  event.data);
}

Target

Answer 3

updating compatability.js to latest version fixed it for me.

Moser

Please mention which version you were using, what you updated it to, and the other software you were using at the time. – Mosira