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 portal.domain.com
and the iframe is on iframe.domain.com
. I need to make requests to iframe.domain.com
from portal.domain.com
and I was hoping to use this iframe to make those requests.
I created the iframe like this:
// 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('<body onload="' +
'var s = document.createElement(\'script\');' +
's.onload = onIframeLoad;' +
'document.getElementsByTagName(\'head\')[0].appendChild(s).src=\'' + "iframe.domain.com/content.js" + '\'">');
doc.close();
The script loaded in the iframe looks like this:
// iframe.domain.com/content.js
document.domain = "domain.com"
function makeRequest() {
// AJAX call here
}
The AJAX call is made, but the origin gets set to portal.domain.com
. 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?