How to execute a function through postMessage

Question

I have this code inside a iframe:

window.addEventListener('message', function(e){

  if(e.data == 'test')
    console.log(e);

}, false);

and this inside the parent document:

$('#the_iframe').get(0).contentWindow.postMessage('test', 'http://localhost/');

So the parent document sends a "test" message to the iframe and it works.

But how can I define a function in the parent document, and somehow send this function through postMessage to the iframe, which will execute the function locally?

The function does some changes to the document like this:

var func = function(){
  $("#some_div").addClass('sss');
}

(#some_div exists in the iframe, not the parent document)

I think there is a `window.parent` variable which should be accessable from the iframe. The main window will also have a `parent` but I believe it'll refer to itself — sparebytes, Jun 12 '12 at 21:38

Oleg · Accepted Answer · 2012-06-19T22:05:45.333

There's nothing that would prevent you from passing a stringified function as postmessage event data. Implementation is trivial, for any function declaration like

function doSomething(){
    alert("hello world!");
}

You could encodeURI its string interpretation:

console.log(encodeURI(doSomething.toString()));
//function%20doSomething()%20%7B%0A%20%20%20%20alert(%22hello%20world!%22);%0A%7D

It can then be executed as part of a closure - something not overly imaginative like

eval('('+decodeURI(strCallback)+')();');

There's a fiddle'd proof of concept without the cross-frame architecture - I'll see if I can put together a postMessage version, but it would be non-trivial to host w/jsfiddle

Update

As promised, a full mockup that works (links below). With correct event.origin checks this would be sufficiently inpenetrable, but I know for the fact that our security team would never let eval into production like this :)

Given the option I'd suggest the functionality be normalized across the two pages so that only a parametric message would need to be passed (i.e. pass arguments not functions); however there are definitely a few scenarios where this is a preferred approach.

Parent code:

document.domain = "fiddle.jshell.net";//sync the domains
window.addEventListener("message", receiveMessage, false);//set up the listener

function receiveMessage(e) {
    try {
        //attempt to deserialize function and execute as closure
        eval('(' + decodeURI(e.data) + ')();');
    } catch(e) {}
}

Iframe code:

document.domain = "fiddle.jshell.net";//sync the domains
window.addEventListener("message", receiveMessage, false);//set up the listener

function receiveMessage(e) {
    //"reply" with a serialized function
    e.source.postMessage(serializeFunction(doSomething), "http://fiddle.jshell.net");
}

function serializeFunction(f) {
    return encodeURI(f.toString());
}

function doSomething() {
    alert("hello world!");
}

Prototype mockup: parent code and iframe code.

does that really work? I mean you can get the code of every function by calling function.toString() ? — Alex, Jun 19 '12 at 15:06
@Alex: yes, it does for **any** function that you've defined - or, rather, any function not written in native code (i.e. you can't see the string representation of the source code for `window.alert`) — Oleg, Jun 19 '12 at 21:18
just mind that you end up with the worst-practice code (evals, functions executed in global context, etc.) — Dziad Borowy, Aug 12 '15 at 11:00

Bergi · Answer 2 · 2012-06-18T16:59:28.553

You can't really. Although the (draft) spec for postMessage talks about structured objects, e.g. nested objects and arrays, [...] JavaScript values (strings, numbers, Dates, etc) and [...] certain data objects such as File Blob, FileList, and ArrayBuffer objects most browsers only allow strings (including JSON, of course). Read more at MDN or dev.opera. Yet I'm quite sure that it won't be possible to send function objects, at least not as closures preserving their scope.

So you'll end in stringifying the function and eval() it in the iframe, if you really want to execute some code from the parent window. However, I can see no reason for any application to allow evaluation of arbitrary code (even if from registered domains); it would be better to build an message API which can receive (JSON-)string commands and invoke its own methods.

score 2 · Answer 3 · answered Jun 17 '12 at 13:28

In this case I'd try different approach. Why? Bergi already explained why it won't work the way you want it.

You can define (and redefine your functions) in parent page:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">                                        
    var fun = function() { alert('I am a function!'); };

    $(function() {
        // use this function to change div background color
        fun = function() { 
            // get desired div
            var theDiv = $('#frame').contents().find('#some_div');
            theDiv.css('background', '#ff0000');
        };

        // or override it, if you want to change div font color
        fun = function() { 
            var theDiv = $('#frame').contents().find('#some_div');
            theDiv.css('color', '#ff0000');
        };

        // in this example second (font color changing) function will be executed
    });
</script>                                                               
</head>                                                                 
<body>                                                                  
    <iframe id="frame" src="frame.htm"></iframe>
</body>                                                                 
</html>

and call your function from within frame-page:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">                                         
    $(function() {
        parent.fun();
    });
</script>                                                               
</head>                                                                 
<body>                                                                  
    <div id="some_div">I am a div (but inside frame)!</div>
</body>                                                                 
</html>

It may be inconvenient, but it works.

score 1 · Answer 4 · edited May 23 '17 at 11:47

Expanding upon the following question you can stringify a function, use postMessage to send the function body over, and then use eval to execute it.

Essentially what you are doing is marshalling the function so that it can be sent to the iframe and then unmarshalling it on the other end. To do so use the following code:

Iframe:

window.addEventListener("message", function (event) {
    var data = JSON.parse(event.data);
    var callback = window[data.callback];
    var value = data.value;

    if (data.type === "function")
        value = eval(value);

    var callback = window[data.callback];

    if (typeof callback === "function")
        callback(value);
}, false);

function callFunction(funct) {
    funct();
}

Parent:

var iframe = $("#the_iframe").get(0).contentWindow;

postMessage(function () {
    $("#some_div").addClass("sss");
}, "callFunction");

function postMessage(value, callback) {
    var type = typeof value;

    if (type === "function")
        value = String(value);

    iframe.postMessage({
        type: type,
        value: value,
        callback: callback
    }, "http://localhost");
}

Once you get the function body in your iframe and eval it you can use it like a normal function. You can assign it to a variable, pass it around, use call or apply on it, bind it, and so on.

Note however that the scope of the function is dynamic (i.e. any non-local variables in the function must be already defined in your iframe window).

In your case the jquery $ variable which you are using in your function is non-local. Hence the iframe must already have jquery loaded. It won't use the jquery $ variable from the parent window.

@Yagiz That's a stupid argument. It's like saying, "It's 2015, you shouldn't encourage people to tie their shoe laces." — Aadit M Shah, Dec 03 '15 at 14:25

score 0 · Answer 5 · answered Mar 29 '16 at 07:37

0

You can always send postMessage back to the iframe and let iframe handle the message. Of course you must count that it wont get executed before next command in iframe.

answered Mar 29 '16 at 07:37

Aiphee

8,904
3
18
16

How to execute a function through postMessage

5 Answers5

Update