Search code examples
javascriptiframesame-origin-policy

How can I prevent JavaScript in an iFrame to access properties of the outer site, even if the iFrame's content comes from the same origin?


Basically I want to have an iFrame which always restricts it's content as if it comes from a different domain, even if the content comes from the same origin.

Is there any way to do this?


Solution

  • This will hide window.parent in the child frame/window, but not the top property.

    BUT the window.parent property is STILL accessible till the end of the onload event of the child window/frame.

    <html>
      <head>
        <style type="text/css">
          #wrapper {width:1000px;height:600px;}
        </style>
        <script type="text/javascript">
          window.onload = function() {
            var frm = document.getElementById('childFrame');
            var win = frm.contentWindow || (frm.contentDocument && frm.contentDocument.parentWindow) || (frm.document && frm.document.parentWindow);
            if (win) win.parent = null;
          }
        </script>
      </head>
      <body>
        <div id="wrapper">
          <iframe id="childFrame" src="child.html" frameborder="0" style="width:100%;height:100%;"></iframe>
        </div>
      </body>
    </html>