Search code examples
jqueryformsiframesame-origin-policybrowser-plugin

Set values to form in iframe through browser plugin

For my company, I would like to map values from a form that are stored in the db to a form of a third party company (part of our daily job).

Our form is on site1.com, the form of the third party company is on site2.com, and displayed in an iframe on site1.com.

I have full control over site1.com and none over site2.com

Obviously with jQuery, mapping will not work because of the Same-origin policy.

I thought, since I can manipulate the DOM-tree manually with "inspect element", a browser plugin may work. But till now I haven't been able to get this to work either as I am running into the same-origin policy again.

Is there any other way to get this to work? Do I need to take it one level further and create a cocoa-app for my Mac?

Solution

  • You can use user scripts to achieve your goal. I made an examle siteone.com - a page that has input, button, iframe(looks at sitetwo.com). On a button click a value of the input from siteone.com shows in input from sitetwo.com. To install userscript you may use browser extensions Tampermonkey for Chrome and Safari, or Greasemonkey for Firefox. For communication between page and iframe I used Window.postMessage look documentation. If you need javascript libraries, you can use @require meta block link.

    siteone.com index.html

    <html>
<head>
</head>
<body>
    <input id="parent-input" type="text"/>
    <button id="send-data-to-iframe">Send data to iframe</button>
    <br /><br />
    <iframe id="my-iframe" style="border:1px solid red; height:50px; width:200px;" src="http://sitetwo.com:8080">
    </iframe>
    <script>
        var win = document.getElementById("my-iframe").contentWindow;

        document.getElementById("send-data-to-iframe").onclick = function(){
            win.postMessage(
                document.getElementById("parent-input").value,
                "http://sitetwo.com:8080" // target domain
            );
            return false;
        }
    </script>
</body>

    sitetwo.com index.html

    <html>
<head>
</head>
<body>
    <input id="iframe-input" type="text"/>
</body>

    myUserJS.user.js

    // ==UserScript==
// @name myUserJS
// @license MIT
// @version 1.0
// @include http://sitetwo.com*
// ==/UserScript==
(function (window, undefined) {
    var w;
    if (typeof unsafeWindow != undefined) {
        w = unsafeWindow
    } else {
        w = window;
    }
    // extended check, sometimes @include section is ignored
    if (/http:\/\/sitetwo.com/.test(w.location.href)) {
        function listener(event){
            document.getElementById("iframe-input").value = event.origin + " send: " + event.data;
        }
        if (w.addEventListener){
            w.addEventListener("message", listener,false);
        } else {
            w.attachEvent("onmessage", listener);
        }
    }
})(window);