Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'my_page' in a call to 'postMessage'

Question

i have following script

Parent Page(pair_pixel_filter.php):

 window.addEventListener("message", function(e) {
            $('#log').append("Received message: " + (e.data));
        }, false);
 $('.photo-upload-btn').click(function(event) {
            event.preventDefault();
            window.open($(this).attr("href"), "popupWindow", "width=600,height=600,scrollbars=yes");
        });

The Child Page

$.ajax({
            type: 'post',
            url: url,
            data: {
                base64data: dataURL
            },
            success: function(data) {
                window.opener.postMessage(data, "pair_pixel_filter.php");
                window.close(); }
        });

Basically opening a Popup and then doing some ajax on pop up and returning result to parent. But from Child i am getting this error.

Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'pair_pixel_filter.php' in a call to 'postMessage'

Answer 1

The 2nd parameter to postMessage is the "target origin". This is the domain where the page is located, not the name of the (php) file.

It needs to be something like:

window.opener.postMessage(data, "http://example.com");

See: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage