asked on Exception reading an iframe content from chrome console
Hi,
I have a following html page :
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.ext
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
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>
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.ext
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
JavaScriptWeb ApplicationsWeb BrowsersJava EE
Last Comment
Dave Baldwin
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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
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
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.
ASKER
yes i have a script in parenr doc which access the contents of the iframe and so the cross origin error pops up
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>
ASKER
one strange thing here $('iframe').contents() i get an error no such function contents... but on my page this was working
ASKER
$('iframe').contentDocumen
ASKER
One more thing i noticed is that if i console.log(document.domai
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.
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.
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.
ASKER
so should i use 127.0.0.1 or local ip address of my computer ?
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.
But i am getting the error : Uncaught SecurityError: Failed to set the 'domain' property on 'Document': 'localhost' is not a suffix of ''.