title: how can I access iframe.contentDocument to get response after cross-origin request?
body: <p>I'm successfully sending a file from <code>localhost:8888</code> to <code>localhost:8080</code> (different domain in production), but I can't read the HTTP response after the transfer finishes.</p>
  
  <blockquote>
    <p>Uncaught SecurityError: Failed to read the 'contentDocument' property
    from 'HTMLIFrameElement': Blocked a frame with origin
    "<a href="http://localhost:8888" rel="nofollow noreferrer">http://localhost:8888</a>" from accessing a frame with origin
    "<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a>". The frame requesting access set
    "document.domain" to "localhost", but the frame being accessed did
    not. Both must set "document.domain" to the same value to allow
    access.</p>
  </blockquote>
  
  <p>To send the file, for compatibility support, I'm trying to get this to work for <code>&lt;form&gt;</code> based file uploads; not <code>XHR</code> based. This is the basic HTML structure:</p>
  
  <pre><code>&lt;form target="file-iframe" enctype="multipart/form-data" method="POST" action="invalid"&gt;
    &lt;input type="file" id="file-input" class="file-input" title="select files"&gt;
  &lt;/form&gt;
  &lt;iframe src="javascript:false;" id="file-iframe" name="file-iframe"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>To insert the <code>&lt;iframe&gt;</code> element into the DOM, I do the following:</p>
  
  <pre><code>document.domain = document.domain;
  var domainHack = 'javascript:document.write("&lt;script type=text/javascript&gt;document.domain=document.domain;&lt;/script&gt;")';
  
  var html = '&lt;iframe id="file-iframe" name="file-iframe"&gt;&lt;/iframe&gt;';
  var parent = document.getElementById('wrapper');
  var iframe = UTILS.createDomElement(html, parent);
  iframe.src = domainHack;
  
  UTILS.attachEvent(iframe, 'load', function(e) {
  
    // this throws the above SecurityError
    var doc = iframe.contentDocument || iframe.contentWindow.document;
  
    // do other stuff...
  });
  </code></pre>
  
  <p>Before I submit the form, I set the <code>action</code> attribute on the <code>&lt;form&gt;</code> to be the target cross-domain URL:</p>
  
  <pre><code>action="http://localhost:8080/"
  </code></pre>
  
  <p>After submitting the <code>&lt;form&gt;</code>, the <code>&lt;iframe&gt;</code>'s <code>load</code> event is fired, and I try to access the <code>&lt;iframe&gt;</code>'s content to read the HTTP response. However, doing so throws the above error since this is is a cross-origin request, and I don't have access to the <code>&lt;iframe&gt;</code>'s content. </p>
  
  <p>I thought the <code>document.domain</code> hack would work, but the error message is telling me that the <code>iframe</code> did not set the domain to <code>localhost</code>, even though I set the <code>iframe</code>'s <code>src</code> attribute to the <code>domainHack</code> variable, which seems to execute.</p>
  
  <p>Any ideas as to what I might be doing wrong? How can I set <code>document.domain</code> to be <code>localhost</code> for both the <code>&lt;iframe&gt;</code> and its parent (which is the current page). </p>
  
  <hr>
  
  <p>I've read through several StackOverflow questions, some MDN articles, and other random results on Google, but I haven't been able to get this to work. Some stuff I've looked through already:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy">Ways to circumvent the same-origin policy</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS</a></li>
  </ul>