Same origin policy for accessing DOM A webpage inside an iframe/frame is not allowed to modify or access the DOM of its parent or top page and vice-versa if both pages don’t belong to same origin. There are three ways of bypassing this restriction window.document.domain variable manipulation Proxy Cross Document Messaging

A frame or child page can bypass this restriction by setting window.document.domainvariable to the same domain name as the parent’s domain name.

Note that window.document.domain value can only be changed to parent’s domain name if the child page’s original domain is a sub domain of parent’s page or parent’s domain name is a sub domain of child’s domain name. For example parent page has domain name “www.example.com” and child page has domain name “www.blog.example.com” then child page can change its domain name to “www.example.com” but not “www.myexample.com”.

Let’s see an example of this
http://www.qnimate.com/parent.html

<iframe src="http://www.blog.qnimate.com/child.html" id="myIFrame"></iframe>
<script>
window.document.domain = "www.qnimate.com";//you also need to set the parent's document.domain variable
window.document.getElementById("myIFrame").contentWindow.document.body.style.backgroundColor = "red";//this access is allowed by default
</script>

http://www.blog.qnimate.com/child.html

<script>
window.document.domain = "www.qnimate.com"; //if we remove this line then the below line will not work and throw a same origin policy exception.
window.parent.document.body.style.backgroundColor = "blue";
</script>

You can also create a proxy script which will serve the content of iFrame from different domain.

Let’s see an example of this
http://www.qnimate.com/parent.html

<iframe src="http://www.qnimate.com/child.php" id="myIFrame"></iframe>
<script>
window.document.getElementById("myIFrame").contentWindow.document.body.style.backgroundColor = "red";//this access is allowed by default
</script>

http://www.qnimate.com/child.php

    echo file_get_contents('http://www.blog.qnimate.com/child.html');
?>

http:://www.blog.qnimate.com/child.html

<script>
window.document.domain = "www.qnimate.com"; //if we remove this line then the below line will not work and throw a same origin policy exception.
window.parent.document.body.style.backgroundColor = "blue";
</script>

Parent and Child page can also access each other’s DOM by sending messages to each other using Cross Document Messaging API.

Let’s see an example of this
http://www.qnimate.com/parent.html

<iframe src="http://www.blog.qnimate.com/child.html" id="myIFrame"></iframe>
<script>
var eventMethod = window.addEventListener ? "addEventListener" :"attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" :"message";

// Listen to message from child window
eventer(messageEvent,function(e) {
    if(e.data == "changebgofparent")
    {
        document.body.style.backgroundColor = "blue";
    }
},false);

window.document.getElementById("myIFrame").contentWindow.postMessage("changebgofchild","*");
/*postMessage second parameter represents the domain name to which this message can be sent to, if the child domain name doesn't match then this message will not be sent. Here * means any domain */ 
</script>

http://www.blog.qnimate.com/child.html

<script>
var eventMethod = window.addEventListener ? "addEventListener" :"attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" :"message";

// Listen to message from child window
eventer(messageEvent,function(e) {
    if(e.data == "changebgofchild")
    {
        document.body.style.backgroundColor = "red";
    }
},false);

window.parent.postMessage("changebgofparent","*");
/*postMessage second parameter represents the domain name to which this message can be sent to, if the child domain name doesn't match then this message will not be sent. Here * means any domain */ 
</script>

---

Same Origin Policy for AJAX

A webpage cannot make a AJAX Request to an another page if they both don’t belong to the same origin policy.

There are basically three ways of bypassing this restriction

• Proxy server
• JSONP
• Cross-Origin Resource Sharing

To bypass this policy we can use a proxy script to get the contents of a remote file that doesn’t belong to the same origin.

Let’s see an example of this

http://www.qnimate.com/index.html

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","http://www.qnimate.com/ajaxdata.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

http://www.qnimate.com/ajaxdata.php

   echo file_get_contents('http://www.qscutter.com/ajaxdata.txt');
?>

Although a XMLHTTPRequest object cannot make a cross origin request, but a