The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Cross origin security error although the iframe is on the same domain
RainLover
post May 30 2014, 05:12 AM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



I get a security error in console when I click the button:

CODE
var iframe = document.getElementById('iframe'),
            button = document.getElementById('button');
                button.onclick = function () {
            iframe.src = 'linked-frame.html';
            iframe.contentDocument.body.style.background = 'red';
        };


DEMO

This post has been edited by RainLover: May 30 2014, 05:13 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 07:05 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



Maybe it's because the parent page is hosted at dl.dropboxusercontent.com, the default framed page is hosted at www.example.com, and when clicking the button the framed page host changes to dl.dropboxusercontent.com?

Test if it the error disappears if all three pages are hosted at the same domain.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post May 30 2014, 07:49 AM
Post #3


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(Christian J @ May 30 2014, 07:05 AM) *

Maybe it's because the parent page is hosted at dl.dropboxusercontent.com, the default framed page is hosted at www.example.com, and when clicking the button the framed page host changes to dl.dropboxusercontent.com?

Test if it the error disappears if all three pages are hosted at the same domain.

But it shouldn't throw such an error as I change the iframe source in my function.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 08:08 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



QUOTE(RainLover @ May 30 2014, 02:49 PM) *

But it shouldn't throw such an error as I change the iframe source in my function.

Agreed. Perhaps is has something to do with the default domain being external, I suspect browsers are not very sophisticated in this regard (I recall some Chromium based browser caused similar errors even with local files, because it didn't recognize the file system as belonging to the same "domain").

Also, are you sure it's the color change that trigs the error (sometimes error logs don't match the exact code line)? In particular, do you still get an error if you use only

CODE
button.onclick = function () {
            iframe.src = 'linked-frame.html';
        }

? And how about using a same-domain default frame URL?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post May 30 2014, 08:15 AM
Post #5


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(Christian J @ May 30 2014, 08:08 AM) *

Also, are you sure it's the color change that trigs the error (sometimes error logs don't match the exact code line)? In particular, do you still get an error if you use only

CODE
button.onclick = function () {
            iframe.src = 'linked-frame.html';
        }


No errors.


QUOTE

And how about using a same-domain default frame URL?

I can't use the same-domain as default URL.

This post has been edited by RainLover: May 30 2014, 08:16 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 09:25 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



Have you tried clicking the button a second time? For me that causes the framed page to go red for a moment, then go back to default/white again. wacko.gif

Maybe the browser tries to change color before the new framed page has actually loaded. In that case, maybe you could use an onload event on the framed page and change color only after that.

Even better might be to change color from a script in the framed page itself. Perhaps you could send data from the parent page to the framed page with a querystring in the URL.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 30 2014, 11:34 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,425
Joined: 9-August 06
Member No.: 6



I don't know why, but the problem seems to have to do with changing the page in the iframe. It doesn't even work if you just relaod the same page. I can't spot what's wrong with doing it the way you do.

CODE
    <iframe src="linked-frame.html" id="iframe"></iframe>
    <input type="button" value="Color it!" id="button">
    <script>
        var iframe = document.getElementById('iframe'),
            button = document.getElementById('button');
            button.onclick = function () {
            iframe.src = 'linked-frame.html';
            iframe.contentDocument.body.style.background = 'red';
        };
    </script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 01:00 PM
Post #8


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



QUOTE(Christian J @ May 30 2014, 03:08 PM) *

(I recall some Chromium based browser caused similar errors even with local files, because it didn't recognize the file system as belonging to the same "domain").

Here's what it says when I try a local file:

"Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match."

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 01:20 PM
Post #9


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



This works in all my browsers when loaded from a server:
CODE

<iframe src="http://example.org" id="iframe"></iframe>
<input type="button" value="Color it!" id="button">
<script>
var iframe = document.getElementById('iframe'),
button = document.getElementById('button');
button.onclick = function ()
{
    iframe.src = 'linked-frame.html';
    iframe.onload=function()
    {
        this.contentDocument.body.style.background = 'red';
    }
};
</script>

(it also works from the file system except in Chromium, see my post above).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post May 30 2014, 01:23 PM
Post #10


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(Christian J @ May 30 2014, 01:20 PM) *

This works in all my browsers when loaded from a server:
CODE

<iframe src="http://example.org" id="iframe"></iframe>
<input type="button" value="Color it!" id="button">
<script>
var iframe = document.getElementById('iframe'),
button = document.getElementById('button');
button.onclick = function ()
{
    iframe.src = 'linked-frame.html';
    iframe.onload=function()
    {
        this.contentDocument.body.style.background = 'red';
    }
};
</script>

(it also works from the file system except in Chromium, see my post above).


Thanks for the answer! But it gives the same error message if click on the link inside the red iframe: Demo.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 02:11 PM
Post #11


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



QUOTE(RainLover @ May 30 2014, 08:23 PM) *

it gives the same error message if click on the link inside the red iframe

Seems the onload event is called again when you click the link, as shown by the alertbox below:

CODE
var iframe = document.getElementById('iframe'),
button = document.getElementById('button');
button.onclick = function ()
{
    iframe.src = 'linked-frame.html';
    iframe.onload=function()
    {
        alert('load');
        this.contentDocument.body.style.background = 'red';

    }
};

--I would have thought that such a nested onload event would only fire after the onclick, but I don't know enough about javascript to tell. unsure.gif

Anyway here's an crude workaround, I'm sure someone else can come up with something neater:

CODE
var iframe = document.getElementById('iframe'),
button = document.getElementById('button');
var clicked='no';
button.onclick = function ()
{
    clicked='yes';
    iframe.src = 'linked-frame.html';
    iframe.onload=function()
    {
        if(clicked=='yes')
        {
            this.contentDocument.body.style.background = 'red';
            clicked='no';
        }
    }
};
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 30 2014, 03:46 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,425
Joined: 9-August 06
Member No.: 6



The demo page works for me now (several browsers) but it doesn't contain an empty iframe to start with. but http://example.com. What did you do to make it work? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 05:08 PM
Post #13


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



There are two demo pages, I recall both have used http://example.com as default all the time.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 30 2014, 05:18 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



The first demo flashed red and back again and throwing a js error. The second demo (in post 10) works for me too without any error.

Though I didn't know about contentDocument, leaving it out (just using iframe.body.style.background = 'red';) works now too.

Safari 6/Mac

This post has been edited by Frederiek: May 30 2014, 05:20 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 30 2014, 05:20 PM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,425
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ May 31 2014, 12:08 AM) *

There are two demo pages, I recall both have used http://example.com as default all the time.



I don't know if it has changed, I hadn't looked at the second page before. I meant it wasn't as in your example.

But thing is, why does it work when the original example didn't?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 05:49 PM
Post #16


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



QUOTE(Frederiek @ May 31 2014, 12:18 AM) *

The second demo (in post 10) works for me too without any error.

The button works fine on that page.

Instead there's a new error when you click the link to http://example.com on the linked-frame.html page --don't you get that in Safari Mac? The link click apparently fires the onload event again when the http://example.com page is loaded, which in turn makes the script try to that style page, which isn't allowed and produces the new error (I think). happy.gif


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2014, 05:57 PM
Post #17


.
********

Group: WDG Moderators
Posts: 8,246
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ May 31 2014, 12:20 AM) *

I hadn't looked at the second page before. I meant it wasn't as in your example.

It's almost the same, and seems to work the same.

QUOTE
But thing is, why does it work when the original example didn't?

My theory is that the onload event in demo2 delays the styling until the local framed page is loaded. Without the onload the browser apparently tries to style the third party default page.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post May 30 2014, 08:51 PM
Post #18


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346



QUOTE(Christian J @ May 30 2014, 02:11 PM) *

Anyway here's an crude workaround, I'm sure someone else can come up with something neater:

CODE
var iframe = document.getElementById('iframe'),
button = document.getElementById('button');
var clicked='no';
button.onclick = function ()
{
    clicked='yes';
    iframe.src = 'linked-frame.html';
    iframe.onload=function()
    {
        if(clicked=='yes')
        {
            this.contentDocument.body.style.background = 'red';
            clicked='no';
        }
    }
};


Thank you very much! I think here's the neater way: demo.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 31 2014, 02:42 AM
Post #19


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE(Christian J @ May 31 2014, 12:49 AM) *

QUOTE(Frederiek @ May 31 2014, 12:18 AM) *

The second demo (in post 10) works for me too without any error.

The button works fine on that page.

Instead there's a new error when you click the link to http://example.com on the linked-frame.html page --don't you get that in Safari Mac? The link click apparently fires the onload event again when the http://example.com page is loaded, which in turn makes the script try to that style page, which isn't allowed and produces the new error (I think). happy.gif

I hadn't clicked that link, but indeed that throws 2 errors, one for the domain mismatch and a typeError : 'null' is not an object (evaluating 'iframe.contentDocument.body').

The third demo works fine, no errors, correct coloring.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 31 2014, 04:54 AM
Post #20


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,425
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ May 31 2014, 12:57 AM) *

It's almost the same, and seems to work the same.


Yeah, sorry. I thought yours has an empty iframe to start with. I must read the tread again. Must have missed something essential.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th November 2019 - 11:15 PM