I am getting Cross Site Scripting error on the following code.

Javascript

 function resizeIframe(ifRef) 
            {
                var ifDoc;
                //alert(ifRef);

                try
                { 
                    ifDoc = ifRef.contentWindow.document.documentElement; 
                }
                catch( e )
                {
                   alert(e);
                    try
                    { 
                    ifDoc = ifRef.contentDocument.documentElement; 
                    }
                    catch( ee ){
                             alert(ee);
                          } 
                }
                //var doc = ifRef.height;
                //alert(doc);
                if(ifDoc)
                {
                    ifRef.height = 1; 
                    ifRef.style.height = ifDoc.scrollHeight+'px';               
                }
            }

Iframe

<iframe onload="resizeIframe(this)" style="margin-bottom: 16px;" src="ourteamnav/first.php" frameborder="0" scrolling="no" width="597" height="240"></iframe>

The Errors are following

For 'e' :

Mozilla Firefox : Error: Permission denied to access property 'document'

Google Chrome : TypeError: Cannot read property 'documentElement' of undefined

Internet Explorer : TypeError: Permission denied

And for 'ee' :

Mozilla Firefox : Error: Permission denied to access property 'documentElement'

Google Chrome : TypeError: Cannot read property 'documentElement' of null

Internet Explorer : Error: Access is denied.

I think it can not be solved in general way as it s happening because of domain is pointing another domain. So will anyone guide me to solve it without using these property of Javascript contentDocument.documentElement or contentWindow.document.documentElement for re-sizing the Iframe Content dynamically according to its inner Content.

Thanks

I am getting Cross Site Scripting error on the following code.

Javascript

 function resizeIframe(ifRef) 
            {
                var ifDoc;
                //alert(ifRef);

                try
                { 
                    ifDoc = ifRef.contentWindow.document.documentElement; 
                }
                catch( e )
                {
                   alert(e);
                    try
                    { 
                    ifDoc = ifRef.contentDocument.documentElement; 
                    }
                    catch( ee ){
                             alert(ee);
                          } 
                }
                //var doc = ifRef.height;
                //alert(doc);
                if(ifDoc)
                {
                    ifRef.height = 1; 
                    ifRef.style.height = ifDoc.scrollHeight+'px';               
                }
            }

Iframe

<iframe onload="resizeIframe(this)" style="margin-bottom: 16px;" src="ourteamnav/first.php" frameborder="0" scrolling="no" width="597" height="240"></iframe>

The Errors are following

For 'e' :

Mozilla Firefox : Error: Permission denied to access property 'document'

Google Chrome : TypeError: Cannot read property 'documentElement' of undefined

Internet Explorer : TypeError: Permission denied

And for 'ee' :

Mozilla Firefox : Error: Permission denied to access property 'documentElement'

Google Chrome : TypeError: Cannot read property 'documentElement' of null

Internet Explorer : Error: Access is denied.

I think it can not be solved in general way as it s happening because of domain is pointing another domain. So will anyone guide me to solve it without using these property of Javascript contentDocument.documentElement or contentWindow.document.documentElement for re-sizing the Iframe Content dynamically according to its inner Content.

Thanks

• javascript
• html
• wordpress
• iframe
• cross-domain

• just checking: are these different domains, or different sub-domains within a same domain? – Christophe Commented Feb 23, 2013 at 19:59

2 Answers 2

In addition to the answer of Christophe, I wanted to point out (sadly) postMessage doesn't work on all browsers.

Luckily, Josh Fraser already provided a backwards patible version of window.postMessage(). It checks if the browser supports the postMessage-method. If it does, it uses that. If not, it uses the URL (both from the iframe and the parent) to pass along data.

Now you can use the following methods to let both windows "talk" to eachother:

XD.postMessage(msg, src, frames[0]);
XD.receiveMessage(function(message){
    window.alert(message.data + " received on "+window.location.host);
}, 'URL');

Just make sure you read the documentation properly, since the configuration has to be set just right.

As you say, this is a cross-domain issue.

If you have control on both pages you can use postMessage to exchange information between the two pages.

Some references:

• Ben Alman's example of resizing iframes
• John Resig's article on postMessaging
• this excellent presentation on iframes (what you're interested in starts at slide 16).
• a list of libraries/plugins that include this technique