Filling the details in a third party website automatically

Question

I have a page with an iframe (displaying a third party website) in it. On click of a button in my page, username which I feed in, should go and get set in that third party website, from my iframe. I have been trying this for a while and have read about 'Same Origin Policy' and thus have been trying to use 'CORS(Cross-Origin Resource Sharing)'. I don't know if whatever am trying is allowed, but this is what I have done till now.

I do not know how to proceed from here.

<iframe name="ifr" id="ifr" height="200" width="200" src="https://somethirdPartyWebsite.com"/> </iframe><br/>
<input type="submit" id="submit" onclick="validate()" />
<script type="text/javascript">
function validate(){
    var request = createCORSRequest("get", "https://ala.kcpl.com/ala/mainLogin.cfm");
    alert("request-->"+request);
    if (request){
        request.onload = function() {
            alert("In onload...");
        };
        request.onreadystatechange = stateChanged();
        request.send();
    }
}

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

function stateChanged(){
    alert("State Changed..");
}

**OUTPUT : **In IE, am getting alert("request-->"), alert("State Changed"), alert("In load").

In Firefox, am getting alert("request-->"), alert("State Changed").

Question: What am I to conclude from this and how do I go forward and set the value in the text field of the third party website, which is present in the iframe ifr

I think I need to do something like

$("#ifr").contents().find('#inputUsername').val()="ValueToEnter".

Not familiar with UI coding, please don't frown :)

undefined · Accepted Answer · 2015-10-23T23:40:09.857

2

You can't. Same-origin policy doesn't allow this.

CORS should be set on the server-side, it's not something that you can configure client-side.

edited Oct 23 '15 at 23:40

answered Oct 23 '15 at 23:38

undefined

136,817
15
158
186

So there is nothing I can do from the client side to auto fill the fields of a cross platform or 3rd party? So unless the server gives us permission to its contents, get/post requests cannot be done? – Anuj Balan Oct 23 '15 at 23:39
One option is disabling the browser's same-origin rules, here is a related question: http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome. – undefined Oct 23 '15 at 23:43
" So unless the server gives us permission to its contents, get/post requests cannot be done?". If you are using client-side JavaScript for communicating with an external API, yes, browser doesn't allow this. Browser sends a preflight (using the HTTP OPTIONS verb) to the server, if the server allows the request, then the actual request is sent. – undefined Oct 23 '15 at 23:45
If I successfully disable the policy, how do I proceed? – Anuj Balan Oct 23 '15 at 23:47
For updating the field you should use the `val` as a setter, your last snippet won't work: `$("#ifr").contents().find('#inputUsername').val("ValueToEnter");`. – undefined Oct 23 '15 at 23:49
So this last line should go into function StateChanged() ? Or in request.onload = function() { alert("In onload..."); }; – Anuj Balan Oct 23 '15 at 23:51
You don't need the code snippets that you have posted in your question , the above jQuery snippet is enough for accessing an input in an iframe and updating it's value. – undefined Oct 23 '15 at 23:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/93219/discussion-between-anuj-balan-and-vohuman). – Anuj Balan Oct 23 '15 at 23:54
Disabling the same origin did the trick. Thank you so much. 5 hours of pain. – Anuj Balan Oct 24 '15 at 00:04

Filling the details in a third party website automatically

1 Answers1