title: Same Origin issue accessing iframe from jQuery in browser console
body: <p>I'm trying to automate interactions with a website that I don't control.  Notably for this discussion, the page from the site contains several iframes.  For example, consider the source of the imaginary (but comparable) page <a href="https://www.chicken.com/a/b/hamburger.aspx" rel="nofollow">https://www.chicken.com/a/b/hamburger.aspx</a> to look something like:</p>
  
  <pre><code>&lt;html&gt;
      ... 
      &lt;iframe id="iframe_a" src="meatloaf.aspx"&gt;&lt;/iframe&gt;
      &lt;iframe id="iframe_b" src="stuffing.aspx"&gt;&lt;/iframe&gt;
      ...
  &lt;/html&gt;
  </code></pre>
  
  <p>Notably, the 'src' attributes of the iframes are relative, so they are to be loaded from the original domain (www.chicken.com/a/b/ in this case) and there doesn't seem to be any 'Same Origin' issues, since I can login to the site and interact with it just fine.  However, this all changes when I try to interact with the iframes using the Chrome dev console.  For instance, this is what happens when I try to get the contents of one of the iframes using jQuery:</p>
  
  <pre><code>$('#iframe_a').contents()
  
  jquery-1.11.3.min.js:2 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://www.chicken.com" from accessing a cross-origin frame.(…)
  </code></pre>
  
  <p>My (wrong) intuition is that since the sources of these iframes is the same domain as is the original page, that javascript interactions in the console should be under the auspices of that original domain, and everything should be fine.  But clearly I'm not understanding the nuances of Same Origin.  Can someone enlighten me about how it works in this case?  And perhaps suggest a way to manipulate the contents of this iframe from a running browser?</p>