Cross origin security error although the iframe is on the same domain

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

var iframe = document.getElementById('iframe'),
            button = document.getElementById('button');
        button.onclick = function () {
            iframe.src = 'linked-frame.html';
   = 'red';

[B]DEMO[/B] is a different domain from

The domains must match or otherwise you will not be allowed (for security reasons) to access a the frame of a different domain.

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

Sorry man, but the restriction is on where the frame is loaded from. Your frame is loaded from so only frames existing in are allowed to interact with it.