Categories

Cross-Domain Iframe Resize

Posted on: August 15, 2014 by Dimitar Ivanov

The problem

Normally, documents on different pages are able to communicate between each other only if their domains, protocols and ports match up. HTML 5 specification comes with window.postMessage, which provides cross-domain communication between scripts.

Syntax

window.postMessage(message, targetOrigin, [transfer]);

message
Messages can be nested objects and arrays, can contain JavaScript values (strings, numbers, Dates, etc), and can contain certain data objects such as File Blob, FileList, and ArrayBuffer objects.
targetOrigin
The value must be either asterisk *, slash / or absolute URL. Otherwise a SyntaxError exception will be throw. If you know the window location, you should always provide this specific location instead of just putting an asterisk *
transfer (Optional)
These objects are transferred with the message, and they are no longer usable on the sending side.

Register an event handler for incoming events

Always verify the sender's identity using the origin property. Skipping this step enables cross-site scripting attacks.

<script type="text/javascript">
window.addEventListener("message", myListener, false);

function myListener(event) {
    if (event.origin !== "https://remote-domain.com:8080") {
        return;
    }
    //do something
}
</script>

How to resize iframe

Document A - contain an iframe; and expects a message from document B.

<!doctype html>
<html>
    <head>
        <title>Document A</title>
        <meta charset="utf-8">
    </head>
    <body>
        <iframe src="https://remote-domain.com:8080/document-B.html" id="zino_iframe"></iframe>
        <script type="text/javascript">
        var zino_resize = function (event) {
            if (event.origin !== "https://remote-domain.com:8080") {
                return;
            }
            var zino_iframe = document.getElementById('zino_iframe');
            if (zino_iframe) {
                zino_iframe.style.height = event.data + "px";
            }
        };
        if (window.addEventListener) {
            window.addEventListener("message", zino_resize, false);
        } else if (window.attachEvent) {
            window.attachEvent("onmessage", zino_resize);
        }
        </script>
    </body>
</html>

Document B - post a message to document A. In our case the message is the iframe height.

<!doctype html>
<html>
    <head>
        <title>Document B</title>
        <meta charset="utf-8">
        <script type="text/javascript">
        function iframe_resize(){
            var body = document.body,
            html = document.documentElement,
            height = Math.max(body.scrollHeight, body.offsetHeight, 
	        html.clientHeight, html.scrollHeight, html.offsetHeight);
            if (parent.postMessage) {
                parent.postMessage(height, "https://my-domain.com");
            }
        }
        </script>
    </head>
    <body onload="iframe_resize();">
        <h4>Document B</h4>
	<p>Cross-Domain Iframe</p>
    </body>
</html>

Browser compatibility

Chrome 1+, Firefox 6+, IE8+, Opera 9.5+, Safari 4+

Make your website more secure by using the HTTP Headers for Wordpress, and never face a cross-origin issue again. Oh yes, it's FREE.
See also
Further reading
Social sharing

If you have questions about cross domain iframe resize, leave a comment below. And do not be shy to share this article. Thanks for reading.


0 Comments

Comments are closed