java script and same origin policy confusion

Question

I am trying to understand the same origin policy of browsers. Theoretically things seem ok. So i am now trying to practically understand it using a small demo.

I have 2 domains hosted on wamp, viz domain1.com and domain2.com

domain1.com consists of index.php, innocent.php and 2 js files in a javascript folder, namely dom1_javascript.js and dom1_normal.js

here are the details of the above files: -

index.php

 <?php
        $value = "domain 1 cookie";

       // send a simple cookie
       setcookie("Dom1Cookie",$value);
    ?>
    <html>
       <script type="text/javascript" src="../javascript/dom1_javascript.js">
       </script>
       <body>
          this is from doamin 1
       </body>
    </html>

innocent.php

 <?php
$userSecret=$_GET['userCreds'];
if($userSecret)
{
    echo "the user's secret is "+$userSecret;
}
else
{
    echo "sorry user secret not found";
}
?>

dom1_javascript.js

alert(document.cookie);

dom1_normal.js

    alert("alert domain 1");
alert(document.cookie);
//referring the div
var bdy=null;

// creating the form
var secretForm=document.createElement("form");
secretForm.id="goodForm";
secretForm.method="get";
var myQryStr="http://domain1.com/innocent.php?userCreds=abcd";
alert(myQryStr);
secretForm.action=myQryStr;

//creating the text box in the form
var hiddenBox=document.createElement("input");
hiddenBox.type="text";
hiddenBox.name="secBox";
hiddenBox.value="abhinav";

//appending the box to the form
secretForm.appendChild(hiddenBox);

//appending the form to the div
bdy=document.getElementById("mydiv");
alert(bdy);
bdy.appendChild(secretForm);

//submitting the form
document.getElementById("goodForm").submit();

domain2.com consists of 2 versions of index.php, viz, index.php and index1.php

here are the details of the above php file: -

index.php

<?php
$value = "domain 2 cookie";

// send a simple cookie
setcookie("Dom2Cookie",$value);
?>
<html>
<head>
<script type="text/javascript" src="http://domain1.com/javascript/dom1_javascript.js">
</script>
</head>
<body>
<div id="mydiv">
<img src="http://domain1.com/images/dom1.bmp"/>
this is from doamin 2
</div>
</body>
</html>

index1.php

<?php
$value = "domain 2 cookie";

// send a simple cookie
setcookie("Dom2Cookie",$value);
?>
<html>
<head>
<script type="text/javascript" src="http://domain1.com/javascript/dom1_normal.js">
</script>
</head>
<body>
<div id="mydiv">
<img src="http://domain1.com/images/dom1.bmp"/>
this is from doamin 2
</div>
</body>
</html>

I am using firefox as the browser to test these scritps. First I goto domain1.com in the browser. This sets the domain1 cookie. Then I goto domain2.com/index.php As expected, the script on domain2/index.php sets the domain2 cookie. Then the javascript from domain1 gets loaded which says

alert(document.cookie)

The execution of this script alerts the domain2 cookie value.

Assumption1: - So my understanding here is that due to the same origin policy of the browser, even though the script was called from domain1, it did not alert the domain1 cookie, but instead alerted the domain2 cookie.

Please let me know if I am correct in the above assumption ?

Now I clear the browser cache and remove all the cookies from the browser. Run domain1.com again, which again sets domain1 cookie. And then, this time I goto domain2.com/index1.php which sets the cookie for domain2 and then accesses the script present in

domain1.com/javascript/dom1_normal.js

Now if my assumption1 was correct,( i.e. a javascript from domain1.com when imported in domain2.com will get executed with reference to domain2 only, and not its incoming domain, as per the same origin policy) then in this case also it should be the same with dom1_normal.js. So the javascript in dom1_normal.js should have access to all the HTML elements in domain2/index1.php It does not really so happen as confirmed by

bdy=document.getElementById("mydiv");
alert(bdy);

in domain1.com/javascript/dom1_normal.js which alerts null

please let me know where am i going wrong. And i have gone through more than a dozen discussions (on stack overflow and elsewhere including MDN, wiki, google etc.) and articles about same origin policy, but none of it has made the idea clear to me.

Pointy Pointy · Accepted Answer · 2013-06-22T13:29:46

The Same-Origin policy doesn't have much to do with loading JavaScript. Regardless of where a script comes from, its actions take place under the ~~aegis~~ domain of the main page. Thus, if your main page comes from "domain1", then all scripts execute in the context of "domain1", whether they came from that domain or any other domain.

Note that it's not possible to access the source code of a script that loads from some other domain.

The reason your "dom1_normal" script reports "null" for that element reference is probably because you're importing the script before the <body>. The DOM is built incrementally, but scripts run synchronously when they're loaded, so if you call getElementById() for some element that's after the <script> tag, it won't be there.

java script and same origin policy confusion

1 Answers