Exception reading an iframe content from chrome console

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
Rohit BajajAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rohit BajajAuthor 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 ''.
Rohit BajajAuthor 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
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Dave BaldwinFixer of ProblemsCommented:
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.
Rohit BajajAuthor 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 ProblemsCommented:
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

Rohit BajajAuthor Commented:
one strange thing here $('iframe').contents() i get an error no such function contents... but on my page this was working
Rohit BajajAuthor Commented:
$('iframe').contentDocument throws error in chrome console... cross origin. but not in firefox....looks like firefox automatically sets the domain for an iframe
Rohit BajajAuthor 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 ProblemsCommented:
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.
Rohit BajajAuthor Commented:
so should i use 127.0.0.1 or local ip address of my computer ?
Dave BaldwinFixer of ProblemsCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.