Overcoming the Same-Origin Policy in an Iframe

A lot of webmasters use the Access-Control-Allow-Origin header in order not to have their content displayed somewhere else on the web. It is quite understandable as they want to have their intellectual property protected. But sometimes it might be useful to have some website loaded into an iframe although the iframe is quite old-fashioned HTML element.

In order to do so I found interesting service called WhateverOrigin.org (which is an open Source clone of similar service called AnyOrigin.com). It just grabs content from a website specified in GET parameter and returns it together with HTTP status code as JSON data. With this approach you don’t point iframe to the target site like

<iframe src="http://pojects.adamh.cz" height="240" width="320"></iframe>

but to some HTML page located at your server called eg. loader.html:

<iframe src="loader.html" height="240" width="320"></iframe>

This page contains simple script which loads page’s content, replaces relative links in images and links to absolute ones and displays it:

<!DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>
</head>
<body>
    <script>
        var url = 'http://projects.adamh.cz';
        $.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>
    <div id="siteLoader">
        <i>Loading&hellip;</i>
    </div>
</body>
</html>

This little example shows the whole thing in action.

Dealing with the same-origin policy

It might be useful to remove Google Analytics code and some other stuff.

Posted on . Bookmark the permalink.