title: AJAX request from iframe, why is the origin the parent's URL?
body: <p>I have a website that I am loading an iframe in. The iframe is on a different subdomain than the website itself. Let's say the website is on <code>portal.domain.com</code> and the iframe is on <code>iframe.domain.com</code>. I need to make requests to <code>iframe.domain.com</code> from <code>portal.domain.com</code> and I was hoping to use this iframe to make those requests.</p>
  
  <p>I created the iframe like this:</p>
  
  <pre><code>// On portal.domain.com
  document.domain = "domain.com";
  var iframe = document.body.appendChild(document.createElement('iframe'));
  iframe.contentWindow.onIframeLoad = function() {
      iframe.contentWindow.makeRequest();
  }
  
  var doc = iframe.contentWindow.document;
  doc.open().write('&lt;body onload="' + 
          'var s = document.createElement(\'script\');' + 
          's.onload = onIframeLoad;' +
          'document.getElementsByTagName(\'head\')[0].appendChild(s).src=\'' + "iframe.domain.com/content.js" + '\'"&gt;');
  doc.close();
  </code></pre>
  
  <p>The script loaded in the iframe looks like this:</p>
  
  <pre><code>// iframe.domain.com/content.js
  document.domain = "domain.com"
  
  function makeRequest() {
    // AJAX call here
  }
  </code></pre>
  
  <p>The AJAX call is made, but the origin gets set to <code>portal.domain.com</code>. This causes the cookies not to be sent and for the browser to block the response due to its CORS policy. Why is this happening? </p>