Same origin policy

The same origin policy permits scripts running on pages originating from the same domain to access each other’s DOM  with no specific restrictions, but prevents access to DOM on different domains.

same_origin_policy

Let me explain how policy works with an example:

Suppose consider you have page1.html in a domain example.com

And consider this is the content of the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script  src="http://code.jquery.com/jquery-1.2.3.min.js"></script>
<title>page1</title>
</head>
<body>
<span>Page1 content goes here</span>
<iframe src="http://example.com/Page2.html"></iframe>
<iframe src="https://www.otherDomain.com/other.html"></iframe>
</body>
</html>

If you see in the above example there are two iframe tags.

First iframe pointing to the page2 of a same domain and it works fine.

But the second iframe which is pointing to the page of another domain will not load this  because it’s not from the same domain.

(Note: Again it’s depends on the domain too some domains even allow the other domains to access their  DOM without any security restrictions

Ex for such sites: http://www.w3schools.com From any domain you can access this site).

This Same origin Policy poses a problem for large websites that uses multiple subdomains.

To overcome from this problem we can use an open source service which is provided by WhateverOrigin.org  .

What this service does is  It just grabs content from a website specified in GET parameter and returns it together with HTTP status code as JSON data. By this we are not pointing iframe to the target site directly instead we are just getting the html content and rendering the same.

So we can modify the above example as:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>
<title>Page1</title>
</head>
<body>
<span>Page1 content goes here</span>
<iframe src="http://example.com/Page2.html"></iframe>
<div id="siteLoader">
<i>Loading&hellip;</i>
</div>
<script>
var url = ' https://www.otherDomain.com/otherPage.html';
$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent(url) + '&callback=?', function(data){
 var html = ""+data.contents;
/* Replace relative links to absolute ones */
html = html.replace(new RegExp('(href|src)="/', 'g'),  '$1="'+url+'/');
$("#siteLoader").html(html);
});
</script>
</body>
</html>

In the above example we are creating a div with id siteLoader which is a place holder for url content.

In the javascript we are getting the content of the url using service provided by http://whateverorigin.org.

Later on we are adding the html content to the div tag

  $(“#siteLoader”).html(html);

Now you can see both pages iframes seamlessly.

There are other techniques too provided to come out of this policy like

1. Document.domain property

2. Cross-Origin Resource Sharing

3. cross-document messaging

 

The following two tabs change content below.

Chaman Shareef

Latest posts by Chaman Shareef (see all)

Submit a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current month ye@r day *