title: Chrome throws a cross-origin error when accessing contentDocument of an iframe in the same domain
body: <p>I've encountered a weird problem that only seems to affect Google Chrome.</p>
  
  <p>I'm helping my fellow developer to build a simple portfolio page that hosts HTML5 banners. The way it works is as follows:</p>
  
  <p>Upon loading the page, you're presented with the list of clients. After clicking one of them, a bootstrap modal opens, inside which there's a carousel with examples of HTML5 banners created for that client. Each of them is loaded inside an iframe that's contained within each carousel slide.</p>
  
  <p>Now, the banner is only meant to play when the slide is active. To achieve that, the developer has added two listeners to the carousel element:</p>
  
  <p>slid.bs.carousel and shown.bs.modal</p>
  
  <p>The handler for each of those is the same: it checks if the iframe is loaded and if so, posts a "play" message to it:</p>
  
  <pre><code>function postMessageToIframe(iframe, message) {
      var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  
      if (iframeDoc.readyState  == 'complete' ) {
          iframe.contentWindow.postMessage(message, iframe.src);
          return;
      }
  
      window.setTimeout(function() {
          postMessageToIframe(iframe, message);
      }, 100);
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('.carousel').on('slid.bs.carousel', function() {
      postMessageToIframe($(this).find('.active.item iframe')[0], 'play');
  });
  </code></pre>
  
  <p>Now, this works perfectly fine across the board, except for Google Chrome, which throws the following error:</p>
  
  <blockquote>
    <p>Failed to read the 'contentDocument' property from
    'HTMLIFrameElement': Blocked a frame with origin
    "<a href="http://xxxx" rel="nofollow noreferrer">http://xxxx</a> from accessing a cross-origin frame.</p>
  </blockquote>
  
  <p>Here's what's weird:</p>
  
  <ol>
  <li>It only does that for <strong>some banners</strong>, while other open and play fine</li>
  <li>The <strong>domain is the same</strong> and <strong>so is the protocol and port</strong></li>
  <li>There's no document.domain or any such thing present in any of the banners and there's no .htaccess file with any special rules</li>
  </ol>
  
  <p>Any ideas?</p>