1

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.

Community
  • 1
  • 1
Joshua Moon
  • 347
  • 2
  • 12
  • See my answer posted at: [http://stackoverflow.com/questions/31232348/get-data-out-of-json-array-from-external-url/31237694#31237694][1] [1]: http://stackoverflow.com/questions/31232348/get-data-out-of-json-array-from-external-url/31237694#31237694 – Muhammad Imran Jul 20 '15 at 14:52

2 Answers2

1

No, it is not possible.

Access-Control-Allow-Origin primarily affects getting raw data from HTTP requests, not live DOMs.

postMessage can let frames on different origins communicate, but it requires JS to be included on both pages.

Community
  • 1
  • 1
Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
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>
SilverlightFox
  • 28,804
  • 10
  • 63
  • 132
  • This seems to be the way to go. While I cannot directly control any of the script on the "app" pages, I have discovered that I can inject it using the URL Rewrite module. This should work if I can find a reliable pattern to match against to ensure it's always injected. The app does not seem to follow common html standards. (I had thought that matching against `` would be pretty sure-fire, but no. Thank you for your help. – Joshua Moon Jul 21 '15 at 21:29