Our application used to embed a third party without being too cautious, using the following working code:
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" srcdoc="<script src='https://thirdparty.com/script.js'></script>"></iframe>
I wish to remove allow-same-origin to prevent this third party from having access to anything from our domain as the third party does not need it.
However, it happens that this script creates a new iframe (within the iframe sandbox we have). The iframe src is about:blank and the first iframe communicates with its child with contentWindow.
It seems that our site, our site's child iframe and the iframe's child iframe used to share the same domain thanks to allow-same-origin. Now that it was removed, the site's iframe and the iframe's child both share a null origin it seems, which is not accepted by the same origin policy and result in the following error:
Uncaught DOMException: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.
To resume, this are the origins with sandbox="allow-same-origin allow-scripts allow-popups allow-forms":
site.com
|===> iframe A (origin: site.com)
|===> iframe B (origin: site.com)
This are the origins with sandbox="allow-scripts allow-popups allow-forms"
site.com
|==> iframe A (origin: null)
|===> iframe B (origin: null)
This is the origins that I wish:
site.com
|==> iframe A (origin: some origin that is not site.com ?)
|===> iframe B (origin: some origin that is not site.com ?)
What options do I have so that the iframe and the iframe's child share the same origin, and that our site and the iframes do not ?