Allowing cross-site requests between subdomains without changing file contents of second sub domain

Question

I am currently attempting to wrap a web application (ConnectWise) for inclusion within my company's central intranet site. It's a fairly simple process for the most part; create a containing page, with an iframe, point the iframe at the ConnectWise url. This part works for almost all of the functionality.

The problem comes during certain select features of the app (in this case, part of the process of creating a timesheet entry), which simply fail to work. Chrome gives the following console output.

Uncaught SecurityError: Failed to read the 'frame' property from 'Window': Blocked a frame with origin "https://app.example.com" from accessing a frame with origin "https://host.example.com". Protocols, domains, and ports must match.

I am aware this is caused by the security options for cross-site and same-origin policies. Given the following points, is there a way to overcome this?

• I have full control over https://host.example.com
  • I can change html, javascript, and file contents
  • I can change IIS settings and headers
• I have partial control over https://app.example.com
  • I can not change html, javascript, and file contents
  • I can change IIS settings and headers.

I have tried setting the Access-Control-Allow-Origin on each server, which so far is the only method I've come across that does not involve being able to change the file contents for the app server. This does not appear to work when given the settings (and combinations of settings) of

• * or https://app.example.com while on https://host.example.com
• * or https://host.example.com while on https://app.example.com

Edit:

The solution to this "duplicate" question is not applicable here. I do not have access to change file contents (including javascript) of the iframed page (app.example.com). Additionally, the script requiring the permission to run is the page within the iframe, not the page hosting the iframe.

Answer 1

CORS headers such as Access-Control-Allow-Origin only affect AJAX requests, not DOM access.

However, If they are both on the same domain but different subdomains then you can include the following on each page:

document.domain = 'example.com';

From MDN:

One document is allowed to access another if they have both set document.domain to the same value, indicating their intent to cooperate

If app.example.com has any script includes to host.example.com then you could put the above code in those scripts to set the domain.

e.g.

<script src="https://host.example.com/setup.js"></script>