Exception reading an iframe content from chrome console

Rohit Bajaj
Rohit Bajaj used Ask the Experts™
on
Hi,
I have a following html page  :
<!DOCTYPE html>
<html>
  <head>
    <title>${note.title}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

    <script>var mode = "${mode}"</script>
    <script>var require = {config: function (c) {require = c}}</script>
    <script src="${resourcePrefix}/js/config.js"></script>
    <script data-main="${resourcePrefix}/js/view.js" src="${resourcePrefix}/lib/require.js"></script>
    <link media="screen and (min-device-width: 737px)" rel="stylesheet" href="${resourcePrefix}/css/view.css"/>
    <link media="only screen and (min-device-width: 320px) and (max-device-width: 736px)" rel="stylesheet" href="${resourcePrefix}/css/view-mobile.css" />
  </head>

  <body>
    <h1 id="title">${note.title}</h1>
    <div id="textContainer">
    <iframe id="iframe" scrolling="yes" frameborder="0" style="position: relative; height: 100%; width: 100%;" src="${dataUri}">
    </iframe>
    </div>
    <div id="buttons">
        <button id="edit">Edit Note</button>
    </div>
    <div class="invisible" data-edit-url="${editURL}">
    </div>
  </body>
</html>

Open in new window


This page is a jsp which is returned from server running at my local machine.
However if i type the following command in console : $('iframe').contents() i get the following error :
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.(…)n.each.contents @ jquery-2.1.4.min.js:2n.extend.map @ jquery-2.1.4.min.js:2n.fn.(anonymous function) @ jquery-2.1.4.min.js:2(anonymous function) @ VM449:2InjectedScript._evaluateOn @ VM302:875InjectedScript._evaluateAndWrap @ VM302:808InjectedScript.evaluate @ VM302:664

Which is strange as the iframe is loaded from my local server its not loaded from some other domain...
Also the same thing works fine on firefox.. Its only causing problems in chrome .

How can i get rid of this ?
Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Fixer of Problems
Most Valuable Expert 2014
Commented:
First you can stop running it on 'localhost'.  Chrome won't do a lot of things on 'localhost' because it is not a unique address.  Use the local IP address and Chrome will cooperate much more.  Chrome also will not accept a cookie on 'localhost' for the same reason.

Author

Commented:
I came across the thing that if i set document.domain inside my iframes and main page then this cross domain issue will not be there. So i tried setting the following script in src of iframe  : <script>document.domain = "localhost"</script>

But i am getting the error : Uncaught SecurityError: Failed to set the 'domain' property on 'Document': 'localhost' is not a suffix of ''.

Author

Commented:
using ip address also doesnt work..
as i am using src attribute in my iframe looks like chrome thinking its coming from a cross domain.. i tried using srcdoc instead and it worked as i am just loading a base64 encoded html into it...
i want to know if i can set this document.domain in iframr and get it to work with src
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I just did a simple test on iframes.  For a simple iframe which load an external page, none of the browsers have a problem with it.  I believe your problem is that you are trying to use scripts to do and that is causing the security errors.

Author

Commented:
yes i have a script in parenr doc which access the contents of the iframe and so the cross origin error pops up
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
This simple demo should work on your browsers.  Try it and let me know.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>DIBs iFrame</title>
</head>
<body>
<h1>DIBs iFrame</h1>
<iframe id='sframe' height="620px" width="620px"></iframe>
<!-- The javascript must go After the id -->
<script type="text/javascript">
<!--
document.getElementById('sframe').src = 'http://www.dibsiam.com/';
// -->
</script>

</body>
</html>

Open in new window

Author

Commented:
one strange thing here $('iframe').contents() i get an error no such function contents... but on my page this was working

Author

Commented:
$('iframe').contentDocument throws error in chrome console... cross origin. but not in firefox....looks like firefox automatically sets the domain for an iframe

Author

Commented:
One more thing i noticed is that if i console.log(document.domain) inside the iframe src which is a dataURI base64 encrypted.
It prints '' in chrome and localhost in firefox...
Althought the dataURI is served from the localhost... chrome seems to ignore that and so for it the iframe is cross origin
whereas for firefox its not.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I try to NEVER use 'localhost' because there are too many problems with it.  It is not treated the same as even the IP address on the same computer and of course 'localhost' is local to the computer you are on, it never accesses a remote computer.  'localhost' is used by some software to make sure you can't access it remotely which is probably the only 'good' use for it.

Author

Commented:
so should i use 127.0.0.1 or local ip address of my computer ?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Use the local ip address of your computer.  That's what I do here.  Many of my computers do not respond to 'localhost' at all.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial