Solved: Exception reading an iframe content from chrome console

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

飞奔的企鹅 · html如何让iframe全屏显示 | ...· 5 天前 ·

冷静的日记本 · 实现iframe里面的页面全屏_iframe ...· 5 天前 ·

逃跑的灭火器 · iframe全屏兼容（按钮在iframe里） ...· 5 天前 ·

酒量小的小蝌蚪 · iframe嵌套其它网站页面 ...· 5 天前 ·

谈吐大方的电脑桌 · 全屏 API 标准· 5 天前 ·

温文尔雅的蟠桃 · Java ...· 2 周前 ·

逆袭的小笼包 · golang 把内容写到 csv 文件或者 ...· 2 月前 ·

玩足球的楼梯 · “现代史上最严重的盗窃事件” ...· 2 月前 ·

内向的冲锋衣 · 第 19 章使用 RHEL ...· 4 月前 ·

追风的水煮鱼 · 《魔女宅急便》中的琪琪修行所在的城市设计是以 ...· 1 年前 ·

){outline:none;box-shadow:none;}select::-ms-expand{;}:root,:host{--chakra-vh:100vh;}@supports (height: -webkit-fill-available){:root,:host{--chakra-vh:-webkit-fill-available;}}@supports (height: -moz-fill-available){:root,:host{--chakra-vh:-moz-fill-available;}}@supports (height: 100dvh){:root,:host{--chakra-vh:100dvh;}}

Create Account

Rohit Bajaj 🇮🇳

asked on

Exception reading an iframe content from chrome console

I have a following html page :

<!DOCTYPE html>
    <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>
    <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 id="buttons">
        <button id="edit">Edit Note</button>
    <div class="invisible" data-edit-url="${editURL}">
  </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.ext end.map @ jquery-2.1.4.min.js:2n.fn. (anonymous function) @ jquery-2.1.4.min.js:2(anon ymous function) @ VM449:2InjectedScript._eva luateOn @ VM302:875InjectedScript._e valuateAnd Wrap @ VM302:808InjectedScript.ev aluate @ 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

ASKER CERTIFIED SOLUTION

Dave Baldwin 🇺🇸

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Rohit Bajaj 🇮🇳

ASKER

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 Bajaj 🇮🇳

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

Dave Baldwin 🇺🇸

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 Bajaj 🇮🇳

ASKER

yes i have a script in parenr doc which access the contents of the iframe and so the cross origin error pops up

Dave Baldwin 🇺🇸

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">
<title>DIBs iFrame</title>
</head>
<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 Bajaj 🇮🇳

ASKER

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

Rohit Bajaj 🇮🇳

ASKER

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

Rohit Bajaj 🇮🇳

ASKER

One more thing i noticed is that if i console.log(document.domai n) 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 Baldwin 🇺🇸

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 Bajaj 🇮🇳

ASKER